MS Grid

MS Grid is a fluid CSS, configurable via SASS, and sweet. It's my own attempt to reverse engineer the Boostrap grid. Why? One, to learn how it all works, and two, I no longer need Boostrap for most builds.

View the demo »

Jump To

1. The Markup
2. Settings
3. Helper Classes
4. Advanced Uses

The Markup

// Standard grid layout

<div class="container">
    <div class="row">
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
    </div>
</div>

// Full width container

<div class="container-full">
    <div class="row">
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
        <div class="col_4">
            Content goes here...
        </div>
    </div>
</div>

Settings

MS Grid is configurable using SASS variables. Just change values and recompile the SASS to CSS.

// Grid widths, columns, spacing

$max_width:             1000px; // width of the container
$container_padding:     15px;   // padding outside of the container
$gutter:                15px;   // space between the columns
$columns:               12;     // number of columns

// Media query settings

$breakpoint_small:      560px;  // smallest breakpoint
$breakpoint_medium:     780px;  // medium breakpoint

// Namespace

$namespace: "";         // namespace value to prepend all classes

Helper Classes

.col_hide

Hide for the desktop grid above $breakpoint_medium

<dt><code>.col_m_hide</code></dt>
<dd>Hide for the medium grid between <code>$breakpoint_small</code> and <code>$breakpoint_medium</code></dd>

<dt><code>.col_s_hide</code></dt>
<dd>Hide for the small grid below <code>$breakpoint_small</code></dd>

<dt><code>.col_pad</code></dt>
<dd>Adds the same padding to an element as used by the columns. Convenient for aligning headers without having to include them in a <code>.row</code> and <code>.col_12</code> markup</dd>

Advanced Uses

Namespacing

To avoid collisions and conflicts with other libraries, you can prepend a namespace to the entire grid. Use the $namespace SASS variable in sass/grid.scss. For example:

// SASS variable
$namespace: "foo_";

// Outputs:
.foo_col_9