Using CSS Smart Grid

Background

There are a number of grid frameworks for use around the web. Common features to look for in the grid system are:

Fixed or Responsive grids: Whether or not the grid will have a fixed width. Usually you'll want responsive, but fixed is easier to use
Does it rely or use a CSS preprocessor: Many grid systems integrate with CSS preprocessors like LESS and SASS (which are great). Unfortunately, working with those is beyond our current scope. For now you'll have to use a grid system that does not rely on SASS or LESS.
Number of columns: set number, several options, completely adjustable
Semantic vs. non-semantic: Semantic grids are great. However, they can sometimes lead to either greater complexity in your implementation or rely on a CSS preprocessor.
Implementation complexity and extensibility: Most grid frameworks are similar in nature, but vary slightly. Some syntaxes will be more intuitive than others. Also, not all grid systems allow for easy extensibility, such as nesting grids.

CSS Smart Grid File

I chose to use CSS Smart Grid for the Bear Necessities class demo. The syntax is fairly intuitive and the grid can be nested. It's responsive and it doesn't rely on a CSS preprocessor (although it can work with one). One major downside is that only has a 12 column implementation.

Add Smart Grid to your site

The Smart Grid code is hosted on GitHub (like most web frameworks and helpers). Go to the GitHub page linked from the Smart Grid home page. We only need the base Smart Grid CSS file for our sites since we're not using any of the advanced features.

Click on the CSS folder
Click on the smart-grid.css file
Click the "RAW" button to display just the CSS file
Save the file to your website as smart-grid.css

Add the Smart Grid

Put smart-grid.css file in your CSS folder with the rest of your CSS files.

Use the link tag in your HTML to link to the style sheet. You should link to the grid system after your reset/normalize, but before your own styles.

Smart Grid is responsive, but it allows for a set max width. To do this, wrap your page inside a container class. You should use a div tag for this.

<body>
   <div class="container">
      <p>This is where my content goes.</p>
   </div>
</body>

The Smart Grid framework contains the following CSS which will center your layout and set a max-width:

.container {
   max-width: 940px;
   padding: 0 1.06383%;
   margin: 0 auto
}

You can overwrite the max-width property in your own stylesheet to whatever you want. For example, to set the max-width to 1180px, you would use this in your stylesheet:

.container {
   max-width: 1180px;
}

Create columns

Smart Grid uses a system of classes to create rows an grids. To tell an element to fit into a column, add the class columns to it. By default, an element will take up one column.

<body>
   <div class="container">
      <p class="columns">One column paragraph.</p>
      <p class="columns">One column paragraph.</p>
      <p class="columns">One column paragraph.</p>
   </div>
</body>

There are twelve total columns. You can add classes with the numbers one-twelve to specify how many columns an element should take up. Note that the numbers should be spelled out.

<body>
   <div class="container">
      <p class="six columns">Six column paragraph.</p>
      <p class="four columns">Four column paragraph.</p>
      <p class="two columns">Two column paragraph.</p>
   </div>
</body>

To incorporate more than one row of columns, you must use a class of row. This ensures that each row is "cleared" and that they don't bump into each other. This is usually down with a separate element.

<body>
   <div class="container">
      <div class="row">
         <p class="one columns">One column paragraph.</p>
         <p class="one columns">One column paragraph.</p>
         <p class="one columns">One column paragraph.</p>
      </div>
      <div class="row">
         <p class="six columns">Six column paragraph.</p>
         <p class="four columns">Four column paragraph.</p>
         <p class="two columns">Two column paragraph.</p>
      </div>
   </div>
</body>

More Complex Layouts

In more complex layouts, it usually makes sense to add the main rows and columns in their own elements (using the div tag). This will simplify your CSS. We're using div tags because these classes have no semantic value.

<body>
   <div class="container">
      <div class="row">
         <div class="twelve columns">
            <header>
               ...header stuff...
            </header>
         </div>
      </div>

      <div class="row">
         
         <div class="eight columns">
            <article>
               ...main content stuff...
            </article>
         </div>

         <div class="four columns">
            <aside>
               ...aside content stuff...
            </aside>
         </div>
      </div>

      <div class="row">
         <div class="twelve columns">
            <footer>
               ...footer content stuff...
            </aside>
         </div>
      </div>

   </div>
</body>

Shorthand Classes

Smart Grid also contains functionality for shorthand classes for common use cases: one-fourth, three-fourths, one-third, two-thirds, and one-half.

<body>
   <div class="container">
      <div class="row">
         
         <div class="two-thirds columns">
            <article>
               ...main content stuff...
            </article>
         </div>

         <div class="one-third columns">
            <aside>
               ...aside content stuff...
            </aside>
         </div>
			
      </div>
   </div>
</body>

Offset Columns

You can create blank columns or offset columns by using offset-xxxx classes. The possible classes are: offset-one, offset-two, offset-three, offset-four, offset-five, offset-six, offset-seven, offset-eight, offset-nine, offset-ten, and offset-eleven.

<body>
   <div class="container">
      <div class="row">
         
         <div class="offset-two five columns">
            <article>
               ...main content stuff...
            </article>
         </div>

         <div class="offset-three two columns">
            <aside>
               ...aside content stuff...
            </aside>
         </div>
			
      </div>
   </div>
</body>

View the Smart Grid Demo

You can see all the combinations of classes in the Smart Grid demo page.

Back to Week 10 page »