Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

# Project: Continuing Our Website Build With Middleman

Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
Project: Build a Complete Website With Middleman
Project: The Post Page of our Static Middleman Website

In this tutorial we’ll continue building our podcast site. We’ll begin styling our index of posts, create a nice little footer and throw a bit of color into the mix. All that using Sass and the Bourbon suite.

## Our Posts Index

Right, where were we? At the moment our site doesn’t look too great:

Currently our posts aren’t aligned to anything other than the left side, so we’re in need of a grid to fix this mess. Our beloved Bourbon Neat to the rescue! First we’ll add a class posts as a wrapper for our posts and make it an outer-container that centers the content on the page.

In “source/index.html.erb”:

Then we need to create a new Sass partial for our index styles and apply some magic, so in “source/stylesheets/all.sass”:

And in “source/stylesheets/_index_posts.sass”:

I also feel it’s a good idea to add a background color to make our outer container easily visible—for now.

Then commit to Git:

Recent articles, tags, and calendar stuff is in “layout.erb” and doesn’t concern us at the moment. Let’s focus instead on making this index list of posts pop. Let’s give the h2 title a class post-title and let title and paragraphs of body copy span for eight (out of twelve) columns across the page. The posts need to shift two columns over as well because we want to avoid having our copy running across the whole page and thereby exceeding a healthy line width (measure) for reading of 45-75 characters.

So in “source/index.html.erb”:

And in “source/stylesheets/_index_posts.sass”:

Now we’re talking. Our content is aligned and nicely centered on the page. What we’re missing is any form of visual hierarchy; our h2 titles are not much bigger than the content of our posts. To provide a better reading experience, we should make sure titles and their corresponding text have better visual contrast than that.

First, we need better text to work with, so let’s make use of a Middleman helper for dummy text. Let’s add an erb extension to our blogposts and add the following to our test posts.

Note: we need the “.erb” extension only because we want to run some ruby code between this construct .

In “source/posts/2012-01-01-example-article.html.markdown.erb”:

We’ll go over the details in a moment, but first a few more styles in “source/stylesheets/_index_posts.sass”:

That’s a bit easier on the eyes isn’t it? We have adjusted the headers and paragraphs to a reasonable degree. A little extra margin in between posts makes all the difference. In terms of hierachy, it’s a good start.

Commit to Git:

## Footer

On with the footer. I think we should take care of the ghastly floating elements on the bottom first. Let’s pack “Recent Articles” and “Tags” in a footer and get rid of “By Year”. The relevant markup is part of the global layout in “source/layouts/layout.erb”. Find the code in the aside tag below yield and adapt it as follows. In “source/layouts/layout.erb”: