All about the grid

February 15th, 2011

The Extricate theme layout is based on an elegant, intuitive fourteen-column grid. This structure will lend a graceful form to your content, but only because, under the surface, the layout is based on cold, hard maths. Let’s take a look.

Here’s how the layout looks on a small screen, like a MacBook Air (twelve columns wide):

Extricate grid

And now, here’s that same layout, but with the grid columns overlaid on top of it.

Each column is fifty pixels, and each gap is twenty pixels, giving a total of 820 pixels:

Extricate grid - columns

But that’s not all! The sides of the layout also include extra padding, which gets used when pages are viewed on a larger screen.

Extricate grid - columns (including 'ghost' columns)

However, the Extricate grid is not just based on columns; it also has rows, each forty pixels in height:

Extricate grid - top rows

So, putting that all together, we can see that the entire layout is underpinned by a strong, intuitive grid, allowing for pixel-perfect content placement within a harmonious, well-proportioned structure. Cool, right?

Extricate grid - columns (including 'ghost' columns) and rows

One of the practical results of basing the design on this grid is that it allows you to resize your content columns within the layout without breaking the elegant form of the page. Another is that it lets your content shine, allowing a variety of options for embedding images, videos and more, combining the practical with the beautiful. Ultimately, however, it’s up to you to make use of the grid as the underpinning for an awesome website, so please let me know what uses you come up with.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>