The Divine Grid

In my previous article, I covered the most common methods for using the golden ratio in web design. I also alluded to a discovery I made when I was trying to make a grid composed of golden rectangles. In this article, I’ll illustrate how to create such a grid, then I’ll give you one to play with.

Step 1: Define some constants

Let’s make the width of our page 980 pixels. We’ll use 6 columns and make the width of the gutters between our columns 10 pixels each. That means that the width of our columns is 155 pixels each, because of math:

(980 pixels - (5 gutters * 10 pixels)) / 6 columns = 155 pixels

Basically, the width of our columns is the width of our page divided by the number of columns after subtracting the total width of our gutters.

Step 2: Find the dimensions of a single grid cell using the golden ratio

Most webpage grids are composed of columns only, but ours will have rows as well. We want our grid to be composed of golden rectangles. So, to find the height of a single grid cell, we simply divide its width – the width of one of our columns – by the golden ratio:

155 pixels / 1.618 ~ 95.797 pixels

Since browsers can’t render sub-pixels, we’ll round the height of our rows to 96 pixels each. So the dimensions of a single grid cell in our grid is 155 pixels wide by 96 pixels high.

Step 3: Create bigger golden rectangles from smaller golden rectangles

Our columns are 155 pixels wide each, and the gutters between our columns are 10 pixels wide each. So, if we want an element on our page to span two columns, it would need to be 320 pixels wide:

155 pixels + 10 pixels + 155 pixels = 320 pixels

Now, if we want this element span two rows and to be a golden rectangle, we just divide its width by the golden ratio:

320 pixels / 1.618 ~ 197.771 pixels

So the dimensions of an element on our page that spans two columns and two rows is 320 pixels wide by 198 pixels high. That means that the height of the gutters between our rows is 6 pixels each, because that’s the space that’s left over after subtracting the total height of two rows from the height of a golden rectangle that spans two columns:

198 pixels - (2 * 96 pixels) = 6 pixels

We can follow this procedure to build our whole grid, which results in the following:

A grid composed of golden rectangles, 155 pixels wide by 96 pixels wide each

You can see from the image above that an element that spans three columns and three rows is 485 pixels wide by 300 pixels high, and element that spans four columns and four rows is 650 pixels wide and 402 pixels high, etc. Each of these bigger golden rectangles is made out of smaller golden rectangles.

Step 4: Make something cool

Now, download the Divine Grid from GitHub, which uses a page width of 988 pixels, 6 columns, a gutter width of 20 pixels, and a gutter height of 13 pixels. This results in a slightly different grid than the one above, but it works just as well:

A grid composed of golden rectangles, 148 pixels wide by 91 pixels wide each

Check out the included files for examples of the Divine Grid in action. demo.html contains at least seven golden rectangles. They are outlined in red in this screenshot, and an image of the grid is superimposed:

The Divine Grid - a fluid, responsive CSS grid framework based on the divine proportion, also known as the golden ratio

Finally, have a gander at the Divine Template – a fluid, responsive CSS template based on the Divine Grid:

The Divine Template - a fluid, responsive CSS template based on the Divine Grid

After you get a chance to play with it, I’d love to see what you came up with! You can post a link in the comments section below.

Also, there’s no reason why you can’t do something similar with seven, eight, or sixteen columns. I just like six.

How to use the golden ratio in web design

I’ve written about the golden ratio before, and how I became confused when I was researching the Golden Grid System and The Golden Grid – two CSS grid frameworks whose names suggest there is some relation to the mathematical phenomenon. To be clear, using these frameworks won’t get you any closer to applying the golden ratio in web design, but they are both incredibly useful nonetheless.

There are several articles available that will give you some ideas of how to use the golden ratio in page layouts. Most of them suggest a strategy like this: Multiply the width of your main content area by the golden ratio – approximately 1.618 – and use the product as the width of your sidebar area. Too often, this suggestion is followed by instructions on how to use the rule of thirds, which has little (if any) application in web design and nothing to do with the golden ratio at all. The rule of thirds is a neat trick in print design and photography, but is pretty useless when it comes to page layouts with dynamic content.

I tried experimenting with this sidebar idea a couple of ways. Here is what I came up with:

Using the golden ratio to find the width of consecutive sidebar areas

In this first example, the two right-most columns are in golden proportion with each other, since 52 x 1.618 ~ 84. Then, these two columns combined are in golden proportion with the third right-most column, since (84 + 52) x 1.618 ~ 220. Finally, these three columns combined are in golden proportion with the left-most column, since (220 + 84 + 52) x 1.618 ~ 576. I also tried this:

Using the golden ratio to find the widths of consecutive sidebar areas (cont.)

In this example, each column is in golden proportion with the ones on either side of it. However, it’s much too wide, although you might be able to use only the middle columns. Both examples are very impractical. I’m sure I could think of a use for that far-right column, but not in most cases.

Another strategy I’ve come across goes like this: Divide the width of any content area by the golden ratio and use the quotient as the height of your content area. This is practical if you can restrict the height of your content area. You can see it in action in Adit Gupta’s article on Smashing Magazine. I’ll put the image up here but give him the proper credit:

Using the golden ratio to find the heights of media objects

Each of the content areas above (The Beginning, Newton’s Vision, Einstein’s Relativity, etc.) is a golden rectangle, which means that its width is in golden proportion to its height.

Looking at the picture of Space Geek, I realized it should not be that much of a stretch to make a grid composed of golden rectangles. The awesome discovery I made later restored some of the vigor I had once lost for mathematics. Next time, I’ll explain all about the discovery I made and unveil something truly freaking awesome.

The golden ratio and the rule of thirds are not the same thing

I won’t waste words telling you what the golden ratio or the rule of thirds is. That’s what Wikipedia is for.

Instead, I want to discuss a specific issue regarding these two distinct concepts, which is that many people think they are not two distinct concepts but they are actually the same thing. I will let Google prove my point.

Here’s just a sample from the first page of search results:

• So, the first “golden” rule is the “Rule of Thirds” or “Golden Ratio.”
• The “rule of thirds” is a simplified version of the golden mean.
• Those intersections are also called golden sections, and the rule is also called The Golden Ratio Rule.
• The Rule of Thirds sometimes known as the Golden Mean or Golden Ratio.

To be fair, most people probably don’t care that there is a distinction, but some people really, really do.

I care because it confused me to no end when I was researching grid-based layouts. In particular, I thought the Golden Grid System and The Golden Grid had something to do with either the golden ratio or the rule of thirds, which they don’t. That’s not to say that they aren’t both incredibly useful, just that they have confusing names.

In addition, many people will admit that they are not the same thing, but that the rule of thirds approximates the golden ratio. However, the rule of thirds originally referred to using proportions of colors and not to dimensions or positions of elements in art. At best, the rule of thirds provides a lazy approximation of the golden ratio. Even that statement is a stretch though:

A comparison of the golden ratio vs the rule of thirds. The yellow lines were derived using the golden ratio, which is approximately 1:1.618. The black lines were derived using the rule of thirds, a ratio of 1:2.

I’ve even read somewhere that a golden spiral will eventually approach the point of intersection or “power point” of the rule of thirds, which is obviously false:

The golden spiral does not approach the point of intersection of the rule of thirds.

I know I’m not the first person to write about this, or the last, but hopefully I’ve helped to clear up some confusion.

How to create a grid-based layout with inuit.css

inuit.css is incredibly easy to use, even for novices to CSS frameworks like myself. It comes bundled with a handful of CSS objects, such as the media object which takes the following format:

<a class="media">
    <img src="[Image source goes here]" class="img" />
    <p class="body">[Text goes here]</p>
</a>

The island object is a generic class that simply adds padding to an element. The nav abstraction is another generic class that will turn a bulleted list into a horizontal navigation menu.

Additionally, if you use the fluid grid system builder available on the inuit.css website, creating a grid-based layout is a piece of cake. I’m going to walk you through how to do exactly that.

Step 1: Download inuit.css from the inuit.css website. You can do this by clicking on the big “Download now” button on the right side of the page. Extract the zip archive, then get the inuit.css file from the core/css folder and include it in your document.

Step 2: Get the grid.inuit.css file either from the demo/css folder or create a new one using the fluid grid system builder on the inuit.css website. Don’t include this file in your document. Instead, get the igloos.css file from the demo/css folder and include this file in your document. This file should contain the single line:

@import url(grid.inuit.css)

Other include statements can be added to this file as well to add other igloos to your document, but leave it the way it is for now. By keeping the grid.inuit.css file separate from the rest of the inuit.css framework, along with any other igloos (or plugins) we want to add, we are making it easy to change the grid later should the need arise. For the purpose of this article, I’ll assume you’re using a grid that is composed of 12 columns.

Step 3: Apply a class of .wrapper to the body element in your document.

Step 4: Create a div element within the body element of your document. Apply a class of .grids to the div element you just created.

Step 5: Within the div element you just created, create a div element for each column you would like to fill with content. Each div can have one of the following classes:

• .grid-1 — Spans one column
• .grid-2 — Spans two columns
• …
• .grid-12 — Spans 12 columns

For example, you can create two divs that span six columns each, like so:

<div class="grids">
    <div class="grid-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
</div>

I filled the divs I created with lorem ipsum dummy text, but obviously you can do whatever you want. Alternatively, you can create however many divs you like as long as they span 12 columns total. To start a new row of columns, simply start a new div with a class of .grids, like so:

<div class="grids">
    <div class="grid-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
</div>
<div class="grids">
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
    <div class="grid-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </div>
</div>

According to the author:

The grids all come with preset widths and therefore their box model properties should not be edited or overridden. If you would like a <div> with a yellow background and a padding of 10px then create a <div> inside a grid container and style that.

So, if you want to fill that last row of divs with a yellow background, you would do it like this:

<div class="grids">
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
    <div class="grid-3">
        <div class="promo">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    </div>
</div>

