Grid

• src
• layout
• grid.scss

---

Class list

Description

Sandbox uses a float based 12 unit grid system. The .grid class can be applied to any block level element. A .grid should have block level elements with either the .unit- related classes or a .new-line as immediate children

Since the default $GRID_SYSTEM global variable is set to 12, the values from 1 through 12 can be plugged in where (size) is seen above. Similarly the breakpoint suffixes sm, md, lg can be plugged in where (breakpoint) is seen above

Structure

<div class="grid">
    <div class="unit-12"> your content... </div>
    <div class="unit-6"> your content... </div>
    <div class="unit-6"> your content... </div>
    <div class="unit-4"> your content... </div>
    <!-- and so on... -->
</div>

Since Sandbox's grid system is float based, any units whose width exceeds the width remaining for that line, will wrap onto the next line (typically). This means that you can put as many units as you want inside of a single grid.

The grid class

The .grid class uses a negative margin on all sides so that the units used within it align with whatever content neighbors the .grid itself. For this reason the .grid should be used inside of an element that has sufficient padding.

Grid tight

Using .grid.tight halves the margin value used by the .grid and also halves the padding of any units used inside of it.

The .tight-(breakpoint) class means that the grid will only be tight during that breakpoint. Using .no-tight-(breakpoint) on a .grid.tight will cancel out the .tight during the specified breakpoint.

Grid units

Any element whose class list contains unit- will be floated left and have padding set on all sides equal to the margin value that the grid negates. There's no requirement that a unit be used within a grid, so if you wanted to use a unit elsewhere, you could.

Responsive

Use .unit-(size)-(breakpoint) to specify what size a unit should be during the specified breakpoint. Change the width of your browser to see the responsiveness in action.

<div class="grid">
    <div class="unit-12-sm unit-6-md unit-3-lg">
        <!-- content -->
    </div>
    <div class="unit-12-sm unit-6-md unit-3-lg">
        <!-- content -->
    </div>
    <div class="unit-12-sm unit-6-md unit-3-lg">
        <!-- content -->
    </div>
    <div class="unit-12-sm unit-6-md unit-3-lg">
        <!-- content -->
    </div>
</div>

Default unit

Using a .unit-(size) means that it's not bound to a breakpoint. The breakpoint specific unit classes are more specific, so they will have priority over any unit that is not bound to a breakpoint. Change the width of your browser to see the example in action.

<div class="grid">
    <div class="unit-12 unit-6-md">
        <!-- content -->
    </div>
</div>

Push

Using the .push-(size) classes sets the margin left of the element to a percentage equal to that size out of the $GRID_SYSTEM value. For example using .push-3 out of a 12 unit grid system would set a margin-left of 25%.

<div class="grid">
    <div class="unit-12">
        <!-- content -->
    </div>
    <div class="unit-6 push-3">
        <!-- content -->
    </div>
</div>

Push responsive

Using .push-(size)-(breakpoint) means that the element will be pushed by the size amount during the specified breakpoint.

<div class="grid">
    <div class="unit-12">
        <!-- content -->
    </div>
    <div class="unit-3 push-3-sm push-6-md push-9-lg">
        <!-- content -->
    </div>
</div>

New line

A downside to floating elements is that they will try to fit onto the same line if there's enough width for them to do so. For example, say we want the last .unit-6 to start on it's own line, but due to the height of the units before it, it finds that it can still fit on the same line.

<div class="grid">
    <div class="unit-6">
        <!-- taller content -->
    </div>
    <div class="unit-6">
        <!-- content -->
    </div>
    <div class="unit-6">
        <!-- content -->
    </div>
</div>

We can work around this problem by using a .new-line. The new line forces any floated elements beneath it to start on a new line.

<div class="grid">
    <div class="unit-6">
        <!-- taller content -->
    </div>
    <div class="unit-6">
        <!-- content -->
    </div>
    <div class="new-line"></div>
    <div class="unit-6">
        <!-- content -->
    </div>
</div>

Nesting

If you want to nest grids inside one another, to pattern to do so is:

<div class="grid">
    <div class="unit-6"><!-- choose whatever size you want -->
        <div class="grid">
            <div class="unit-12"><!-- choose whatever size you want -->
                <!-- etc... -->
            </div>
        </div>
    </div>
</div>

Clearfix

The .grid class already has clearfix code applied, but if you wanted to clearfix some other element, use the .clearfix class.