Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
162 lines (155 sloc) 10.7 KB
section layout title
docs
docs
Atomic classes

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

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