What does it do?

  1. Performance Driven

    CSS Smart Grid was engineered to be lightweight. Minified and gzipped, it weighs in at only 0.65K.

    It does not require the use of polyfills to work in IE 7-8. Instead, CSS Smart Grid can use a class of "oldie" or "lt-ie9" set via Paul Irish's conditional <html> syntax to give IE 8 the default 960 pixel version of the grid.

    IE 7 and lower are not officially supported. In version 3+, IE support is not included by default. If you wish to use it, uncomment the final section of smart-grid.scss and recompile.

  2. Built to Scale

    CSS Smart Grid version 3 was completely rebuilt from the ground up to use percentage-based flexible columns and gutters. When the browser is at least 960 pixels wide, columns will be 60 pixels wide with 20 pixel gutters. Browsers from 481-959 pixels wide will scale to fit while smaller screens get full width columns. If you want to support larger layouts, its as simple as changing one variable.

    This page uses CSS Smart Grid; resize your browser to see it in action.

  3. Not Just Mobile Friendly, But Mobile First

    On mobile devices every kilobyte of bandwidth and every CPU cycle used to render a page counts. With that in mind, CSS Smart Grid uses mobile as its default layout. Mobile browsers that don't understand @media queries aren't left in the dust, they are first-class citizens. And because there's no need for polyfills on older browsers, even feature phone handsets will receive a single column view.

  4. SASS Support

    Version 4 drops support for LESS in favor of SASS . This gives you ultimate flexibility in how you choose to use the system. You can simply include the minified CSS file in your project or use the core components as mixins for your custom styles.

How to Use It

  1. As a Grid System

    There's only one CSS file to include: smart-grid.css. Place that in <head> before your own stylesheet.

    Wrap your page inside a <div class="container">. Note that you can use more than one container if your need calls for it: 

                                                                        <header
                                                                    id=
                                                                    "hd"
                                                                    >
                                                                    <div
                                                                    class=
                                                                    "container"
                                                                    >
                                                                    <h1>My Page Title
                                                                    </h1>
                                                                    </div>
                                                                    </header>
                                                                    <section
                                                                    id=
                                                                    "main"
                                                                    >
                                                                    <div
                                                                    class=
                                                                    "container"
                                                                    >
                                                                    <p>This is where my content goes.
                                                                    </p>
                                                                    </div>
                                                                    </section>

    Column Markup

    Grid columns are achieved by adding a column class to any element. By default, anything with the column class is one column wide. For wider columns, add a class matching the number of columns you want the element to be: two, four, etc. Additionally, there are several shorthand classes for common use cases: one-fourth, three-fourths, one-third, two-thirds, and one-half. Group rows of columns together under a parent element with the class row to make sure all of the floats are cleared. 

                                                                        <div
                                                                    class=
                                                                    "container"
                                                                    >
                                                                    <div
                                                                    class=
                                                                    "row"
                                                                    >
                                                                    <article
                                                                    id=
                                                                    "main"
                                                                    role=
                                                                    "main"
                                                                    class=
                                                                    "columns two-thirds"
                                                                    >
                                                                    <p>The beginning of the best article in the history of humanity.
                                                                    </p>
                                                                    </article>
                                                                    <aside
                                                                    id=
                                                                    "sidebar"
                                                                    role=
                                                                    "complementary"
                                                                    class=
                                                                    "columns four"
                                                                    >
                                                                    <p>Here is some additional information.
                                                                    </p>
                                                                    </aside>
                                                                    </div>
                                                                    <!-- end .row -->
                                                                    </div>
                                                                    <!-- end .container -->

    If you only have one row of columns in a container, you can ommit the row:

                                                                        <div
                                                                    class=
                                                                    "container"
                                                                    >
                                                                    <article
                                                                    id=
                                                                    "main"
                                                                    role=
                                                                    "main"
                                                                    class=
                                                                    "columns two-thirds"
                                                                    >
                                                                    <p>The beginning of the best article in the history of humanity.
                                                                    </p>
                                                                    </article>
                                                                    <aside
                                                                    id=
                                                                    "sidebar"
                                                                    role=
                                                                    "complementary"
                                                                    class=
                                                                    "columns four"
                                                                    >
                                                                    <p>Here is some additional information.
                                                                    </p>
                                                                    </aside>
                                                                    </div>
                                                                    <!-- end .container -->

    Column Offsets

    Sometimes you need a blank column between content. Rather than add superfluous markup, you can add one of the offset-xxxxx classes to the element you want to push left. There are classes defined to offset anywhere from 1 ( offset-one) to 11 ( offset-eleven) columns. Note that the offsets work by padding the element they're placed on; if you change the padding in your own CSS, the offsets will not work. Just like their column counterparts, offsets only take effect in browsers that are at least 768 pixels wide. 

                                                                        <div
                                                                    class=
                                                                    "container row"
                                                                    >
                                                                    <div
                                                                    class=
                                                                    "columns two offset-two"
                                                                    >
                                                                    <p>There are two blank columns to the left of this one.
                                                                    </p>
                                                                    </div>
                                                                    <!-- end .two -->
                                                                    <div
                                                                    class=
                                                                    "columns seven offset-one"
                                                                    >
                                                                    <p>This column leaves one column empty between it and it's predecessor then takes up the rest of the row.
                                                                    </p>
                                                                    </div>
                                                                    <!-- end .seven -->
                                                                    </div>
                                                                    <!-- end .container -->

    You can mix and match columns and offsets however you want as long as the offset and column numbers add up to 12.

  2. As SASS mixins

    We all know that semantic markup is best; using the Smart Grid as SASS mixins allows you to forgo adding additional classes to your markup. The Smart Grid provides three core mixins: .column() which handles the default rules like floating and margins, .columns(number) which sets the width based on the number you pass in, and .offset(number) which adds a margin-based offset to the element.

    SASS Example 

    @import "smart-grid-columns";
article {
    @include column;
    @include columns(8);
}
aside {
    @include column;
    @include columns(3);
    @include offset(1);
}

    Note that you'll still need to clear floats on the parent element. You can either @import "smart-grid-containers"; into your file and use the .container and .row classes in your markup or use any float-clearing method of your choice.