css

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.

gui.Spirit.extend({
	onenter: function() {
		this.super.onenter();
		this.css.add('myclass');
	}
});

We can also remove it again.

this.css.remove('myclass');

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.

this.css.toggle('myclass');

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.

this.css.style({
	'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.

this.css.style({
	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.

Shorthands

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.

Support shorthand getters.