Advertisement
  1. Web Design
  2. Web Development
Webdesign

Project: Finishing up Our Middleman Podcast Website

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

In this, the last tutorial in our series, we’ll implement a navbar and a hero section for branding our podcast site. A simple, non-bulky pagination rounds up the first version of this project and gives you all you need to get going with publishing your podcast episodes.

What We’ll Cover

  • Hero Section
  • Navigation
  • Title
  • Pagination

Hero Section

Why don’t we add a small hero section on top of the index page? I want something that gives us an opportunity to brand the podcast site without going full-splashy-marketing-page-nuts. I strongly trust in “less is more” and moreover, in “don’t insult your users by bombarding them with nonsense”. Let’s keep it nice and simple.

In this last article we will make use of another part of the Bourbon family and implement a couple of patterns from Refills—which provides a pattern / components library (styled and unstyled) and is built with Bourbon and Neat. Why reinvent the wheel when we can now and then adjust existing ones to our needs?

Note: The Refills project is maintained by designers at thoughtbot—so it’s in very good hands quality-wise.

Go to http://refills.bourbon.io/ and copy the markup for the “Hero Unit”. The provided markup is placed in our index file—right above the part where we iterate over our page_articles. In “source/index.html.erb”:

Here I copied the styles from Refills’ pattern section as well, placing them into a new file dedicated to this banner section. The provided styles are in the .scss syntax and so I go with the flow—there’s no need to convert this into .sass really.

In “source/stylesheets/_hero_banner.scss”:

We will adjust this in a second but let’s take a peek first:

file

It fits right in—that’s how I like it! Let’s tweak this to our needs by getting rid of the image and icon. But let’s start with the text, so in “source/index.html.erb”:

You can tweak this any way you like. I want to make this quick and just increase the size of the h1 for both large screens and smaller devices. The hero unit header is now 2em and 3em respectively—not too much. The padding on .hero-inner also needs to move a nudge.

Again in “source/stylesheets/_hero_banner.scss”:

Next let’s kill the logo placeholder. I find them often a bit annoying. In “source/index.html.erb”:

That’s all we need. Since we don’t use the hero logo, let’s get rid of their styles—dead weight, so in “source/stylesheets/_hero_banner.scss”:

Background Image

The generic background image also has to go. I’ll first show you how I want it to look, then I’ll explain how to get there.

file

Ignore the typography for now, you can adjust it later. I replaced the image and put a slight gradient on top of it. Since the type is white, I needed a bit more contrast for a better reading experience. If you choose an image that does not need an additional gradient, go for it!

I adjusted the Refills code with a couple of changes. First, I added an image to “source/images” and saved this image in the variable $hero-image. Then I reused this variable in the background mixin from Bourbon and reordered the image and the linear-gradient (a Bourbon mixin as well). Because the gradient comes first, it is overlayed on top of the Matcha_Nerdz.png. Once more, in “source/stylesheets/_hero_banner.scss”:

For the gradient itself, I reused our $matcha-green that we stored in “source/stylesheets/base/_variables.scss”. The top color is darkend by 65% with a Sass function; the other one is lightened by 10% and also made transparent via another Sass function called rgba. We then reuse these variables in our background mixin. The gradient-angle stayed the same. I also added a small margin of 2em to push the index list down a bit. The styles I commented out for you are dead weight and so I deleted them.

You can play with such a gradient directly in Photoshop as well, of course, but I wanted to show you how you can use them in Sass. Below is a screenshot that has no linear gradient added to the hero unit. As a little exercise, I’ll leave the cleanup of the styles we copied to you. If you find duplicates or unused styles, I recommend you fix this before moving on.

file

Commit and Deploy

Time for another commit and deploy.

file

Without the visual grid, it doesn’t look you have much work left to adjust this page for your podcasting needs. A few things I’d recommend you do is find a typeface that communicates your project distinctively without being too exotic and adjust the size and spacing of your text so that it fits your hero unit background image. Since this is part of your branding, I suggest you take your time and have some fun!

Navigation

It’s a good time to add a navbar. Again, we will use an existing pattern from Refills and adapt it for our own needs. I chose the “Centered Navigation” which you will find under “Patterns”. For this one, we need to copy the HTML, SCSS and the CoffeeScript code. I’ll start first by adding the markup to our global “layout.erb” file

Whoa! That’s quite a chunk of code. Are you thinking the same as me? This looks nasty, right? Let’s put this into a partial. We’ll change “source/layouts/layout.erb” to:

And add “source/partials/_navbar.erb”:

