Atomizer classes
Edit on GithubACSS 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 ACSS syntax comes from Emmet, a plugin for many popular text editors which greatly improves HTML & CSS workflow.
Simple ACSS 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 ACSS 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 ACSS classes and their value parameters, see the Class Syntax guide.
Aliases #
ACSS 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) |
'custom': {
'Fil(myCustomFilter)': 'contrast(150%) brightness(10%)'
}