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”:
<div class='posts'>
<% page_articles.each_with_index do |article, i| %>
<h2><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></h2>
<!-- use article.summary(250) if you have Nokogiri available to show just
the first 250 characters -->
<%= article.body %>
<% end %>
</div>
Then we need to create a new Sass partial for our index styles and apply some magic, so in “source/stylesheets/all.sass”:
@import 'index_posts'
And in “source/stylesheets/_index_posts.sass”:
.posts +outer-container
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:
git add -all
git commit -m 'Adds Sass partial for index posts
Centers content'
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”:
<div class='posts'>
<% page_articles.each_with_index do |article, i| %>
<h2 class='post-title'><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></h2>
<!-- use article.summary(250) if you have Nokogiri available to show just
the first 250 characters -->
<%= article.body %>
<% end %>
</div>
And in “source/stylesheets/_index_posts.sass”:
.post-title, .posts p +shift(2) +span-columns(8)
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”:
This is an example article. You probably want to delete it and write your own articles! <%= lorem.sentences 5 %>
We’ll go over the details in a moment, but first a few more styles in “source/stylesheets/_index_posts.sass”:
.post-title font-size: 1.7em .posts p font-size: 1.05em margin-bottom: 4em
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:
git add --all
git commit -m 'Adjusts size for title and body text
Adds dummy text
Adds .erb extension to dummy posts'
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”:
<footer>
<div class='recent-posts'>
<h3>Recent Posts</h3>
<ol>
<% blog.articles[0...10].each do |article| %>
<li><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></li>
<% end %>
</ol>
</div>
<div class='footer-tags'>
<h3>Tags</h3>
<ol>
<% blog.tags.each do |tag, articles| %>
<li><%= link_to "#{tag} (#{articles.size})", tag_path(tag) %></li>
<% end %>
</ol>
</div>
</footer>
The above default business of just looping through our posts and tags that comes with Middleman is fine. I want to have it a bit smarter, though, and introduce shuffling to both recent posts and tags. That way, the user doesn’t only see the last ten articles or a huge list of tags, but a randomized version of both that is always ten items long. They also don’t consume a whole lot of space and let me align both items consistently in the footer. I renamed the h3 for posts as well, in “source/layouts/layout.erb”:
<footer>
<div class='recent-posts'>
<h3>Random Posts</h3>
<ol>
<% blog.articles.shuffle[0...10].each do |article| %>
<li><%= link_to article.title, article %> <span><%= article.date.strftime('%b %e') %></span></li>
<% end %>
</ol>
</div>
<div class='footer-tags'>
<h3>Tags</h3>
<ol>
<% blog.tags.to_a.shuffle[0...10].each do |tag, articles| %>
<li><%= link_to "#{tag} (#{articles.size})", tag_path(tag) %></li>
<% end %>
</ol>
</div>
</footer>
### Alignment
I think we’ve improved the user experience quite a bit through that little enhancement. Ruby made our job super easy. Now this markup only needs a little push for better alignment. We create a new Sass partial for just the footer. In “source/stylesheets/all.sass”:
@import 'footer'
And then in the partial “source/stylesheets/_footer.sass”:
footer
+outer-container
border-top: 1px solid $base-border-color
padding:
top: 4em
bottom: 4em
.recent-posts
+shift(2)
+span-columns(6)
.footer-tags
+span-columns(2)
.recent-posts, .footer-tags
h3
font-size: 1.7em
li
font-size: 1.05em
In order to have some tangible test data, I added a couple more example posts via the middleman generator and gave it some dummy lorem text. Via the terminal:
middleman article 'Your fancy title'
I should probably mention that I also needed to add an “.erb” extension to these new posts for the dummy lorem text generator. The frontmatter contains a couple more tags to play with as well.
In “source/posts/2015-12-01-your-fancy-title.html.markdown.erb”:
--- title: Example Post date: 2015-12-01 tags: example, bourbon, neat, middleman --- This is an example article. You probably want to delete it and write your own articles! <%= lorem.sentences 5 %>
The goal was to have at least ten posts and tags to see if everything aligns properly. Let’s see what we have here:
The background colors have fullfilled their duty for now. Let’s kill them and check if we’re happy with the actual result:
I think we can leave it like that for now. Time to commit our changes!
git add ../layouts/layout.erb
gco -m 'Adapts layout and adds footer'
git add ../stylesheets/_footer.sass ../stylesheets/all.sass
git commit -m 'Adds styles for footer and imports Sass partial'
git add ../posts/*.markdown.erb
git commit -m 'Adds a bunch of dummy posts with:
dummy lorem text
dummy tags'
Deploy
Before we move on, we should deploy to GitHub Pages, check our progress and make sure we’re not running into any surprises.
middleman deploy
Open your browser, go to yourusername.github.io/your_project_name and see if you’re happy with your site so far.
Extraction
What should we do next? You’re right, the footer screams in big letters EXTRACTION! We’re going to take the <footer>, create a new folder for partials and put the markup in there. In turn, we need to render that partial from “source/layouts/layout.erb”:
<body>
<div id="main" role="main">
<%= yield %>
</div>
<%= partial "partials/footer" %>
</body>
Then in the partial “source/partials/_footer.erb”:
<footer>
<div class='recent-posts'>
<h3>Random Posts</h3>
<ol>
<% blog.articles.shuffle[0...10].each do |article| %>
<li><%= link_to article.title, article %></li>
<% end %>
</ol>
</div>
<div class='footer-tags'>
<h3>Tags</h3>
<ol>
<% blog.tags.to_a.shuffle[0...10].each do |tag, articles| %>
<li><%= link_to "#{tag}", tag_path(tag) %></li>
<% end %>
</ol>
</div>
</footer>
If you paid close attention you’ll have seen that I removed the date for the list of articles in the footer. I did this for two reasons. First of all, we’re going to save a bit more space so that we don’t easily run into the scenario that the alignment with the tags breaks when the title for the post is a bit longer. Secondly, I thought it is a bit distracting and doesn’t add too much.
This list of randomzied articles in the footer is a handy way to introduce new stuff to the audience. The date doesn’t play a big role in that. The same goes for the number of articles for the tag links. They waste space without adding too much value. Also, if you don’t have too many articles for a certain tag, it doesn’t look empty right away. I’d rather have more space for a stable layout. It also feels a bit more clean, but that is completely subjective.
Commit:
git add --all
git commit -m 'Extracts footer into partial
Removes date from post links in footer
Removes number of articles for tags in footer
Didn’t provide enough value to sacrifice space'
More Dates
While we’re at it. Let’s take care of the date in our index titles. I think their size is way too prominent which does not improve our visual hierarchy and I don’t like having it at the end of the title. I’d rather stick it on the other side and use it as a visual anchor that doesn’t jump around with varying title lengths.
In “source/index.html.erb”:
<div class='posts'>
<% page_articles.each_with_index do |article, i| %>
<h2 class='post-title'><span class='post-date'><%= article.date.strftime('%b %e') %></span> <%= link_to article.title, article %></h2>
<%= article.body %>
<% end %>
</div>
And in “source/stylesheets/_index_posts.sass”:
.post-date
font-size: 0.7em
margin:
left: em(-80px)
right: em(20px)
The title of the post is reordered and starts with the span that contains the date. I left a little whitespace between the span with the date and the title itself, because if I align the date with the article body text for smaller screens then I have a natural one character space between the date and the title–and don’t need to use Sass unnecessarily.
The Sass code is straightforward. The negative margins help me to visually anchor the date to the left of the title and I used a Bourbon function to convert their pixel values into ems. Simple, but I like the hierarchy we’ve achieved. The eyes have something to jump to via the dates and the rest has enough whitespace so that we can stay away from using borders to divide our posts. Me, happy!
Commit to Git:
git add ../index.html.erb ../stylesheets/_index_posts.sass
git commit -m 'Changes order for date and post title on index page
Styles date to create visual anchor'
And deploy:
middleman deploy
Color
Let’s bring this thing to life a bit—but not too much. Less is more! I went to COLOURlovers and played with a couple of color palettes. Watch out for solutions that can enhance your visual hierarchy, but stay away from colors that are screamishly loud. I realize that this is vague, since colors can be very subjective and culturally loaded, but that’s how I approach it at the moment anyway.
In our variables “source/stylesheets/base/_variables.scss”:
$matcha-green: #78B69D; $text-color: darken($medium-gray, 20%);
Back to business; after playing with some ideas, I added two new global colors to my Sass variables file from Bitters. $matcha-green is now the color I wish to use for my identity and placed in this file I can reuse this variable wherever I please. Should I change my mind about what green I want, I will need to change it in once place. Also, I wasn’t too happy with the default color for text. Using a Sass function I darkened one of the preset colors from Bitters by 20 percent and stored that as $text-color. Post titles on hover, as well as dates and body copy received the new text color. The default was too dark in my opinion.
In “source/stylesheets/base_typography.scss”:
// transition: color $base-duration $base-timing;
And then in “source/stylesheets/_index_posts.sass”:
.post-title
font-size: 1.7em
a
+transition(color .4s ease-in-out)
color: $matcha-green
&:hover
color: $text-color
.post-date
color: $text-color
.posts p
color: $text-color
I also added a slight transition through a Bourbon mixin for hovering over .post-title. This changes from $matcha-green to $text-color over .4 seconds. Check my articles about Bourbon Mixins if you want to know more.
In case you’re wondering about the ease-in-out part, it’s one of 32 ways to time transitional behaviour. ($ease-in-out, as a $variable, like in the documentation, will throw an error) It’s a small enhancement but looks a lot better than browser defaults. To make this work I also had to uncomment the default transition behaviour from Bitters first in “base_typography.scss”.
In “source/stylesheets/_footer.sass”:
footer
border-top: 1px solid rgba($text-color, .3)
.recent-posts, .footer-tags
color: darken($medium-gray, 20%)
a
+transition(all .1s ease-in-out)
color: $text-color
&:hover
color: $matcha-green
border-bottom: 2px solid $matcha-green
Lastly, I adapted the colors for the footer as well. This gives us a coherent appearance and hopefully a bit of subtle understatement. The transitional behavior needed to be sped up for the links in the footer. Since they are grouped so tightly together I felt it wold be better if they were a bit snappier and underlined as well.
In terms of color, I did the oposite as with the titles in the index list. Since the footer list doesn’t need to be as present on the page—especially with so little distance between them—I gave them the default gray text color and only use the $matcha-green when hovering. In this example we only use whitespace and the sizing of type to achieve hierarchy.
Oh, and the border above the footer needed a bit of opacity via the Sass rgba function. I figured that 30 percent opacity is just enough to do its job without sticking out that much.
Not too shabby-looking, for such a small amount of code. Exactly how I like it—the less code you write, the fewer bugs there are to bite you!
Commit to Git:
git add --all
git commit -m 'First attempt at tuning colors
Adds new brand color as $matcha-green
Adds new $text-color:
Body copy
Post titles hover
Footer headers
Takes care of hover transitions
Comments out Bitters default transition'
## Tweaks
One more little thing that irritates me is the line-height of the body copy. Let’s tweak that too. In “source/stylesheets/_index_posts.sass”:
.posts p line-height: 1.35em
Commit:
git add ../source/stylesheets/_index_posts.sass git commit -m 'Adjusts line-height for body copy on index'
And, again, deploy:
middleman deploy
Break
Good job so far! It’s high time for another break. In the next tutorial we’re going to add a navbar and a “hero unit” on top. See you there! Get yourself a snack and chill for a bit!
