The Skeleton Framework grid system is going to be very familiar to anyone having used one before.

The whole grid system is oriented around the notion of mobile first design, and it pays dividends to think of your layout code as such.

At small screen sizes, the grid system organizes your content in a single column, stacked straight down. As the viewport grows past each break point, your column managed content will begin to break out of the single column layout and float left.

This means that after the layout grows, your columns will render from left to right based on their place in your source code. The first column in a row will render left most, second column to the right of that, next column to the right of that, etc. Rows reset this action, clearing their columns and setting you up for your next row or whatever else.

Rows and columns work fine by themselves, but are unconstrained by width and will happily take up the entire viewport. To limit their width and center them, use a container.

Containers are configured with a max-width of 1200px by default, though you can change this. See Roll Your Own.

    <div class="container">
        <div class="row">
        
            <div class="six columns">
            </div>
            <div class="three columns">
            </div>
            <div class="three columns">
            </div>
            
        </div>
    </div>

Use rows to section up groups of columns that should break and reorder with respect to one another.

Use columns to chop your content up into just that. Elements with the column or columns class applied are sized by the addition of a count. So one column , two columns, three columns, etc.

The grid, by default, is built on a system of twelve columns, so calculate your proportions accordingly.

    <!-- This content is laid out in three groups of columns, 1/3 of the grid each -->
    <div class="row">
        <div class="four columns">
        </div>
        <div class="four columns">
        </div>
        <div class="four columns">
        </div>
    </div>
    <!-- This content is laid out in two groups of columns, 1/2 the grid each -->
    <div class="row">
        <div class="six columns">
        </div>
        <div class="six columns">
        </div>
    </div>

Rows and column groups nest, so you can further chop up your layout. Keep using rows to group your nested columns. Columns float, and rows clear them. In other words, rows will keep your layout from looking crazy.

    <div class="row">
        <!-- 1/2 of the grid -->
        <div class="six columns">
            <div class="row">
                <!-- 1/3 of the parent column set -->
                <div class="four columns">
                    <p> This content will take up 1/6 of the grid </p>
                </div>
            </div>
        </div>
    </div>

It's nice to be able to create column managed content but to center it in the layout sometimes, or to be able to account for a sidebar or something.

To that end, the grid offers offset classes for the column sets.

Create a piece of content eight columns wide and pushed off the left edge of the containing element by two columns:

    <div class="row">
        <div class="eight columns offset-by-two">
            <h1> This is effectively centered in the layout (not text align),
            but will still break to a full width single column for small
            screens </h1>
        </div>
    </div>

Maybe you want a half-width column stuck to the right half of the layout:

    <div class="row">
        <div class="six columns offset-by-six">
        </div>
    </div>

Coming soon!