Grid system

Edit on Github

ACSS 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 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 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 #

  • 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 relies on start and end instead of left and right which allows the usage of the same classes regardless of script context [↩].