Spray is a straight-forward, lightweight, modular CSS loader.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
samples
LICENSE
README.md
spray.js

README.md

#Spray by Joseph Ammil Descalzota

Spray is a CSS module loader, loaded JSONP-style.

It also allows for:

  • Dynamically loading of CSS styles - call your styles from anywhere
  • Modular CSS - group your CSS styles by the dozen
  • Allow activation and deactivation of module styles - like putting a switch to your styles

##Usage Just include spray.js anywhere before using! For base styling, it's recommended you load it in the head, along with the Spray calls to prevent Flash Of Unstlyed Content (FUOC).

###Style syntax It uses the same CSS syntax but in JSON format. It's best to wrap the selectors, properties and values in quotes.

{
    "selector" : {
        "property" : "value",
        "property" : "value"
    }...
}

###Applying the style:

####JavaScript object Just wrap the JavaScript object containing your style in a spray() call like JSONP.

spray({
    'div.selected' : {
        'text-decoration' : 'underline',
        'color' : 'red'
    },
    'a' : {
        'text-decoration' : 'none'
    }
});

####NEW!: Use JSON Similarly, you can wrap a valid JSON string and Spray will readily parse it as well.

spray('{"div": {"background": "green"}}');

###Manipulating the CSS Module: Spray hosts a few methods to manipulate the style module.

  • .style() - Applies the styles of the module to the page. By default, a call to spray() will apply the style to the page instantly.
  • .unstyle() - Removes the styles of the module to the page

Here's sample code for usage:

var sprayModule = spray({
    'div.selected' : {
        'text-decoration' : 'underline',
        'color' : 'red'
    },
    'a' : {
        'text-decoration' : 'none'
    }
});

sprayModule.unstyle(); //deactivates styles declared in that module
sprayModule.style();   //activate the styles declared in that module

Other methods and properties include:

Standard Array methods:

  • .length
  • .splice()
  • .push()

Self-implemented methods mimicked from jQuery

  • .each(function(index,valueAtIndex)) - loops through each style in the Spray object and runs the callback provided.

##Why I Built Spray

  • Dynamic <link> have fuzzy cross-browser load or error support.

  • AJAX, except for CORS, aren't cross-domain. Even CORS itself isn't widely used, is an overhead (at least 2 HTTP requests), and needs server-side configuration.

  • Dynamic base styling. Most 3rd party libraries like jQuery's .css() applies styles inline. This means if another call to .css() overrides the style, the original style is lost.

  • Traditional "CSS in the head" is bulky. Some might not be used at all.

  • I'm tired building that "body class switcher" technique for easy theme switching.

  • Besides those stated above, I am working on a project which uses a very crappy website back-end. I managed to inject a bootstrap code into it and needed to load CSS in a modular fashion and make it editable on the fly.

##Current issues with Spray

  • It's still a work in progress, founded from a "Eureka moment while asleep".

  • Currently, it doesn't do validation. It's up to the user what he/she injects using Spray.

  • Bypassing the same-origin-policy has it's security issues. Basically, Spray is JSONP, and have the same risks.

##License

Released under the MIT license.

##Contact Me