Class syntax

Atomizer follow a strict syntax, which makes the classnames easier to interpret by humans.

Syntax

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

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

Atomizer 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.

Examples

Syntax Definitions

<context>

Optional.

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

<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.

<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.

<pseudo-element>

Optional.

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

• a for ::after
• b for ::before
• bd for ::backdrop
• c for ::cue
• fsb for ::file-selector-button
• fl for ::first-letter
• fli for ::first-line
• m for ::marker
• ph for ::placeholder
• s for ::selection

This example uses the content property to add open and closed quotes with the ::b and ::a pseudo-elements.

<p class="Cnt(oq)::b Cnt(cq)::a">Hello world!</p>

Hello world!

<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 immediate next sibling of an particular element.

Example:

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

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

The tilde sign (~)

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

Example:

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

This class hides the element if one of its previous siblings 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.

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

<value>

Optional for helper classes, required for Atomizer 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 following values are special exceptions as they are available almost globally:
  • inh = inherit
  • ini = initial
  • rv = revert
  • rvl = revert-layer
  • un = unset

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 padding — as well as the value of any other class using gutter.

CSS variables

CSS variables can be referenced as class values. Note that values are not managed by Atomizer, and must be defined independently.

Usage:

<div class="C(--primary-color)">Hello World</div>

External stylesheet:

:root {
    --primary-color: #400090
}

Output:

.C(--primary-color) {
    color: var(--primary-color);
}

<!> important

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.

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 Atomizer 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 _[↩].