Using a Grid System for Responsive Web Development
A grid system is a collection of HTML/CSS parts that allow you to structure the user interface of your website and position the website’s components in chosen places.
At its simplest it enables you to create rows and columns and place portions of your content in the places where these rows and columns meet. Generally speaking, it can promote rapid, clean design and well-structured development.
Advantages of Using Grid Systems:
A grid system can create a sense of balance and uniformity throughout your design. Instead of using columns of different widths across the page, a grid system ensures that columns and heights conform to a certain dimensions that are maintained across all sections of the website. A grid system can also be quicker to use than manual, hand-coded CSS, as many systems come with predefined classes that automatically add CSS rules such as padding, margin, heights and widths to your HTML structure.
Another advantage of utilising a front-end grid system is that it can relieve your cross-browser predicaments. The systems are usually very well tested by teams working at large, well-established firms. According to Bootstrap’s website, its classes for its current version, Bootstrap 3, are fully supported across Chrome, Firefox, Internet Explorer, Opera and Safari, and the framework is officially compatible with Internet Explorer versions 11, 10 & 9, and unofficially with Internet Explorer 7. No more worrying about Chrome and Firefox positioning fixes, Bootsrap will solve them all.
And to top it all off, grid systems allow fast development. Even the most expert developers can experience time-consuming issues with floats, double margins and positioning columns next to each other. A grid system can allow you to master-mind a complex, 12 column full-width lay-out in seconds – and enable it to resize fluidly to display on tablets and smartphones. Decisions – such as the original font size to use for a paragraph tag – have already been made for you.
However, there are certain drawbacks to using grid systems to take into account. To start with, a system (or a full framework such as Bootstrap) is not your program, so it may be harder to figure out exactly where, or when, something has gone wrong, and if an update is missed, you could run the risk of breaking your application. Most are shipped with plenty of default styles, and the first few hours of a project may simply consist of overriding (repeating) these styles so that they appear differently, or do not appear at all.
With a keen sense of care and precaution, grid systems and frameworks can be fun, and the following will consist of a discussion of the most popular responsive development tools:
Bootstrap
Bootstrap is a semantic web framework that is more or less the industry standard. Its name is derived from its purpose: to get developers up and running with minimal complexity.
It provides a 12 column grid, and different sections of the grid can be accessed through classes within the HTML. For example, <div class="col-sm-9"> would set up a section that spans 9 out of a total of 12 columns. It is highly cross-browser compatible, meaning that time does not have to be spent ironing out the differences in display across the different browsers. It also has a large development community, which is constantly working on writing plugins and short-codes.
Furthermore, Bootstrap’s markup can be easily targeted via JavaScript, and it comes with a host of easily programmable animations such as slideshows, dropdowns and transitions. And you do not need to download the entire application if you only want to use a small segment of its functionality – Bootstap’s optional check box interface takes care of that.
However, using Bootstrap should be performed with some caution. Designers need to make sure that the images and text boxes that they create correctly match Bootstrap’s predefined column width sizes. Bootstrap’s grid is also wider than the previous twelve column grids of the 1990s and 2000s. The area that it designates for the body of the website is 1140px – wider than the previous HTML grids of 960px – and designers need to account for this.
The other criticism much often loaded at Bootstrap is that all of the sites designed for this framework end up looking ‘samey’. The easy re-use of Bootstrap’s CSS classes means that designs are very often in three column layouts. This can cause sites to look fairly similar to one another. The HTML generated by Bootstrap can also be very populated with ‘<div>’ tags, and the size of Bootstrap’s CSS & JS files can significantly increase the overhead on the load time.
Sass/Bourbon
Neat is a responsive grid framework built on top of Sass and Bourbon. Neat promotes clean and semantic markup, and does not integrate with your HTML meaning that you do not need to worry about adding extra classes or container divs.
The functionality of Bootstrap is underpinned by using classes within html markup. Not only can this make your html seem cluttered, it goes against the recommended practices on how to organise your code. We have CSS to use as our presentational layer – HTML should not be used for this – HTML is really for our structure, CSS for our presentation and JavaScript for our behaviour.
With Neat, we do not need to use HTML classes or ids to define our layout. Instead, we can put all our presentational rules for defining our grid into our Sass. Using specially defined Neat mixins, we can target each of our HTML sections and include the rule, span-columns(). The rule takes the number of columns you would like each section to span as the parameter. For instance, if you have a container section, and you would like it to span twelve columns, you would include the rule:
section.container {
@include span-columns(12);
}If inside the container section, you have two child divs, one that you would like to span four of the 12 columns and one that you would like to span eight, there is a special number that we can add to our parameters to reflect this:
.row#left {
@include span-columns(4 of 12);
}
.row#right{
@include span-columns(8 of 12);
}However, there are disadvantages to using systems such as Neat, especially when combined with content management systems such as Wordpress. If all the rules regarding presentation are set in our stylesheets, they are harder for clients to edit. A plugin has been written that places a ‘Bootstrap Button’ on the administration panel within Wordpress, allowing the client to edit the columns on the pages of their site and delete or add new columns if necessary. With Neat, the column controls are locked away in our CSS files, meaning that they are difficult to edit using the standard Wordpress dashboard without the assistance of a specialised web developer. If used semantically, Neat can also lead to fairly large, code-heavy CSS files, which can be up to a third longer than the original version and can be harder to compress.
To conclude, the decision as to whether to use a front-end framework for each project often depends on the needs and standards of the development team. A framework in itself can help improve the speed of a website build, but at the end of the day, a developer will be working with someone else’s code, and leaving a lot of decisions regarding functionality for somebody else.
Assuming the team adopts a front-end framework, a good developer may want to maintain a strict separation between structure and presentation and use a CSS based framework such as Bourbon. On the other hand, when it comes down to providing the most customisable layout for the client to log in and edit, Bootstrap with its flexible shortcodes might just about win over them all.
Get in touch to find out more about how we can design a responsive website for you.
