Blog Layout and Grid

We're going to kick things off by establishing a solid foundation to build our blog on. We will first establish basic layouts for our core pages and define a grid to help us stay consistent.

Page Layouts

The layouts will serve as a basis to determine the design foundation and necessary elements. In "Structuring a Blog", we already settled for a general structure. Here's what our core views - the article page and the article list - will roughly look like:

Article Page Layout

Article List Layout

The Grid

A grid will help you with positioning elements consistently across multiple pages. Think of it as the underlying skeleton of your site. Grids can be applied both vertically and horizontally, although defining horizontal grids is more common.

Additionally, we know that we will make use of a grid system later on when developing the frontend, so it makes even more sense to define a grid right upfront.

Links

More about grids

We only touch the surface of grid systems and want to encourage you to dig deeper. Knowing about grids is great since you can apply the knowledge to almost anything that's related to design and layout:

  • The Anatomy of a Grid will teach you grid fundamentals and the basic terminology in a nutshell
  • All About Grid Systems by Rachel Shillcock from Tutsplus is another great entry point to get a solid understanding of grid systems
  • Grids Are Good is an excellent set of slides by Khoi Vinh which will teach you using grids to design a site
  • Designing With Grid-Based Approach basically covers everything related to grid system by providing a huge structured list of links


Since our layouts are fairly simple we can settle for a solid, 12-columns based default grid. Many grid systems default to either 6, 12 or 18 columns. The reason for those numbers is that they are multiples of 3 and 4 which offer flexibility when positioning and distributing elements on the site .


The grid creation is a process that accompanies the site layout. It's best to start getting deeper into the grid after having a clear understanding about the general site structure and layout.

Our initial grid will have 12 columns, a total width of 960px, 44px column width and 40 px gutter width (the space between each column).

Article Page Grid

Article List Grid

To ensure further consistency and rhythm when distributing our elements vertically we'll use a rudimentary vertical grid, also referred to as rows. Our row height will be 24px while our gutter height will be 12px (half of the height). The process of treating vertical space between elements consistently is also referred to as vertical rhythm.

Read Compose to a Vertical Rhythm by Richard Rutter to learn more about vertical rhythm in web design.

A word on responsive Design

For the sake of simplicity we don't cover design adjustments to various screen sizes in this course. Since we have created a rather simple layout and the framework we're going to use later on allows us to use fluid grids we'll make necessary adjustments on the fly while developing the frontend of the site later on.

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.