Inspired from : http://flexboxgrid.com/.

TL;DR

Each page should use the n-container-fluid class name.
This container should consist of sections of content using the n-row class name.
Each row should then consist of a maximum of 12 columns. 

<div class='n-container-fluid'>
    <div class='n-row'>
      <div class='n-col-xs-10'>wide-column</div>
      <div class='n-col-xs-2'>thin-column</div>
    </div>
  </div>

Grid Intro

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

<div class="n-row">
    <div class="n-col-xs-12
                n-col-sm-8
                n-col-md-6
                n-col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="n-row">
    <div class="n-col-xs">
        <div class="box">auto</div>
    </div>
</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="n-row">
    <div class="n-col-xs">
        <div class="box">
            <div class="n-row">
                <div class="n-col-xs">
                    <div class="box">auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-

<div class="n-row start-xs">
    <div class="n-col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.n-center-

<div class="n-row n-center-xs">
    <div class="n-col-xs-6">
        <div class="box">
            start
        </div>
    </div>
</div>

.n-end-

<div class="n-row n-end-xs">
    <div class="n-col-xs-6">
        <div class="box">
            end
        </div>
    </div>
</div>

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

Example 
<div class="n-row n-center-xs n-end-sm start-lg">
    <div class="n-col-xs-6">
        <div class="box">
            All together now
        </div>
    </div>
</div>

.n-top-

<div class="n-row n-top-xs">
    <div class="n-col-xs-6">
        <div class="box">
            top
        </div>
    </div>
</div>

.n-middle-

<div class="n-row n-middle-xs">
    <div class="n-col-xs-6">
        <div class="box">
            center
        </div>
    </div>
</div>

.n-bottom-

<div class="n-row n-bottom-xs">
    <div class="n-col-xs-6">
        <div class="box">
            bottom
        </div>
    </div>
</div>

Distribution

Add classes to distribute the contents of a row or column.

.around-

<div class="n-row around-xs">
    <div class="n-col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            around
        </div>
    </div>
</div>

.n-between-

<div class="n-row n-between-xs">
    <div class="n-col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            between
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            between
        </div>
    </div>
</div>

Reordering

Add classes to reorder columns.

.n-first-

1
2
3
4
5
6
<div class="n-row">
    <div class="n-col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="n-col-xs-2 n-first-xs">
        <div class="box">
            3
        </div>
    </div>
</div>

.n-last-

1
2
3
4
5
6
<div class="n-row">
    <div class="n-col-xs-2 n-last-xs">
        <div class="box">
            1
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

Reversing

.n-reverse

1
2
3
4
5
6
<div class="n-row n-reverse">
    <div class="n-col-xs-2">
        <div class="box">
            1
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            2
        </div>
    </div>
    <div class="n-col-xs-2">
        <div class="box">
            3
        </div>
    </div>
</div>

Offsets

Offset a column

<div class="n-row">
    <div class="n-col-xs-offset-3 n-col-xs-9">
        <div class="box">offset</div>
    </div>
</div>