Grid system

Learn different methods to layout your website.

On this page

Atomizer does not come with an out-of-the-box grid system. Instead, you use any property you want to build grids the way you want.

Widths

You can choose from creating a unit-base system using fractions (i.e. 1/12), using percentages (i.e. 20%), or using any arbitrary measurement value (i.e. 15em). In other words, the way you apply widths onto boxes is entirely up to you.

All classes related to width start with W — for example: W(15em).

Layouts

There are many ways to display boxes next to each other, it's up to you to decide which method fits your needs best.

inline-block

This styling has great browser support [1] and it is direction-friendly (boxes are displayed according to ltr / rtl contexts).

When creating inline-block constructs, you should use the helper class (IbBox) instead of D(ib) because the former gives you vertical-alignment (top) for free.

Example

<div>
   <div class="IbBox W(1/3) P(20px) Bgc(#0280ae.5)">Box 1</div><!--
--><div class="IbBox W(1/3) P(20px) Bgc(#0280ae.8)">Box 2</div><!--
--><div class="IbBox W(1/3) P(20px) Bgc(#0280ae)">Box 3</div>
</div>
<hr />
<div dir="rtl">
   <div class="IbBox W(1/3) P(20px) Bgc(#0280ae.5)">Box 1</div><!--
--><div class="IbBox W(1/3) P(20px) Bgc(#0280ae.8)">Box 2</div><!--
--><div class="IbBox W(1/3) P(20px) Bgc(#0280ae)">Box 3</div>
</div>

Result

See the Pen emMPaw by Thierry (@thierry) on CodePen.

Some things to be aware of when creating inline-block constructs:

  1. white-space between nodes in the markup creates space between boxes, so make sure to address this by either removing that space altogether, using html comments (<!-- -->), or implementing some other trick like the one used by PureCSS.
  2. vertical-align:top is needed to make sure all boxes are top aligned (IbBox takes care of this).

float

This styling has great browser support and Atomizer makes it "direction" agnostic. Simply use the Fl() class (e.g., Fl(start) or Fl(end)).

Example

<div class="Cf">
   <div class="Fl(start) W(50%) P(20px) Bgc(#0280ae.5)">Box 1</div>
   <div class="Fl(start) W(50%) P(20px) Bgc(#0280ae)">Box 2</div>
</div>

In this example, the class Cf (for "clearfix") is used to contain the floats, but there is also a Row helper class to better deal with floats across browsers.

Result

See the Pen PwewjM by Thierry (@thierry) on CodePen.

The exact same markup with the rtl version of the style sheet:

See the Pen OPZPjL by Thierry (@thierry) on CodePen.

Atomizer can also auto-generate `background-color` and `color`.

table and table-cell

This styling has good browser support (IE8+) and is direction-friendly (boxes are displayed according to ltr / rtl contexts).

In this example, the display classes D(tb) and D(tbc) are used, along with vertical-align and text-align classes (Va(m) and Ta(c)):

Example

<div class="D(tb) W(100%) Ta(c)" role="presentation">
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae.5)">Box <br />Number <br />1</div>
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae.6)">Box Number 2</div>
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae.8)">Box Number 3</div>
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae)">BoxNumber 4</div>
</div>
<hr />
<div class="D(tb) W(100%) Va(m) Ta(c)" dir="rtl" role="presentation">
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae.5)">Box <br />Number <br />1</div>
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae.6)">Box Number 2</div>
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae.8)">Box Number 3</div>
    <div class="D(tbc) Va(m) P(20px) Bgc(#0280ae)">BoxNumber 4</div>
</div>

Result

See the Pen GgdgMa by Thierry (@thierry) on CodePen.

Tip: one can also use table-header-group and/or table-footer-group to swap boxes vertically without removing them from the flow:

<div class="D(tb) W(100%) Ta(c)" role="presentation">
    <div class="D(tbfg) Fz(20px) Bgc(#0280ae.5)">Box Number 1</div>
    <div class="D(tbc) Fz(20px) Bgc(#0280ae.8)">Box Number 2</div>
    <div class="D(tbhg) Fz(20px)">Box Number 3</div>
</div>

Result

See the Pen MYGYQm by Thierry (@thierry) on CodePen.

flexbox

Example

<div class="D(f) Jc(sb)">
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c) Bgc(#0280ae.5)">Box 1</div>
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c) Bgc(#0280ae.5)">Box 2</div>
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c) Bgc(#0280ae.5)">Box 3</div>
    <div class="W(100px) H(100px) Lh(100px) Fz(30px) Ta(c) Bgc(#0280ae.5)">Box 3</div>
</div>

Result

See the Pen Jovoem by Thierry (@thierry) on CodePen.

  1. Atomizer relies on start and end instead of left and right which allows the usage of the same classes regardless of script context. [↩]