Class syntax

Edit on Github

Atomic and Helper classes follow a strict syntax, which makes the classnames easier to interpret by humans and easier to parse by tools such as Atomizer.

The syntax

[<context>[:<pseudo-class>]<combinator>]<Style>[(<value>,<value>?,...)][<!>][:<pseudo-class>][::<pseudo-element>][--<breakpoint_identifier>]

At its core, an Atomic or Helper class is represented by a <Style>.

Atomic classes typically require one <value>, enclosed in parentheses, though some classes may accept more (eg, the helper class LineClamp() accepts two.) Helper classes may not require a <value>, in which case the parentheses may be omitted.

Optionally, you may prefix the style with a <context> class and <combinator>. The context class may optionally include a <pseudo-class>.

You may also optionally suffix the style with <!> (for !important), a <pseudo-class>, a <pseudo-element>, and a <breakpoint_identifier>.

RTL/LTR

Any occurrence of left and right keywords or their abbreviated form ala Emmet (i.e., l and r) in <Style> or <value> must be replaced with the keywords start and end. Atomizer will automatically translate the CSS output for left-to-right (LTR) or right-to-left (RTL) depending on options passed during execution.

For example, Mend(2px) maps to margin-right: 2px in a LTR context and margin-left: 2px in an RTL context, and Pstart(1em) would map to padding-left: 1em in a LTR context, etc.

Syntax Definitions

<context>

Optional.

A class applied to an ancestor or sibling of the node (see examples).

<pseudo-class>

Optional.

A suffix mapped to a pseudo-class, for example:

  • a for :active
  • c for :checked
  • f for :focus
  • h for :hover
  • etc.

You can find the complete list of pseudo-classes and their abbreviations in Atomizer's grammar library.

Pseudo-classes may be applied to any regular class or <context> class. For example:

Regular class

<div class="foo">
    <div class="D(n):h"></div>
</div>

The above creates the following rule:

.D\(n\)\:h:hover {
  display: none;
}

This causes the display:none style to be applied to the current element when hovered over.

Context class

<div class="foo">
    <div class="foo:h_D(n)"></div>
</div>

The above creates the following rule:

.foo:hover .foo\:h_D\(n\) {
  display: none;
}

This class hides the current element whenever its ancestor (.foo) is hovered over.

Internet Explorer 7 and below do not accept the use of colons in classnames, and therefore it's not possible to use the pseudo-class syntax with these browsers.

<pseudo-element>

Optional.

A suffix mapped to a pseudo-element. The following pseudo-elements are supported:

  • b for ::before
  • a for ::after
  • fl for ::first-letter
  • fli for ::first-line
  • ph for ::placeholder

Internet Explorer 7 and below do not accept the use of colons in classnames, and therefore it's not possible to use the pseudo-element syntax with these browsers.

<combinator>

Required if <context> is provided. One of the following may be used:

The underscore character (_)

Use this to create a contextual style based on the descendant combinator.

<div class="foo">
    <div class="foo_D(n)"></div>
</div>

This class hides the element whenever one of its ancestor has the class foo attached to it.

The right angle bracket character (>)

Use this to create a contextual style based on the child combinator.

Example:

<div class="foo">
    <div class="foo>D(n)"></div>
</div>

This class hides the element if its parent has the class foo attached to it.

The plus sign (+)

Use the adjacent sibling combinator to style only if the sibling of an particular element.

Example:

<div class="foo"></div>
<div class="foo+D(n)"></div>

This class hides the element if its previous sibling has the class foo attached to it.

<Style>

Required.

CSS property or helper class. Capitalized with no separator between words such as dashes or new capitals.

Atomic classes generally follow the Emmet syntax for their naming convention.

<value>

Optional for helper classes, required for Atomic classes.

Examples:

.Ta\(c\) {
    text-align: center;
}
.M\(20px\) {
    margin: 20px;
}

There are three value types: Defined, Literal and Variable

Defined values

This is the abbreviation of a defined value. Defined values are valid keywords for any given property. (For example, inherit (inh), auto (a), etc.) Defined values attempt to follow Emmet syntax as closely as possible.

Defined values are enumerated in Atomizer's ruleset, so there is no need to define such values in Atomizer configuration before using such values.

Defined values that are not present in Emmet are named according to the rules below:

  • Value should be abbreviated with the first letter of the value.
  • If two values share the same initial letter, then the next value in alphabetical order is abbreviated in contracted form.
  • If one value is composed by two or more words (e.g. inline-block) then the first letter of each word should be used with no separator between them (e.g. inline-block becomes ib, space-between becomes sb).
  • The inherit value will always use the keyword inh as a special exception because it is available almost globally.

