Why do we use CSS Grid Frameworks?

18_CSS_Grids.jpg
Paul Stewart

Paul Stewart
Front End Developer

Date:
06 August 2014

Office:
Glasgow

In the world of web development, particularly front end, you need a consistent structure across the face of your site and while everyone has their own methods there’s never been a box standard grid system.

At Dog we have seen structures that would help enhance the build implementation process a lot faster but there are grids out there are also very complex and harder to implement. In this article I will briefly explain what the purpose of Grids is, what the best methods are and give my thoughts on whether having more columns is a good or a bad thing.

In simple terms a grid system enables you to build shape and form around your designs. A grid system is used to help organise and maintain a consistent look and feel that arranges your content without it looking out of place.

Without site structure, you would run into problems such as time constraints, design issues and you have to take more time to adapt and build more bespoke components which adds towards the overall cost of a project.

With structure using CSS / Grid Frameworks, you have good solid foundation that provides consistency, symmetric harmony, less stress about browser capability issues and highly improves the development evolution of your project.

A lot of grid frameworks work to as low as 10 / 12 column layouts which tend to be the most popular choice. As poet Robert Browning once said “Less is more…” and in this case the less columns the more innovative you can be within your timescale / budget. There’s also is less code which means more speed and overall better performance, however, the more columns you add to the grid the more difficult it becomes to manage, taking more time to design, build and implement.

The BBC GEL Grid is a good example and does work when fully implemented to your site but you will require more time to build around using that frame work.

The image on the below shows that the BBC Gel grid is made up of 61 columns of 16px wide - a lot more than that 12 grid version by 960gs.

image

You can make modules / components with more desirable grid widths than a 12 grid system but in the long run will require more maintenance and new components / plugins which can take its toll on other parts of the website and might not fit to specifications.

For the 12 grid system (960gs) I have used one of Dog’s award winning website “Scottish Fire & Rescue” which won the Public Sector Communications Awards 2013 for Best Website.

The black faded stripes represent the columns of the 12 grid and you can see how it structures the content with your content blocks, side navigation, article content and carousel all structured using this framework. As this website is fully responsive, this would have been easier to maintain and easier to rectify if there were any issues regarding the site.

image

image

image

Having worked on both systems, I can pinpoint both their advantages and disadvantages. However, it entirely depends on the content and how it’s going to be presented. For responsive frameworks, the 12 column grid is the best and most effective solution because you have better flexibility with the less number of grid columns. In terms of the GEL grid, even though it gives more flexibility in terms of layouts and design, it can affect the overall cost in development and design. We do also  research into other frameworks such as Foundation CSS, 16 Column Grids by 960gs and many others to help us come up with better techniques to implementing our code better, robust, faster to process and easier to maintain giving us a better product to give to the client.

Overall we need CSS frameworks / grid systems not just for development, but to help design and development gain a better understanding how a website can be a more effective solution for our clients. Adding more complexity to the layouts will require more time to the process and more time to modify and resolve in both design and in development.