Atomizer classes
Understand Atomizer classes and the available aliases.
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.
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.
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) |
- Aliases use the function name whenever it is bound to a
property
; for exampleRotate()
fortransform
orBlur()
forfilter
. However, there are not yet aliases forcalc()
,rgba()
, etc. [↩] - Use the Atomizer config object to set custom values for
Matrix()
andMatrix3d()
. [↩]