The Semantic Grid System

View Examples

Getting Started

1. Add the resources to your HTML page

Reference your LESS CSS stylesheet and the LESS.js script on your HTML page (the stylesheet must appear before the script).

<link rel="stylesheet" href="css/screen.less" type="text/less" media="screen" />
<script src="js/less-1.1.3.min.js" type="text/javascript" ></script>

2. Configure the LESS variables

Inside your stylesheet, import the grid.less file:

@import 'grid.less';

The Semantic Grid defaults to a 12 column, 960 pixel grid system. Customize the columns and gutters by overriding these three variables (after the grid.less import has been declared):

@column-width: 60;
@gutter-width: 20;
@columns: 12;

To use a fluid (percentage-based) grid rather than a fixed pixels, simply override one additional variable:

@total-width: 100%;

3. Rock and roll!

Your layout is about to get a bit more semantic.

Basic Usage

The HTML

Consider two HTML elements:

<body>
   <article>Main</article>
   <section>Sidebar</section>
</body>

The stylesheet

To position these elements side by side side, provide the desired number of grid units to the .column() mixin:

@import 'grid.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

article {
   .column(9);
}
section {
   .column(3);
}

The result is two side-by-side columns with the original HTML remaining uncompromised.

Tutorials

Fluid layouts

Semantic.gs can work in either pixels or percentages. While it defaults to pixels, fluid layouts can be achieved by adding one additional variable: @total-width: 100%;.

@import 'grid.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

@total-width: 100%; // Switch from pixels to percentages

article {
   .column(9);
}
section {
   .column(3);
}

Responsive layouts

The Semantic Grid, with its clean separation between markup and presentation, is an ideal tool for powering adaptive layouts using @media queries.

article {
   .column(6);
}
aside {
   .column(6);
}

@media screen and (max-width: 960px) {
   article {
      .column(12);
   }
   aside {
      .column(12);
   }
}

Nested columns

Multiple levels of nested columns are no problem — even for fluid layouts. Consider this HTML structure:

<article>
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
   </ul>
</article>

<aside>...</aside>

A .row() mixin must be applied to the containing element of the nested columns. That mixin should contain the number of grid units of its parent (9, in this case), and the same number must be passed into the nested columns as a second parameter (.column(3,9) in the example below). Note that This is the most complicated feature of Semantic.gs, but nested columns in fluid layouts aren't generally supported by any other grid system, so one additional parameter is a small price to pay.

article {
   .column(9);

   ul {
      .row(9);

      li {
         .column(3,9);
      }
   }
}
aside {
   .column(3);
}

Push and Pull

The .push() and .pull() mixins allow you apply left and right indents to your columns. Here is an example page.

// LESS
article {
   .push(2);
}

// Compiled CSS
article {
   margin-left: 170px;
}

// LESS
article {
   .pull(2);
}

// Compiled CSS
article {
   margin-right: 170px;
}

How It Works

Powered by LESS mixins

The Semantic Grid avoids presentational CSS classes in the HTML markup itself. Instead, it uses a parametric LESS mixin (or a SCSS or Stylus mixin, depending on which framework you prefer) to control the layout in the stylesheet where it belongs. Below is an example of the LESS syntax, and the resulting CSS (which is remarkably similar to the 1KB CSS Grid):

// This LESS rule...
article {
   .column(9);
}

// Is compiled to...
article {
   display: inline;
   float: left;
   width: 700px;
   margin: 0 10px;
}

Browser compatibility

The Semantic Grid System supports modern browsers as well as Internet Explorer 6 and up. Semantic.gs uses the micro clearfix to clear floats, which supports Firefox 3.5+, Safari 4+, Chrome, Opera 9+, and IE6+, though support for earlier versions of FireFox could easily be achieved by adding the `overflow: hidden;` method to the `.row` mixin.

The sub-pixel rounding issue is a well-known problem affecting fluid layouts in Internet Explorer 6 and 7. As of version 1.2, Semantic.gs includes a workaround to this issue (though it's commented out by default).

Using in Production

Switching from client-side to desktop or server compiling

While the LESS JavaScript compiler is convenient during early-stage development, it's best to stay away from client-side compiling once your site goes into production. For starters, you don't want your site's appearance to be dependent on JavaScript. Second, compiling LESS in the browser can take a few hundred milliseconds; no big deal for development, but unnecessary overhead for production environments. Instead, use the LESS.app desktop application to compile .less files into .css, or use one of the several server-side compilers available.