Of course, you can style the .promo class in your stylesheet however you like. Classes such as the media object should also be placed inside a grid container and not applied directly to the grid container, like so:

<div class="grid-6">
    <div class="media promo island">
        <img src="[Image source goes here]" class="img" />
        <p class="body">[Text goes here]</p>
    </div>
    <div class="media promo island">
        <img src="[Image source goes here]" class="img" />
        <p class="body">[Text goes here]</p>
    </div>
</div>

Using a combination of the media object, the island object, the nav abstraction, the keywords igloo, and a 12 column grid, I created the following super awesome website that everyone would want to visit:

One of the coolest features of inuit.css is that it is responsive. All of the columns will stack vertically and fill any remaining horizontal space if the user’s browser is less than 720 pixels wide. I added an extra media query to my own stylesheet to add vertical space between elements that didn’t already have it:

@media (max-width: 720px)
{
    .peninsula
    {
        margin-bottom: 1.5rem;
    }
}

That wraps up my discussion on inuit.css. There are lots more ways it can be used to create great looking websites, so head over to the inuit.css website to check it out for yourself, and be sure to let me know if you found this article helpful!

Vertical margins, padding as a percentage of parent container’s width

It struck me as odd at first when I realized that, when expressed as a percentage, an element’s margin-top property is computed based on its parent container’s width as opposed to its height. (http://www.w3.org/TR/CSS2/box.html#propdef-margin-top) The same goes for its margin-bottom property, as well as for any vertical padding such as padding-top and padding-bottom.

After thinking about it some more, it does make sense this way. Specifying an element’s margin as simply 5% will result in the same amount of pixels on all sides of the element.

Is this a total “Duh” moment, or what? Was anyone else tripped up by this?

Overflow – a secret benefit

Continuing down the rabbit hole, I stumbled upon this article by Nicole Sullivan that describes the applications of a little known W3C spec:

When the overflow property is set, a new block formatting context is created. What does that mean? It changes the way the block interacts with floats. It no longer wraps around floats, but rather becomes narrower.

This comes in handy for many purposes, such as creating a media object or creating a layout with columns.

In case you can’t tell, I’m still trying to wrap my head around inuit.css. More on that later.

The “clearfix” debate

Up until recently, I’ve been clearing nested floats the incorrect way – by adding additional markup to my HTML documents that added no semantic value. In fact, I didn’t even realize there was a “clearfix” debate or what “clearfix” even meant. (If you’ve never run into this problem, check out this little emulator on SitePoint. Notice how the white background doesn’t expand to encapsulate the sidebar as the sidebar gets longer.)

A comment in the code of Harry Roberts’ inuit.css pointed me to Nicolas Gallagher’s micro clearfix hack, which is a pretty efficient way to clear nested floats with a minimum of additional markup. However, additional markup is still required in his solution.

It seems to me that the best solution is one that was posted in 2005 by Peter-Paul Koch on QuirksMode. His solution requires no additional markup, and appears to have the exact same results in my own tests.

Please let me know if I overlooked something.

Update

Here’s the difference between the two methods:

Obviously, the first method pictured clips the image because its parent container is set to overflow: hidden. I should have realized the difference by looking at the code, but hopefully the diagram above will help someone else who’s confused over the issue.

It’s helpful to know both methods and when to use each one, as Nicolas even points out in the comments section on his post.

Conditional stylesheets vs CSS hacks? Answer: Neither!

http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Studying Joni Korpi’s Golden Grid System led me to Paul Irish’s elegant solution to the conditional stylesheets vs CSS hacks debate. Problem solved.

What is a grid-based design?

When reading Ethan Marcotte’s article on responsive web design, I glossed over the references to fluid grids. Even without an understanding of grid systems, or grid-based designs, I found the article to be enlightening. However, I got lost as soon as I began reading his article on fluid grids. I would have been much better off starting with Chuck Greene’s article on the uses of grids in print media. His comparison of grid-less designs to grid-based designs really cleared things up for me:

… you can spot a grid-less document from a mile away —images and text float on the page in a seemingly random arrangement and elements repeated on multiple pages often appear close-to, but not in exactly the same position. Grid-less is fine if that randomness is intentional, it’s not fine if its simply a lack of planning.

In contrast, a layout built on a grid looks far more organized … The underlying grid adds a real sense of structure to the page.

I also found Raj Dash’s article on CSS grid frameworks incredibly helpful, as well as Jesse Storimer’s tutorial on the Blueprint CSS Framework. The latter is a bit outdated, so I would instead direct anyone who’s interested to the Blueprint CSS Framework Quick-Start Tutorial.

Now that I’m up to speed on grid-based designs, it’s time to tackle fluid grids again. Then, I’ll be looking at some fluid CSS grid frameworks.

LESS CSS turns CSS into a programming language

http://www.lesscss.org/

This is a really nifty approach to creating dynamic stylesheets. The only problem I can see is that if your user has disabled JavaScript, then your layout will be broken as well as your functionality.

Are you using LESS CSS? How do you work around this limitation? Let me know!