Darryl, one of our Blueleaf developers, recently found some time to investigate and further his knowledge about grid systems. In this blog, he explains what a grid system is and highlights the benefits of using a grid system during the design and development of websites, including rapid development, consistency and ease of change. He also uses an example of our own work here at Blueleaf, to show what is possible when implanting a grid system. So, what is a grid system? A grid system provides a designer or developer with a solid foundation in which to design and develop websites. This foundation allows for rapid development, with consistent code across all the sites that implement a grid system leading to a much more organised layout.

What are the benefits of using a grid system? Benefits include:

- Design consistency - Allows flexibility between elements - Can make your designs more usable and legible - Reduces CSS coding errors - Can be used like a wireframe, allowing you to plan - “Blesses” you with cross-browser support - Streamlines your development process for future projects - Acts as an adhesive and encourages the correlation between separate page elements - Makes it easier to embed images, text, and other visual aesthetics

Source: http://spyrestudios.com/css-grid-systems/

More about benefits for designers and developers later in this blog.

960 grid system The most common grid system is the 960 grid system, which was one of the first and others are largely based on its principles.

To quote http://960.gs “All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.”

But what if 960 isn’t enough? Don’t worry; the 960 grid system is just one of the many available. There are many types of grid system with varying styles from fixed, fluid, elastic and even responsive layouts. Some of these alternatives are listed below:

1. http://grids.heroku.com/ - define your own number of columns, widths, gutters and total width 2. http://www.designinfluences.com/fluid960gs/ - fluid variant of the 960 grid system 3. http://lessframework.com/ - Good for mobile devices 4. http://framelessgrid.com/ - fully responsive layout

How do they work for designers? Generally I see our designs implement a maximum width of 940 pixels but don’t strictly implement a grid system to the full extent. A good example is the Co-operative Energy website; the container has a total width of 940 pixels which conveniently is the maximum content width of the 960 grid system. In contrast the build of the website doesn’t implement any grid system.

Grid systems are based on columns. The columns are of equal width with preset margins. In the standard 960 grid system you have 3 options which are:

1. 12 column grid (each column is 60px wide with a 10px margin left and right = 20px gutter) 2. 16 column grid (each column is 40px wide with a 10px margin left and right = 20px gutter) 3. 24 column grid (each column is 30px wide with a 5px margin left and right = 10px gutter + 5px buffer each side of the container)

The 12 and 16 column grids are the most widely used. As a rule, the more columns you have, the more flexibility you have with the design of the website. No matter what the number of columns in the 960 grid systemis, the total width of a page will always be 960 pixels e.g. for the 12 column grid, 1 column equals 60 + 20 multiplied by the total number of columns 12, which equal a total width of 960 pixels.

N.B - actual content width is 940px as the total page width includes the 20px gutter.

Click here to view a demo of the 12 and 16 column grids.

Click here to view a demo of the 24 column grid.

Designing using the 960 grid system is simple, as it includes sketch pages for making wire frames. It also includes templates and plug-ins for Photoshop, Illustrator, Fireworks, and QuarkXPress etc. All these tools should help you as a designer quickly and easily design using a grid system.

Designer benefits When using a grid system you have a set number of columns to a single page. This allows you to define your structural blocks that take up x number of columns, which makes defining the structure of a website quick and easy to achieve, which leaves you to get on with actual look and feel.

The use of a grid system also seamlessly integrates the design with the build, as developers also have a similar set of tools which allows them to quickly implement your design.

How do they work for developers? As a developer I know how long it can take to transfer a design from Photoshop to HTML/CSS. Without any grid system you need to complete the following during the build:

1. Implement a container with the total width of the site as per the design 2. Find out the width and height of each structural element and create a blocks for them 3. Position the structural elements on the page defining your floating and clearing blocks and the margins for each 4. Check your layout looks correct as per design 5. Check layout is correct in legacy browsers 6. Implement the design 7. Check again in legacy browsers as your design specific CSS implementation could have broken the layout

Also, if at any point during the build there is a key design change, depending on how flexible you made your initial layout, you may have to rewrite large portions of it. With a grid system the above could be reduced to the following:

