Understanding the Golden Grid System

So you’re starting a website. You’ve got an idea in your head on how you want it to look. Hopefully, you’ve done the right thing, and either sketched it out on paper or drawn it up in Photoshop or Adobe Fireworks. Now it’s time to bring in the grid system. What are your options? How do they compare? The answer to these questions lies on your knowledge of CSS, javascript, and HTML, but more importantly, on what you plan on doing. In this tutorial, I will explore the Golden Grid System (GGS) in comparison to widely-known grid systems: 1140 Grid and Twitter Bootstrap.

Introducing the Golden Grid System

Misconceptions

The first thing I want to do is clear up any misconceptions on the Golden Grid System. At first, I had a hard time figuring out what it was, but now, thanks to this post, I can confidently say it is not a so-to-speak grid system; rather, it is a starting point. The most important thing to remember when using GGS is that it’s not meant to be a full-blown “framework”. It’s designed with design in mind… and with you doing it.

It’s Too Complicated

Paradoxically, what you’re really finding overly complex is a lack of complexity. When you first visit the site, the idea of elastic gutters sounds complicated.

While the column widths in GGS are proportional to the screen’s width, the widths of its gutters (the spaces between columns) are proportional to the page’s font-size, specified in ems.

Responsive grids that use gutters proportional to the screen can make the content feel like it’s being squeezed together or pulled apart as the screen width changes. With elastic gutters this just doesn’t happen, as the gutters always stay in proportion to the content.

Elastic gutters are created by positioning elements in the centre of the gutter (using percentages) and giving them a padding equal to half of the gutter’s width. For example:

Plus you need a wrapper… or do you? That’s the stuff I wondered when I first visited the site. But in fact, there are no obligations; the idea is that this site is more of a learning resource, and you would be able to craft your own grid system based off of these techniques. In fact, all of the code provided in the GGS.css is sample code. The real grid system is stuff you’ll have to come up with yourself! As we’ll see in this tutorial, the wrapper serves as a column, but this margin-left should only be applied to the row class

IE 7 Support

While it’s true that the examples provided on the GGS site require a browser that supports box-sizing, we can actually get box-sizing to work on IE with Modernizr. In the demo code, we see that the class ie is added to the body if the browser is internet Explorer. In fact, though it has been advocated by Paul Irish, I don’t think the idea is so great, as we should not use user agents to decide what to do next. Instead, we should use feature detection. So, make sure you have modernizr loaded with the media queries option checked, and then bring this snippet over to your document structure like so. Then, in your stylesheet, put the following:

Congratulations! You have now created a stylesheet that will work in IE 7 and below, and will use media queries!

Columns That Aren’t Really Columns

I know that I was quite confused when I first looked at the GGS page with where in the CSS file the column widths were. Well, it turns out that all of the columns were up to you to configure. The guidelines (no pun intended) were inside the comment in the file:

So yes, there are no columns “so-to-speak”. But the idea is that you should make your own. I will go over this more in the next section.

Setting up GGS

Now that you understand what GGS is, and how it’s meant to be used, it’s time to dive in and create our first stylesheet. To do this, I will be using the 1140 grid system as a basis. For the remainder of the examples, I will be using my repo less boilerplate as reference.

All that’s really required is defining our classes so that they reflect the design specifications listed on the site. Those are:

  • Columns of either 16, 8, or 4
  • A container wrapper that gives the gutter. On the 1140 grid system, we have rows, which are given a margin. The container serves almost the same purpose, except that it must be applied to any element that is to be placed in a column beside another element.
  • All the columns must add up to 18. The two columns to the left and right are always 5.555555 percent, which in fact, is 100 / 18 columns.

To better understand what I mean, hop on over to the GitHub page, and check out GGS.html.

Mobile-First Approach

The first thing we can notice is the Mobile First Approach. What this means is that the site will rely on IE’s inability to understand or display media queries. But as I mentioned above, this is pretty bad practice and feature detection is better because there may be hundreds of browsers out there that don’t support media queries. As a result, we used Modernizr (and included the media queries option). The technique is seen on line 1, in which the class ie is appended to the body with an IE conditional comment, and the styles further rely on this incompatability. This way, the box-sizing is included only inside the media queries. Instead of doing this, we will let IE use media queries using Modernizr, which uses javascript. If the browser doesn’t have media query support or javascript enabled, we then use a technique similar to this, and build a stylesheet using Modernizr’s .no-js, which is appended to the body of the html, and then removed if javascript is enabled.

Take out all the IE stuff (any class having .ie in it). You may decide to store these statements in a separate stylesheet for IE, but for now, it’s safest to assume your work will be the same on all browsers. After all, that’s the web designer’s job.

Headers, .Two-way, .big, .small, and Others

The next thing to notice is the use of the .two-way class on line 9. Inside the .two-way, we can notice that they are wrapped in a div called wrapper. Once again, the wrapper serves as a column. It’s actually very misleading, because the wrapper is used in this example, not as a column, but as rows. To really understand what each wrapper is supposed to do, head over to the goldengridletsystem’s web page. Specifically, take note of lines 174 to `202:

Then, if we take a look at the CSS code, we can notice that the wrapper is being used as a column:

Here, we see that each of the wrappers inside the download section will all be 16%, or 17% in Opera because it rounds up. Next, if we head over to the CSS for #content, we will notice that it has the same properties that a column should have:

Cool! So now we understand what a row and column are! Let’s move on to the actual creation of our stlesheet.

Creating the Stylesheet

Inside the downloadable .less and .css files, we get a really good foundation for any grid system. It’s now our job to leverage the knowledge we’ve just learned, and create column and row classes, just like the 1140 grid system. But before we get started, let’s do some rudimentary math.

Rudimentary Math and Column Numbers

Suppose we decide to use 18 columns in total for our designs. We know that each of our columns must add up to 100%, and we know that each of the gutters should be 1 of those columns. This means each column should be 5.5555 percent, or 100 / 18. So, if we are to take the same concepts as the 1140 grid system, we would create 18 classes, each labeled [int]col and taking up the amount we desire. That makes sense in practice, but what about the margins on the gutters? If the user resizes, would that cause overflow? Well, the answer is that, since the max-width on the row is 100%, these values will only be relative to the row container itself.

Coding the Rows and Columns

With all this in mind, let’s create our rows and columns inside the GGS.less file. Working with LESS makes our calculations much easier, as we don’t need to worry about all the decimals; LESS will do all that for us.

Let’s start by defining some site-wide variables, which will be used for our calculations and naming conventions:

Note that I’ve added @row-notation. This is because we may want our rows to be called something else. Same deal with column notation; some frameworks use .span[int], while others (namely Zurb), use [integer]column to specify column numbers.

Now let’s define the row class:

Here, we first define padding for each row, with padding: 0 1em, so that rows are vertically spaced.

Next, we define a recursive mixin, titled generate-grid, which iterates over the amount of desired columns, subtracting the difference from 100%, or the row width.

Little Note:

The generate-grid mixin is overloaded. There are two definitions for it, depending on whether the column identifier is prepended or appended. Once again, this is to add support for existing front-end frameworks like Zurb, Bootstrap, and others.

Note the optional support for IE7 and 8. Since IE 7 and 8 do not support :last-child pseudo-selectors, it may be desirable to include a fallback. There are two options to do this:

  1. jQuery fallback. Using Selectivizr, IE9js, and the like. Here’s a quick jQuery fix that doesn’t use any of these scripts:

  1. Adjust HTML markup by simply having .last class at the last column.

Regardless, you will need to create the .last class:

Yes, I know I just used the dreaded !important… but I would argue you shouldn’t be using it anyway. No matter what, you’ll be using a hack if you want to get good IE7 support. So as an alternative, I propose using the following IE-specific hack if !important isn’t your thing, as per BrowserHacks:

This will work because of specificity. When we add the .ie7, .ie8 to our nested selector, we would override the otherwise standard .last selector.

There is one other option I may propose. You could load in selectivizr, only when the client’s IE version is below 9. Do it like so, at the head of your document:

Selectivizr will allow the n’th and :last-child pseudo-selectors to work on you page. Even in IE6! The advantage to using this is that you don’t have to be using jQuery in your project. You can just put this at the beginning of your page, and you’re all set.

Coding Media Queries

We now have a base for using rows and columns. But we still haven’t touched the media query business, which is really the core of this grid system anyway. If we look at the less file provided to us in GGS.less, we can see that the font-size of the body changes proportionally to the max-width of the browser:

If we remember back to our column styles, we made each of the columns relative to the row container. And if we keep that in mind, we also know that we would get no folding, since they are always relative to the container itself. To fix this, we need to adjust each column to take up the correct amount of space. The important thing to remember here is that there is no base width for each column. Each column is meant to “fold”, or wrap around to take up the correct amount of space. For example, if we have an element with the class eightcol, and it was originally in the 16-column grid, we would then want it to take up four columns in the eight-column grid. Notice how in the code above, we are taking the class twoway, and making it 50%, instead of the original 25% (in the 1872px resolution). If we think about it, the twocol class, as provided in the LESS file, is actually like our eightcol (in the 16-column grid).

Here’s a table that gives a list of correspondences for each class, as we go down in resolution:

Columns Column Number Width (%)
16 1 6.25
2 12.5
3 18.75
4 25.0
5 31.25
6 37.5
7 43.75
8 50.0
9 56.25
10 62.5
11 68.75
12 75.0
13 81.25
14 87.5
15 93.75
16 100
8 1 12.5
2 25.0
3 37.5
4 50.0
5 62.5
6 75.0
7 87.5
8 100
4 1 25
2 50
3 75
4 100
2 1 50
2 100

So let’s adjust the widths:

And for eight columns, we will make every second column the same height as its preceding class. So onecol will, in effect, have the same width as twocol. But before we duplicate a whole bunch of code, let’s create a mixin in LESS, and then re-use that. This mixin will serve as the base widths for the grid:

Now, all we need to do is define one more mixin to set every second column to double, so that we get folding:

And for 4 columns, we simply do the same thing, but for each four columns, they only get 25%, 50%, 75%, or 100%.

Congratulations!

You have now created a grid system that folds on resize!

Further Explorations

By now, some of you might be asking the question _But why LESS? Wouldn’t this all be ten times easier with SASS and libraries like susy? In fact, yes. That’s why I made sass boilerplate. Sass Boilerplate offers much more customizability, along with the awesomeness of the @extends. You get the ability to customize your row names, it’s compliant with the 1140 grid system, and you can extend any of the classes to other classes, all yielding lean CSS.

But with all seriousness, it’s not about what you use; it’s how you use it. You should probably see by now that anything is possible with LESS. Especially considering that the @extends directive will be arriving as of version 1.4.0, I think many developers will have plenty of a reason to build grid systems in LESS.

Grid-Based Alternatives

Before I wrap up, I thought I should mention that you are not tied to using a grid-based layout. There are many options just becoming popular, namely those new to the CSS3 specification. These include columns, grids, and the flexible box model. Unfortunately, these properties are not yet supported yet by modern browsers, so it is very tricky getting things to work. Even with hacks, you will end up maintaining two separate websites, so I highly recommend staying away from all of these alternatives. Just keep in mind that within a few years (hopefully), these will be usable.

Columns

With absoluetely no setup required, you can leverage CSS3’s column property. This property has the power to split up the page into as many columns as you wish. See external links for more.

Grids

Grids go even further than columns, and they allow you to make a grid inside any block-level element. It’s a lot like table layout, except you gain the full flexibility to position your elements however you want.

Flexible Box Model

As the name suggests, you can make your elements “stretch”, or “flex” using the new flexible box model. At first, it’s quite hard to learn, and it’s a pain to get compatability, but it is a very promising specification. Rows and columns can also “wrap” around, like with floats, so you can keep the user from side-scrolling. Overall, this seems to be the most promising, as it appeals to mobile-friendly websites.

Conclusion

In this tutorial, we’ve learned how to use the GGS system. We learned that GGS is meant for the creation of a grid system, and is not a full-fledged grid system like the others, such as the 1140 grid system. We also looked at some strategies for making our website more versatile, and why not to use the mobile-first strategy. Finally, we explored some alternatives to grid-based layouts, emphasizing especially those new to the CSS3 specification.

I hope this tutorial has been useful for you. Of course, you may want to see the source files. You can check out the grid system on my LESS Boilerplate repository. Feel free to post your implementation in the comment section below.

View on GitHub

Join The Conversation

Your email address will not be published. Required fields are marked *