The Semantic Grid System | Responsive Web Design

The Semantic Grid System

The Semantic Grid System is the page layout for tomorrow.

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?

How does Semantic Grid work?

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):

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).

  • Resource Name

    The Semantic Grid System

  • Resource Creator

    TwigKit

Description

Set column and gutter widths, choose the number of columns, and switch between pixels and percentages.

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.