Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
125 lines (101 sloc) 14.3 KB
section layout title
docs
docs
Grid system

Atomic CSS 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 construct

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 old-IE support plus 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.

3 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 #2 and #3).
  3. IE7 doesn't support display:inline-block but Atomizer takes care of this behind the scenes [1].

float construct

This styling has great browser support and Atomizer makes it "direction" agnostic [2]. 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 construct

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 construct

Browser support for flexbox is not that great but nonetheless you can use Atomic to leverage its awesomeness.

  • D(f) for display:flex
  • Jc(sb) for justify-content:space-between

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 provides a patch for oldIE [↩].
  2. Atomizer relies on start and end instead of left and right which allows the usage of the same classes regardless of script context [↩].