This page serves as quick reference about how to use JSS. It contains information about how to include JSS in your project, the boilerplate for creating a stylesheet, and a reference for the custom properties that JSS enables.

How to Include JSS

In order to use JSS in your project, you need 3 things:

  1. jQuery 1.2+,
  2. JSS,
  3. a JSS stylesheet

The first two steps will be dealt with in this section. The last step will be dealt with in the next section.

To get jQuery, head over the www.jquery.com and download the latest version (minified/gzipped or uncompressed). Save it as "jquery.js".

To get JSS, head over to the Google Code page grab "jquery.jss.js" (grab a stable release if it's available, otherwise use the development one from source control).

Now, add these two JavaScript files to your HTML file (example.html):

<html>
  <head>
    <title>Example</title>    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.jss.js"></script>
  </head>
  <body>
    <div class="Click me" id="click-me" />
    <div class="I will be hidden!" id="hide-me" />
  </body>
</html>

JSS boilerplate

All JSS stylesheets must be declared with the following boilerplate:

$.jss.declare({

  // Add JSS declaration blocks here.

});

By convention, all JSS files are saved with the prefix "jss", i.e. "jss.styles.js" or "jss.theme.js".

To demonstrate, let's create a JSS stylesheet that hides the div "hide-me" when the user presses the div "click-me" in the above example.html. Let's also style them to make it look nice.

$.jss.declare({

  "div":
  {
    padding: "5px",
    margin: "10px",
    border: "1px red solid",
    background: "maroon",
    color: "white",
    font_family: "sans-serif"
  },

  "#click-me":
  {
    click: "toggle (#hide-me) slow"
  }

});

Same the above file as "jss.styles.js" and read on.

How to Include a JSS Stylesheet

Now that we have a stylesheet jss.styles.js, let's go ahead and include it in the example.html file:

<html>
  <head>
    <title>Example</title>    
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.jss.js"></script>
    <script type="text/javascript" src="jss.styles.js"></script>
  </head>
  <body>
    <div class="Click me" id="click-me" />
    <div class="I will be hidden!" id="hide-me" />
  </body>
</html>

You can include as many JSS stylesheets as you'd like. Just keep adding more script tags. Keep in mind that they are run in order of appearance.