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:
Fluidable:
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:
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>
<div class="columns one-third">
<p>Lorem ipsum</p>
</div>
</div>
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.
csswizardry-grids:
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><!--
--><div class="one-half">
lorem ipsum
</div>
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
</div>
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.
