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 specific dimensions that are maintained across all sections of the website. A grid system can also be quicker to use than manually 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 the current version, Bootstrap 3, are fully supported across Chrome, Firefox, Internet Explorer, Opera, and Safari. 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, Bootstrap will solve them all.
And to top it all off, grid systems allow fast development. Even the most experienced developers can encounter 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 layout 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 that need to be considered. 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. 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 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, for the most part, 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 is not spent ironing out the differences in display across 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 – Bootstrap’s optional check box interface takes care of that.
However, using Bootstrap should be performed with some caution. Designers must ensure that the images and text boxes they create align correctly with 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 often levelled 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 pretty similar to one another. The HTML generated by Bootstrap can also be 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, but it also 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 purpose. HTML is primarily 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 like Neat, especially when combined with content management systems like 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 WordPress administration panel, allowing the client to edit the columns on their site’s pages and delete or add new columns as 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 result in relatively large, code-heavy CSS files, which can be up to a third longer than the original version and may be more challenging 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. Still, ultimately, a developer will be working with someone else’s code, leaving many decisions regarding functionality to others.
Assuming the team adopts a front-end framework, a skilled developer may want to maintain a strict separation between structure and presentation, using 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.
Contact us to learn more about how we can design a responsive website tailored to your needs.