Thursday, January 19, 2017

Responsive Design, Frameworks - Grid Systems

Responsive web design (RWD) is an approach to web design aimed at allowing desktop webpages to be viewed in response to the size of the screen or web browser one is viewing with. Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic. 

Here is a quick guide to some of the best grid systems that you can use to develop your web sites.

In its simplest form, a grid system is a structure within which you can build the layout of your web site. Consisting of horizontal rows and vertical columns, it houses the content of the web site, which can span one or more columns.
There are three popular responsive grids:
1.      Fluidable (
2.      CSS Smart Grid (
3.      csswizardry-grids (

This is a mobile-first responsive grid system developed by Andri Sigurðsson which has fixed gutters and supports variable column widths.

Andri wanted a grid that could be configured for any number of columns, be fluid (use percentages), and on top of that, have fixed width gutters.  From a design perspective, having gutters shrink is just a big no-no. This grid gives you the control to change gutters when you need it.

In this grid, it is possible to define the number of columns an element spans for each different device type, meaning that when using this technology, it is possible to easily control how the site looks down to an individual device type.

CSS Smart Grid:
CSS Smart Grid was developed by Daniel Ryan (http://d

Daniel built this framework in summer of 2011 for the Obama campaign. CSS Smart Grid is cleverly engineered to support Internet Explorer 8 without the need for a JavaScript polyfill. This is achieved by using the conditional comments to add classes to the HTML tag, which can then be used to show the default 960 grid to Internet Explorer 8. By using this technique, the grid can still be built using a mobile-first approach and provide a desktop layout to Internet Explorer 8 without any JavaScript required.

The columns in CSS Smart Grid are defined by adding the class “columns” with an additional class to specify the number of columns it should span (e.g., one, two, three). This is supported right up to 12 columns. Alternatively, you can also use keywords to specify how wide an element should be, these are:
1.      one-fourth: equal to 25 percent or three columns’ width
2.      one-half: equal to 50 percent or six columns’ width
3.      one-third: equal to 33.33 percent or four columns’ width
4.      two-thirds: equal to 66.66 percent or eight columns’ width

An example of using the grid in practice is shown below. As you will see, a row is defined, along with two columns, each with a width defined using the keywords discussed above:

<div class="row">
    <div class="columns two-thirds">
        <p>Lorem ipsum</p>
    <div class="columns one-third">
        <p>Lorem ipsum</p>

Using these keywords adds extra flexibility to how you choose to label your columns, however, it is important to note that in the CSS it is doing the same as if you had simply used the numerical column class names.

The grid itself is built using the SASS (Syntactically Awesome Style Sheets) CSS preprocessor, and for CSS Smart Grid, Daniel has included the option to include the column widths as a “mix in” rather than use the classes in the HTML. The benefit to this is that the HTML appears less cluttered as you don’t need to add as many classes to your markup. 

The next grid is the csswizardry-grids by Harry Roberts ( It is a mobile-first responsive grid available for download on GitHub.

The grid is built to be really flexible, with an additional benefit over the previous grids discussed, being that it allows you to define whether your columns should be centered or gutterless. This means that rather than try to offset the column evenly to center it, you can center a column simply by using a class. The grid also has the added flexibility to allow you to nest columns within other columns
Similar to the CSS Smart Grid, this grid system uses a class-naming convention that refers to the column widths as fractions, examples being:
1.      one-half
2.      one-third, two thirds
3.      one-quarter, two-quarters, three-quarters

This class-naming convention lends itself to being easier to read than the common span-X approach used by a large number of grid systems.

Again, in a similar way to CSS Smart Grid, csswizardry-grids allows you to use SASS with it (a CSS preprocessor that will be discussed later in this book), and you can simply extend the rules for the columns to your own CSS class selector, meaning that if you choose, you can avoid adding the extra classes into the HTML itself. This has the same advantages and disadvantages of using this approach as you would have using it with CSS Smart Grid.

One of the main disadvantages of using csswizardry-grids is that rather than using floats, it uses inline blocks to place the columns next to one another, so if you have a space between the columns in your HTML, you get unwanted spacing in your rendered page. There are two common ways you can use to prevent this: either by placing an HTML comment in between the elements, as shown here:

<div class="one-half">
        lorem ipsum
 --><div class="one-half">
        lorem ipsum
or by simply removing the spaces in between your columns, as shown here:

<div class="one-half">
        lorem ipsum
</div><div class="one-half">
        lorem ipsum

Although this is a disadvantage of using inline block, there are several advantages of using inline block over floats. It allows you to reverse the order of your content using the dirHTML attribute. This can be added to either a particular element to target a specific area of your site or it can be added to the HTML element to target the full page.

No comments: