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 let's 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 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%)', } 

  1. 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. [↩]
  2. Use the Atomizer config object to set custom values for Matrix() and Matrix3d(). [↩]