I’ve removed a bunch of stuff that I don’t need and only end up with my logo that I stored in “/images” and two links for home and about pages. For the two links I used the link_to helper method. It takes two arguments:

  • The string you want users to click on
  • and the location you want to link to.

I’m sure people who have played a bit with Rails or Sinatra are familiar with this. Handy, but no big deal. The link for “Home” (/matcha-nerd) will break for your local host but it is working on GitHub Pages where we need the namespace.

The avid reader might also have discovered that our about link links to a simple HTML page that I placed in a new directory named “pages”. I suggest you put HTML pages like contact, faq or whatever also in this directory. If you put these static pages in there you should have no problems customizing them to your needs. Just have some fun and apply what you’ve learned so far with these pages. From here on you are on your own with these, but you now know everything you need. Samo, samo!

Asset Path

A word about the image tags and the asset path on GitHub Pages. I decided to replace the plain img tags for the logo with a Middleman helper called image_tag. It’s not only pretty concise and readable, but also fixes an issue you will run into with the img tag when you build the site and deploy it to GitHub Pages. The url for the asset link on individual articles gets all screwed up and this is the simplest solution to fix that.

Before using image_tag, the url for the logo looked like this: http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png

This Middleman helper provided the url with the app name matcha-nerdz—it correctly namespaced the asset and gives GitHub Pages access to this image file (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

More Organization

The styles I copied from Refills are in a new Sass partial of course. In “source/stylesheets/all.sass” we reference:

And the actual partial “source/stylesheets/_header_navbar.scss” looks like:

I put the CoffeeScript code from Refills into “all.coffee”. As soon as I had to add more code than that, I’d put it into its own designated place. “source/javascripts/all.coffee”:

This snippet is responsible for toggling the menu for smaller screens.

file

Because I deleted a bunch of stuff I didn’t need from the navbar markup—like the submenu—I was able to get rid of a significant chunk of the relevant styles in this file. Since I don’t know if you need a more elaborate navbar and want to take the code right from these examples, I suggest you copy the original code if you have bigger plans for the navbar. Play with the Sass to fit your style, remove dead code and duplicates. I adjusted the background color and link colors, played with the transparency of the logo, changed the border and moved on. Have fun and go crazy if you like. I just wanted to use a super simple navbar with the brand color and a centered logo. It turned out pretty good for this little work I’d say.

Here’s the index page:

file

And here’s the detail page:

file

Time to package this into a git commit and for deploying the site.

Title

The next change is a small one, just a touch really. We need to update the title tag in our layout (“source/layouts/layout.erb”):

This gives us a dynamic title which always starts with our site’s name and attaches the article’s title if available.

Pagination

When you look at the bottom of the index list of articles you’ll see something essential missing—navigating our list of posts.

file

I’m not a fan of overly clever pagination links—bulky ones are also not winning any awards with me. Let’s keep it simple and provide two links for next and previous pages. Middleman makes this incredibly convenient. We just need to adjust our “config.rb” and tell the frontmatter of our index page to fine tune it.

First uncomment the line above. After that, you tell the index page how many articles you want to see. I think ten posts per page is enough. In “source/index.html.erb”:

The final step before we apply some styling is to place both links conveniently at the bottom of the list. First we need to get rid of these lines of code below which were commented out. They were placed at the very top of your index page.

And then place this at the very bottom of this page:

This gives us the navigational links we need side by side and supplies us with a class to tweak a few things. I decided to go with a partial for the Sass code because it didn’t fit in the footer, nor the index post styles, plus it deserves a partial of its own, especially should it grow more in size. In “source/stylesheets/all.sass”:

And in the partial “source/stylesheets/_pagination.sass”:

We shift the links a bit to the right, arrange them to float next to each other—default would be block behaviour being stacked on top of each other—and apply a little transitional effect when the user hovers over the link. That’s all we need right now. Let’s have a look.

file
file

Alrighty, time for another commit.

Final Thoughts

I guess that should suffice for version 01! As a next step, you should play with media queries to make the layout responsive to various screen sizes. The typography could need some serious love as well.

Pick a typface or two that best goes with the theme of your podcast—just don’t forget to keep it super readable.

Also, should you decide to do a podcast for real, I can only congratulate you. It’s a great way to learn from experts and also to increase your network significantly. Doing something of value for the community is always a good idea and can pay off big time. One last tip, try to learn by doing and experiement as much as you can! Reading alone just doesn’t cut it—been there, done that! If you like to share the lessions learned by writing about it, you will deepen your understanding of the topic even more. Have fun!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.