Literal values

Literals are strings whose values are not defined in configuration, but rather can be machine-interpreted. 1em, 5px, 20%, 1/2, and #fff are examples of literals.

Units in literal values

Use any unit you want (e.g., W(50%), M(20px), Fz(1em)).

Valid CSS number values must always be followed by its unit if applicable (e.g. 100% and 100px). These numbers can also be represented as keywords such as top and bottom if it makes sense in the context of the property.

Unit-less values

Use unit-less values to set styles like line-height (e.g., Lh(1.5)), font-weight (e.g., Fw(500)), etc.

Negative values

Use the minus sign (-) to set negative values (e.g., M(-20px))

Hexadecimal colors

Use 3 or 6 character hexadecimal colors with a # prefix as a value identifier (e.g., C(#fff)).

hex values for colors must be written in lowercase (i.e. #ccc, not #CCC).

Hexadecimal colors with alpha

Use hexadecimal colors as value identifier followed by an opacity suffix (e.g., C(#fff.5)).

Fractions

Use any fraction you want (e.g., W(1/2)) and Atomizer will create the proper CSS declaration for you (e.g., width: 50%)

Multiple values

Pass multiple values separated by commas (,) when supported (e.g., Bgp(20px,50px)).

Remember, this is a CSS class, not a programming language, so you can't leave a space before or after commas!

Variable values

A "variable" is mapped to a global value set in the config object. It is different than a custom class as it is not bound to a property, for example:

'custom': {
    'gutter': '20px'
}

Usage:

<div class="M(gutter) P(gutter)"></div>

Changing the value of gutter in the config object would change the value of both the margin and paddingas well as the value of any other class using gutter.

<!>

Optional.

The ! character adds !important to the style.

Example:

.D\(b\) {
    display: block;
}
.D\(b\)\! {
    display: block !important;
}

<breakpoint_identifier>

Optional.

A suffix that adds the breakpoint context to the rule. A breakpoint indicates that this rule will only take effect within the scope of a media query. The name and length values of each breakpoint are defined in the config object.

Example:

breakPoints: {
    'sm': '@media(min-width:500px)', // breakpoint 1
    'md': '@media(min-width:900px)', // breakpoint 2
    'lg': '@media(min-width:1200px)' // breakpoint 3
},

Usage:

<div class="W(50%)--sm W(33%)--md W(25%)--lg">...</div>

The width of the box is auto below 500px, then 50% between 500px and 899px, then 33% between 900px and 1199px, then 25% above 1199px.

Examples:

HTML classes What they do
D(n) This is mapped to display: none
D(n)! This is mapped to display: none !important
Fz(1em) This is mapped to font-size: 1em
Fz(18px) This is mapped to font-size: 18px
Td(u):h This underlines text on mouseover
Td(u):h:f This underlines text on mouseover and on focus
Bxs(n) This is mapped to box-shadow: none
Bxs(foo)--lg This applies a custom box-shadow inside the "lg" breakpoint [1]
Bxs(foo):h--lg Same styling as above but on mouseover only [1]
C(#000) This sets the color to black
C(#000.5) This sets the color to black with a 50% opacity
M(bar) This applies a "global" value to margin [2]
Mend(0) This is mapped to margin-right: 0 in a LTR context [3]
Ta(start) This is mapped to text-align:left in a LTR context [3]
Cl(start) This is mapped to clear:left in a LTR context [3]
Bdstartw(0) This is mapped to border-left-width:0 in a LTR context [3]
Rotate(-90deg) This is an alias mapped to transform: rotate(-90deg) [4]
LineClamp(2,50px) This is a helper which truncates text after 2 lines [5].
list_D(ib) This element is styled with display:inline-block when it is a descendant of a node to which the classlist is applied [6].
list>D(ib) This element is styled with display:inline-block when it is a direct child of a node to which the class list is applied to [6].
box:h_D(n) This element is hidden when users hover over its ancestor with the class .box [6].
The reference page lets you quickly search for properties, values, or class names.

  1. Bxs(foo) uses a custom variable foo set in the config object [↩].
  2. bar is mapped to a custom value that can be used with any relevant styling (i.e. P(bar) for padding, H(bar) forheight, etc.) [↩].
  3. start is mapped to either "left" or "right" depending on the config file [↩].
  4. this class is an alias [↩].
  5. this class is a helper [↩].
  6. Unlike all other Atomic classes, those containing descendant selectors are not sandboxed via the namespace (if you have chosen to set one in the config). Instead, Atomizer adds !important to these styles [↩].