Atomic classes

Edit on Github

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

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

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

Complex Atomic classes make use of 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 Atomic classes and their value parameters, see the Class Syntax guide.

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

Aliases

Atomic CSS 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(). [↩].