1. Determine the total number of columns based on the design then define your blocks according to the number of columns they need by giving them an appropriate class from the 960 grid system and an extra class or ID for the CSS that will handle your own styling 2. Implement the design (because the positioning is taken care of by the 960 grid system you don’t have to explicitly check your layout by defining the block heights first) 3. Cross browser testing - the 960 grid system supports legacy browsers starting from IE6 so your layout should look fine, you will just need to test the design specific CSS looks correct

The general idea during the build is to think in columns for your widths rather than pixels when coding your initial layout.

Developer benefits Using a grid system for development means you can rapidly implement your core layout. This means you will spend less time worrying about the positioning of elements and cross browser testing, which then frees you up to get down to the actual work of implementing the styling for the actual design.

Example – Co-operative Energy Homepage This is an example of how the 960 grid system could have been used on the Co-operative Energy website.

The website was built without a grid system and this example will show you how quick it is to define its core structural layout for the home page using the 960 grid system.

Firstly, I fired up Firebug and we can see the container block (wrapper) has a width of 940px which is the same width as a 12 column block in the 960 grid system.

So using the 960 grid system the homepage of Co-operative Energy website would be structured like this:

Container – 12 columns Header – 12 column block clear Navigation – 12 column block clear Breadcrumb – 12 column block clear Home row 1 – Why switch to us = 8 column block + compare & switch = 4 column block clear Home row 2 = 3 x 4 column blocks clear Home row 3 = 3 x 4 column blocks clear Footer = 12 column block

Implementing the above structure in code took all of 5 minutes. Adding the individual block heights and some basic background colours and a few extra margins took another 10 minutes.

So let’s review what we have achieved in those 15 minutes:

1. Core layout and structure for the home page template completed 2. Consistent code structure 3. Cross browser support for the layout

If we were not using a grid system I would still be in the process of positioning the blocks. In addition, cross browser testing wouldn’t have even crossed my mind at this stage. Finally, my code would have looked logical and structured to me but I can guarantee it wouldn’t be as clear to any other developer without some explanation.

See below for how this example would look in a browser:


Line 57 – defines the container and the total number of columns in use; this could be changed to container_16 if you wanted to use the 16 column grid.

Class attribute clear – This defines the point at which the current collection of blocks ends and a new collection of blocks begin. Not strictly required if you are always using the entire number of columns available.

Class attribute grid_X – The x determines the number of columns a particular block would use. grid_12 uses the whole 12 columns so spans the entire page width; whereas grid_4 uses just a third of the available columns so will just use a third of the page.

N.B – The documentation and the grid system itself is available on the 960 grid system website.

The 960 grid system makes the above code possible as it includes all the CSS files that define all positioning and widths for your blocks. In addition it defines a reset style sheet that resets all CSS defaults across all browsers, as well as a simple text style sheet which defines some sensible defaults for typography elements such as heading and paragraph tags.

The grid system takes care of all the hard work of implementing the core layout and structure so you can now focus on the main task of implementing the actual design.

Ease of change How often has the home page of a website needed to be changed part-way through the build, or an existing website needed to be refreshed? Grid systems support ease of change right out of the box.

Example: Co-operative Energy wants to remove the yellow block and make the red block span the entire width of the page

Solution using a grid system:

1. Remove the block with the class hp-switch 2. Change the hp-slide grid class from grid_8 to grid_12

Solution without a grid system:

1. Remove the block with the class hp-switch 2. Open CSS file in which the hp-slide class is defined 3. Change the width on the hp-slide class to what you need 4. Ensure the same class isn’t use elsewhere on the site

Designer and developer collaboration If a grid system is going to be used successfully then designer and developer must communicate with each other - a typical collaboration could go like this:

1. During the planning stages decide if a grid system can be used - if one can be used which one? 2. Using the sketch pages of the grid system, make the wireframes 3. The wireframes from the previous stage can now be translated to a PSD file using the Photoshop templates that come with the grid system 4. Developer then uses both wireframes and the PSD to build the website using the grid system

It is vital at every stage that the grid system is used to allow consistency throughout the life of the projects.

Conclusion The purpose of a grid system is to introduce consistency and structure to websites that use them. They always implement the same core concepts so the knowledge you need is in the system itself, not locked away in the mind of the original developer or designer. When concentrating on making sure that the websites work, grid systems come with cross browser compatibility built in so cross browser testing should just be to ensure that your own styles are working correctly. This new found consistency and structure will also reduce the time to design, build and test websites.

Darryl Taylor - Web developer