Skeleton Grid Patterns

Skeleton Grid System

http://www.getskeleton.com/#grid

• Like Foundation and Bootstrap (and most Grid Systems) uses a float technique to achieve layout mechanisms.
• Based on a 960 Static Pixel Grid System with Responsive layout mechanisms. Unlike Foundation and Boostrap does not have a true fluid options (using %)

-- Above limitation is Key to Skeleton's naming convention difference.

I. Basic Structures & Nesting

Basic Structure and Nesting follow the same logic and principals, however, since the grid is static and not fluid, the Grid provides exact px calculations and thus children "columns" are true conceptual "columns", rather than divisors/segments of a unit (such as 12).

In Skeleton, when nesting happens, since the columns are hard-coded with an exact pixel amount -- there is no parent context in which children % values must be divisors from. Unlike Foundation or Bootstrap -- the Skeleton nesting children always "add up" to the parent column numeral, rather than the total segment number. The below code examples illustrate:

Skeleton Nesting:

<!-- Sweet nested columns cleared with a clearfix class -->
<div class="six columns clearfix">
<!-- In nested columns give the first column a class of alpha
and the second a class of omega -->
    <div class="three columns alpha">...</div>
    <div class="three columns omega">...</div>
</div>

vs. Bootstrap (and Foundation) Nesting:

<div class="row-fluid">
    <div class="span12">
    Level 1 of column
        <div class="row-fluid">
            <div class="span6">Level 2</div>
            <div class="span6">Level 2</div>
        </div>
    </div>
</div>

II. Helper Utility Classes

Rather than depending on one regular pattern for markup structure, Skeleton offers the user 3 ways to nest grid children:

• Using a concept of .row wrapper div (like Foundation or Bootstrap).
• Using an explicit .clearfix class on the column to deal with nested float issues.
• Using an break entity with a .clear class.

"Note: To clear columns (both nested and just stacked columns right inside the .container, you can give the parent a class of "clearfix," wrap each row of columns in a

<div class='row'> 

or follow the last column in a row with a

<br class='clear'>

. They all work and it's up to your personal preference."

These 3 options allow a user to decide which pattern they would like to follow. This added flexibility helps to solve the case where an author would like to avoid additional presentational wrapper divs, however, makes layout de-bugging less intuitive for the novice CSS user. Clearfixing and float bugs are not an easy concept for a novice user to understand or troubleshoot ; having a clear and regular pattern [as in the case of Bootstrap and Foundation] leaves a more robust system and an easier template to follow.