CSS Grids & Responsive Frameworks

Posted on by KrooKedUK

I require a fairly robust grid for Responsify.it and I am still in the process of deciding if I should use an existing framework (possibly one listed in this post) or roll my own solution. All of these frameworks have their benefits, but they also lock you into working in a certain way. I suppose I could modify a framework/grid to suit my needs, but then I could just as easily start from scratch. I’m going to take a look at some Responsive Frameworks & CSS Grids to see if I can find anything suitable.

One gripe I have with CSS grids is unsemantic classes like grid-x or 6col. This is something I can live with though, but Responsive design has created a new problem in this area. Class names like grid-6 or col3 are no longer relevant when describing responsive layouts. For example say we have a normal element which takes up 6 columns of our page, called grid-6, this is fine and describes the element accurately enough in structural terms, but say we want to create a 1 column layout for a mobile device, then the class grid-6 loses all meaning in our markup because we have changed its context. This will bother some and others won’t give it a second thought, but thankfully there is a grid system which provides a solution, Semantic.gs which I will have a look at later in this post.

Setting aside what I said above, I realise CSS frameworks can offer many benefits, including:

  • Being able to quickly prototype to show a client something functional and tangible.
  • The structure of the site will be well organised, although this should be true even when you aren’t using a framework.
  • Those new to web design, can play around with these frameworks to gain a better understanding of how CSS works.

Let’s take a look at the Frameworks

Foundation

Foundation Grid Framework

The Foundation framework, true to it’s word includes much more than a grid, there are buttons, forms, and loads of UI elements like tabs, alerts, navigation bars, pagination and a lot more. This is definitely a feature packed framework, but I expect no less from the creators, Zurb.

Here is an overview about the grid from their well written documentation:

The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don’t give a specific structural style to should be within a container, row and column.

What you need to know is that columns don’t have a fixed width: they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.

This is a very well put together framework. It would lend itself well to quick prototyping thanks to all of the additional elements, but would work just as well for a proper production website. It’s nice to see there is nesting support also, so you can just include rows inside columns. Very polished framework, with solid documentation, we’re off to a good start!

Goldilocks Approach

The Goldilocks Approach

Front take a completely different approach from any of the other grids. According to the Goldilocks site:

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

The idea of resolution independence is very interesting and the concept behind this solution is that we shouldn’t be selecting certain devices as a guide for our layout, especially when we want that layout to work seamlessly across the myriad of devices that exist today. Instead we should be focusing on designing around the content, not the device itself.

Clearly the guys at Front have put a lot of thought into this method of designing for all devices and I think this concept will crop up more and more over the next few months, it’s definitely something I will be keeping a close eye on. I can’t help but think that this would be a great approach to take for my Responsive template generator, but I’m even considering the fact that I could offer a choice between several CSS grids. I need to have a good think about the feasibility of that one!

Skeleton

Skeleton Framework

This is another full featured framework, with solid typography set to a baseline grid and a lot more, or as stated on the website, it is:

A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Skeleton is a platform which sets the foundation for quick development, according to the creator it’s not a UI framework, instead, serving as a development kit with the basics for you to build upon and add your own style to. One thing I really love about Skeleton is the naming convention for the grid; you want one column? that’s easy just add the class one, 5 columns? the class five, you get the picture! This makes me happy to see that someone else is on the same wave length in regards to naming columns, as I would do it exactly the same way!

The only gripe I have with this framework is that it relies on pixels; sure it may be responsive, but I really feel we should be leaving behind the old mindset of working with fixed dimensions. I suppose you could make the argument that, anyone who wants to could quickly modify it to suit their needs, but I’m sure most people looking for a framework, would expect the hard work to be done for them!

Skeleton is without doubt, a great foundation upon which to build a website. I do however think it would benefit greatly by having a fluid grid, based on percentages, included as an option.

Frameless

Frameless Grid

Created by Joni Korpi, Frameless is the successor to the Less Framework and is another unique solution to creating a responsive grid. Korpi outlines his approach with the following three steps:

  • Make a regular fixed-width grid.
  • Make it repeat infinitely.
  • Center it in the viewport.

