Atomizer classes

Understand Atomizer classes and the available aliases.

On this page

Atomizer classes are simple, single-purpose units of styling. Much like inline styles, these styles only apply a single style declaration. Unlike inline styles, Atomizer classes have a lower specificity, making them easier to override, and can be modified using pseudo-classes, media queries, and more.

Atomizer lets you define your own custom classes; please follow our Custom classes guide.

Overview

The inspiration for Atomizer syntax comes from Emmet, a plugin for many popular text editors which improves HTML & CSS workflow.

Simple Atomizer classes are easily interpreted since they take a simple value as a parameter. For example, W(**20px**) clearly maps to width: 20px, and Lh(**1.5**) clearly maps to line-height: 1.5.

Complex Atomizer classes use custom identifiers known as "variables", which allow values to be defined in a central location (i.e., the Atomizer configuration file) and reused across styles. For example, if the variable foo is set to 20px, then P(foo) and M(foo) would map to padding: 20px and margin: 20px, respectively.

For more on the syntax of Atomizer classes and their value parameters, see the Class Syntax guide.

The searchable reference page gives you a complete listing of Atomizer classes and their supported values.

Aliases

Atomizer provides aliases for most properties ^[1] that rely on Functional Notation:

Aliases for values based on functional notation
Aliases	Styles
`Blur(2px)`	`filter:blur(2px)`
`Brightness(.5)`	`filter:brightness(.5)`
`Contrast(200%)`	`filter:contrast(200%)`
`Dropshadow(10px,10px,20px,teal)`	`filter:drop-shadow(16px,16px,20px,teal)`
`Grayscale(50%)`	`filter:grayscale(50%)`
`Grayscale(2px)`	`filter:grayscale(2px)`
`HueRotate(90deg)`	`filter:hue-rotate(90deg)`
`Invert(50%)`	`filter:invert(50%)`
`Opacity(20%)`	`filter:opacity(20%)`
`Saturate(20%)`	`filter:saturate(20%)`
`Sepia(50%)`	`filter:sepia(50%)`
`Matrix(<custom value>)` ^[2]	`transform:matrix(1.2,.3,.4,1.5,40,10)`
`Matrix3d(<custom value>)` ^[2]	`transform:matrix(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)`
`Rotate(90deg)`	`transform:rotate(90deg)`
`Rotate3d(10,20,30,40deg)`	`transform:rotate3d(10,20,30,40deg)`
`RotateX(20deg)`	`transform:rotateX(20deg)`
`RotateY(20deg)`	`transform:rotateY(20deg)`
`RotateZ(20deg)`	`transform:rotateZ(20deg)`
`Scale(-1)`	`transform:scale(-1)`
`Scale3d(4,2,.5)`	`transform:scale3d(4,2,.5)`
`ScaleX(2)`	`transform:scaleX(2)`
`ScaleY(2)`	`transform:scaleY(2)`
`Skew(20deg,20deg)`	`transform:skew(20deg,20deg)`
`SkewX(20deg)`	`transform:skewX(20deg)`
`SkewY(-20deg)`	`transform:skewY(-20deg)`
`Translate(50%,50%)`	`transform:translate(50%,50%)`
`Translate3d(10px,20px,30px)`	`transform:translate3d(10px,20px,30px)`
`TranslateX(10px)`	`transform:translateX(10px)`
`TranslateY(10px)`	`transform:translateY(10px)`
`TranslateZ(5px)`	`transform:translateZ(5px)`

It is possible to apply multiple filters at once by creating a custom value or class in Atomizer's configuration. For example:

 custom: { 'Fil(myCustomFilter)': 'contrast(150%) brightness(10%)', }

Aliases use the function name whenever it is bound to a property; for example Rotate() for transform or Blur() for filter. However, there are not yet aliases for calc(), rgba(), etc. _[↩]
Use the Atomizer config object to set custom values for Matrix() and Matrix3d(). _[↩]