CSSugar

Make things easier to read and express in CSS.

A JavaScript CSS applicator designed to work with a JavaScript selector engine of choice following CSS JSON notation.

At a Glance

CSSugar(
  {
    //match every even tr element
    "tr:even" : {
      "background": "pink"
    },
    //match every input element of type text
    ":text" : {
      "fontFamily": "Verdana",
      "fontSize": "11px",
      "color": "green"
    },
    //match the second div in the body 
    "body div:gt(1)" : {
      "background": "orange"
    }
  },
  //lets use the jQuery selector engine
  $
);
//now feel the power, even in IE6!

Download

Anyone can view or clone the source code repository at github.

Latest From Trunk

• ZIP
• TAR

Examples

• Simple

Discussion

http://groups.google.com/group/cssugar

References

• JSON (JavaScript Object Notation)
• CSS JSON
• Speed/Validity Selector Test For Frameworks

JavaScript Selector Engines

• Sizzle - JavaScript Selector Library

Alternative CSS Serializers

• Sass - Syntactically Awesome Stylesheets
• LESS - Leaner CSS