Creating grids with semantic.gs

HTML5 introduced many new semantic HTML tags, such as footer, header, section, among others; nevertheless, many modern CSS grid systems are built with non-semantic div tags and CSS classes. Critics even say that building your grids with div tags does not differ from the old-school table layouts. The semantic.gs mixins library provides you with a simple manner to build a 12-column semantic grid. Grids can be used as the skeleton of a responsive website.

Using grids in web design will help both the web designer and the web developer to prevent inconsistencies from occurring between the original design and the final implementation in HTML.

Getting ready

For this recipe, you have to download the latest version of the semantic.gs mixins, which can be found at https://github.com/tylertate/semantic.gs/zipball/master . After editing the Sass files with a text editor, you can test the result in your browser. Use the Ruby Sass compiler as described in Chapter 1, Getting...