Learn to build a lean & flexible blogging platform
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.
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
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.
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:
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.
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.
Get our popular Git Cheat Sheet for free!
You'll find the most important commands on the front and helpful best practice tips on the back. Over 100,000 developers have downloaded it to make Git a little bit easier.
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.