Category Archives: Responsive design

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.

Advertisements

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!