Javascript Styles
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
LICENSE
README.md

README.md

jss: Javascript Styles

Concept

Write and apply styles in Javascript. One potential use case is providing a single compiled asset that includes a feature's behavior and styles.

Usage

Define styles in a Javascript object literal, where the root keys are the CSS selectors:

var typography = {
    "body": {
        "font-family": "Helvetica,Arial"
    },
    
    "h1": {
        "font-size": "36px"
    },
    
    "h2": {
        "font-size": "30px"
    },
    
    "h1, h2": {
        "margin-top": "20px",
        "margin-bottom": "10px"
    },
    
    ...
};

Then add the styles to jss:

jss.add(typography);

Apply the styles when the page is loaded, and automatically watch for changes. Styles will be re-applied automatically if the elements change:

$(document).ready(function() {
    jss.style().watch();
});

You can even narrow the scope by providing a CSS selector:

$(document).ready(function() {
    var el = "#foo";
    
    // add behavior
    $(el).applySomePlugin();

    // add styles
    jss.style(el).watch(el);
});