<div class="flurid">
  <div class="row">
    <div class="column width_1/2">One Half</div>
    <div class="column width_1/2 last">One Half</div>
  </div>
</div> 

Unlike other grid systems, Flurid uses very intuitive naming conventions for its styling properties. First, you start by designating your grid by applying the class “flurid” to a block level element (such as a div). Inside of the grid, you may define rows using the class “row” and columns using the class “column” along with a fractional width class such as “width_1/16.” Flurid natively supports all widths between 1/1 and 1/16.

<div class="flurid">
  <div class="row">
    <div class="column width_1/4">1/4 (4/16)</div>
    <div class="column width_1/16">1/16</div>
    <div class="column width_1/2">1/2 (8/16)</div>
    <div class="column width_3/16 last">3/16</div>
  </div>
</div>

Columns may be mixed and matched as needed, so long as the sum of the columns reduces to 1/1 (or, in other words, adds up to 100%). I find it’s often easier to stick to one denominator, but if you are keen to reducing your fractions, you can rest assured that it will not break the system.

<div class="flurid">
  <div class="row">
    <div class="column width_1/2">
      <div class="column width_1/2">1/4</div>
    </div>
    <div class="column width_1/2 last">1/2</div>
  </div>
</div>

Columns may also be nested inside of themselves as needed, however, keep in mind that columns will inherit the full width of their parent, meaning that if you were to nest a 1/2 width column inside another 1/2 width column, the result would be a container that takes up 1/4 of the grid’s full width.

<div class="flurid">
  <div class="row">
    <div class="column width_1/2 pad before_1/2">1/2</div>
    <div class="column width_1/2 pad before_1/4 after_1/4 last">1/2</div>
  </div>
  <div class="row">
    <div class="pad after_1/2">
      <div class="column width_1/2 pad before_1/2">1/4</div>
    </div>
  </div>
</div>

The pad class is used to separate columns and should be used instead of empty column markup in your HTML. Use after to append padding to a column and before to prepend padding to a column.

<div class="flurid">
  <div class="row">
    <div class="shift right_1/2">
      <div class="column width_1/2">1/2 (push 1/2)</div>
    </div>
    <div class="shift left_1/2">
      <div class="column width_1/4">1/4 (pull 1/2)</div>
      <div class="column width_1/4">1/4 (pull 1/2)</div>
    </div>
  </div>
</div>

The shift class is used to change the position of a column relative to where it would normally appear in the flow of the document. This is handy for changing the location of a column visually without affecting where the column lies in relation to other markup in the HTML. Use right to push your columns to the right of their normal location and left to pull your columns to the left of their normal location.