Helper classes

Classes provided to help with common styling patterns.

Unlike Atomizer classes, helper classes apply multiple style declarations from a single class, but still are intended to provide a low-level, single-purpose unit of style.

Atomizer let's you define your own custom helper classes, please follow our Custom classes guide.

Bd* (Borders)

Styling elements with a border requires 3 properties [1] so to make styling via classes a bit less verbose, the following helpers combine border-style (set to solid) and border-width (set to 1px):

You can combine one of the classes above with a border-color of your choice (i.e. Bdc(#ff6347)) to get a border color different than the text color of the box.

Example with a initial border color (and border-width set to 1px):

<p class="Bd">Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.

Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.

Example with a custom color:

<p class="Bd Bdc(#ff6347) P(10px)">Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.</p>

Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.

The default width of these helpers is 1px as it is the most common use case. If you want to use a different width or style value, then you can either

You can find abbreviated versions of style keywords in rules.js.

BfcHack (Block-formatting context)

Most authors use overflow:hidden to create block-formatting contexts but such styling may come with side-effects.

For this reason, the helper class called BfcHack creates a block-formatting context that does not "shrinkwrap". This is an approach introduced by Nicole Sullivan and Nan Gao.

Note that this is a hack and may break if the content of the box is too large or if the box is next to floats.

Cf (Clearfix)

Use Cf for clearfix.

Ell (Ellipsis)

Use Ell to create a one-liner with ellipsis (in browsers that support text-overflow:ellipsis).

Example:

<p class="Ell W(300px)">Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.</p>

Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.

Hiding content from sighted users

Use the class Hidden if you want to hide content that should still be accessible to screen-readers:

Example:

Something is <b class="Hidden">missing</b> here.

Something is here.

IbBox

Boxes that are part of inline-block constructs must be styled with multiple styles. Rather than setting all of those yourself, you can simply use IbBox as a "shorthand" for:

display: inline-block;
vertical-align: top;
   <div class="IbBox">Box-1</div><!--
--><div class="IbBox">Box-2</div>

Example:

Box-1
Box-2

Remember to remove the white-space between nodes when creating inline-block constructs.

LineClamp()

Truncating multiple lines of text in a way that works across browsers is not an easy feat. Authors usually start with -webkit-line-clamp + flexbox and then go from there, addressing weird bugs along the way.

With the help of Atomizer, you can use the LineClamp() class to "pass" 2 parameters:

Example:

<p class="Fz(18px) Lh(1.5) LineClamp(2,54px)">Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.</p>

Lorem ipsum dolor sit amet, id oratio graeco nostrum sit, latine eligendi scribentur mea ex. Tota dolorem voluptua eos at. Ei nec reque viderer facilis. Aliquip necessitatibus ex pri, pertinax atomorum ei sea. Ea omittam appetere posidonium per, te meliore volutpat duo, dolorem ponderum interpretaris sea ut.

The value of `max-height` is the result of: <number of lines> times <font-size> times <line-height>.

Row

Use the class Row to style a box that expands to fill its container, contains floats, and more .

Example:

<div class="Row">
    <div class="Fl(start)">Box-1</div>
    <div class="Fl(end)">Box-2</div>
</div>
Box-1
Box-2

The background of the wrapper is visible, which proves the box contains floats.

StretchedBox

Use the class StretchedBox to stretch a box inside its 'containing block'. This class is mapped to the following declarations:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

This is handy to create boxes with a intrinsic aspect ratio. For example:

<div class="Pos(r) H(0) Pt(10%)">
    <div class="StretchedBox">I am a box with an intrinsic aspect ratio</div>
</div>
I am a box with an intrinsic aspect ratio

  1. Unless one wants the initial value of border-width and border-color. [↩]