Basically the concept is to create a grid, and give that grid an infinite number of columns, so that no matter how wide the viewport, more columns will appear and fill the space. The final step is to a align the grid to the middle of the viewport. When using media queries you won’t be adapting pixel by pixel, instead column by column, an interesting way to achieve a responsive layout. I really like this concept, this solution will let you quickly and easily create new layouts for any viewport width and that is something to shout about.

960 LESS

960 Grid Adaption

David Turner, a good friend and very talented developer has adapted the popular 960 Grid system to take advantage of LESS. This is what he has to say about it:

960 LESS is an adaption of the 960 Grid System available at http://960.gs. This adaption is done to make use of LESS Mixins to, in theory, allow for less code to be used in the creation of a site. The flexibility of the mixins allows for pretty much any grid system to be usable, with margins of 2% per column. This allows, in theory, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24 or more columns to be used without having to create excessive amounts of code.

One great benefit of this adaption is how quick and painless it is to define how many columns an element takes up, thanks to the use of LESS mixins. Have a look at the code below:

.grid_1{
    .grid(24,1);
} 

.grid_2{
  .grid(24,2);
}

.grid_3{
    .grid(24,3);
}

If we look at .grid_1 we see that it calls in the mixin .grid() and passes in two values; the first being the total number of columns you want in your grid (24) and the second, how many columns you want the element to take up (1). So with this mixin you can quickly define how much space an element will take up with a quick change of the second value! A simple but well executed idea!

David includes additional options you’d expect to find, such as the prefix, suffix, alpha and omega elements, all familiar to anyone who has used the 960 Grid System before. He also notes that you are not limited to the CSS which has already been defined, that you can customise it and gives the example of creating a half-column by making use of decimals. This revised version of the 960 Grid System, gives you a highly customisable grid and requires minimal effort to make changes.

Semantic.gs

Semantic Grid System

This by far is my favourite grid system. It does not rely on unsemantic classes in the markup, meaning there is not going to be any irrelevant classes, like I described earlier. LESS variables allow quick changes to the main layout as you can see below.

@column-width: 60;
@gutter-width: 20;
@columns: 12;

To create a percentage based layout we just need to define the @total-width variable like so:

@total-width: 100%;

To create a responsive layout, you would write the following:

article {
   .column(6);
}
aside {
   .column(6);
}

@media screen and (max-width: 960px) {
   article {
      .column(12);
   }
   aside {
      .column(12);
   }
}

This method makes much more sense to me than using classes in the markup. You can quickly see how many columns an element is using and can therefore work out that the first article takes up half of the grid and using media queries it is then set to use all of the columns in the grid. I’m leaning towards this as my grid of choice for Responsify.it, but I will have to look at how well this would work, if at all, with writing CSS dynamically with PHP.

Conclusion

All of these solutions have their benefits and will all do a great job of providing you with a great foundation to start building web pages. It all comes down to personal preference on the following areas:

  • Do you want a fixed or fluid grid?
  • The level of customisation you require.
  • How quick and easy it is to get up and running.
  • How much you care about Semantics

Choosing a grid system for Responsify.it will require a lot of thought and I am still considering coming up with my own solution.

References

This entry was posted in Design. Bookmark the permalink.
  • Luke Watts

    Blueprint is also semantic when used through the Compass framework. It allows you to easily @extend the grid/columns into your own naming convention.

  • squawknet

    Whoa, 2011. Did bootstrap exist back then?

  • george lee

    Thanks for the fantastic comparison and introducing me to the Semantic.gs framework that is exactly what I am after! After having to use Bootstrap then Foundation for my prototyping we spend considerable time afterwards overwriting the builtin styles but also mainly the unsemantic class names. Now if we have semantic framework then it would give us less work later as ideally the markup should stay semantic from the start.

    • KrooKedUK

      Hey George, glad you found the post useful! Semantic.gs is great and a much nicer solution than Bootstrap or Foundation which are quite bloated. I’ve been using Bourbon Neat recently and find it to be a nice solution if you are using SCSS.