Mostly programming and video games.

Category Archives: CSS frameworks

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.

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:

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:

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.

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.

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.

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.

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.

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:

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:

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:

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:

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!

… 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.