The css plugins deal with the className and style properties. Here's an overview of the methods.

this.css.add('myclass'); // add classname(s)
this.css.remove('myclass'); // remove classname(s)
this.css.toggle('myclass'); // toggle classname(s)
this.css.shift(true, 'myclass'); // conditional class
this.css.contains('myclass'); // has classname?
this.css.set('color', 'red') // set single style
this.css.get('color') // get single style
this.css.style({color: 'red'}) // set multiple styles
this.css.compute('color') // get computed style
this.css.name() // get or set the classname
this.css.matches('[color]') // matches selector?

Class names

We can add a classname to the spirit.

	onenter: function() {

We can also remove it again.


We can add or remove multiple class names with an array or space-separated string.

this.css.add([CLASS1, CLASS2, CLASS3]);
this.css.remove('class1 class2 class3');

We can toggle the class name on and off, depending on whether or not it's there already.


The class can also be setup to depend on a boolean.

this.css.shift(window === top, 'myclass');

Finally, we can test if the class name is present.

this.css.contains('myclass'); // true

Style properties

We can set a single style property on the spirit element.

this.css.set('white-space', 'nowrap');

We can set multiple style properties with a map. Note that this uses a different method call.

	'white-space': 'nowrap',
	'text-align': 'left',
	'-beta-hyphens': 'auto'

The -beta syntax is short for a vendor prefix. It resolves to -webkit, -moz, -ms or maybe an empty string depending on the browser that runs the code. You can also use an alternative syntax, but note that the -beta syntax is not yet supported here.

	whiteSpace: 'nowrap',
	textAlign: 'left',
	'-beta-hyphens': 'auto'

You can get a style property provided that you set it first.

console.log(this.css.get('white-space')); //'nowrap'

If you didn't explicitely set the property, but instead keep it defined in a stylesheet, you can still get the computed property.

console.log(this.css.compute('white-space')); //'nowrap'

Note that this may lead to unexpected results of the element is display:none or not positioned in the document.


The css plugin comes with a set of shorthands for common style properties. For properties that require a unit, px is automatically assumed.

this.css.display = "block";
this.css.width = "50%";
this.css.paddingTop = 100;
this.css.opacity = 0.5;
this.css.left = 250;

CSS shorthands must be wrapped in a string. For now, all units must be also included. In other words, they don't really have a shorthand.

this.css.margin = "10px 20px";

Here's the list of properties we have covered with shorthands so far.

  • zIndex
  • position
  • display
  • visibility
  • fontWeight
  • top
  • right
  • bottom
  • left
  • width
  • height
  • maxWidth
  • maxHeight
  • minWidth
  • minHeight
  • textIndent
  • margin
  • padding
  • marginTop
  • marginRight
  • marginBottom
  • marginLeft
  • paddingTop
  • paddingRight
  • paddingBottom
  • paddingLeft
  • opacity

Support shorthand getters.