Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Spray is a straight-forward, lightweight, modular CSS loader.
JavaScript
branch: master
Failed to load latest commit information.
samples Refined a few functions. Now using prototypes rather than individual …
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

Something went wrong with that request. Please try again.