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”:

...

<div class="hero">
  <div class="hero-inner">
    <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
" alt="Logo Image"></a>
    <div class="hero-copy">
      <h1>Short description of Product</h1>
      <p>A few reasons why this product is worth using, who it's for and why they need it.</p>  
    </div>
  </div>
</div>

<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>
</div>
...

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”:

.hero {  
  $base-border-radius: 3px !default;
  $action-color: #477DCA !default;
  $large-screen: em(860) !default;
  $hero-background-top: #7F99BE; 
  $hero-background-bottom: #20392B;
  $hero-color: white;
  $gradient-angle: 10deg;
  $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';

  @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
  background-color: #324766;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 3em;

  .hero-logo img {
    height: 4em;
    margin-bottom: 1em;
  }

  .hero-inner {
    @include outer-container;
    @include clearfix;
    margin: auto;
    padding: 3.5em;
    text-align: center;

    .hero-copy {
      text-align: center;
      
      h1 {
        color: $hero-color;
        font-size: 1.6em;
        margin-bottom: 0.5em;

        @include media($large-screen) {
          font-size: 1.8em;
        }
      }

      p {
        color: $hero-color;
        line-height: 1.4em;
        margin: 0 auto 3em auto; 

        @include media($large-screen) {
          font-size: 1.1em;
          max-width: 40%;
        }
      }
    }
  }
}

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

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”:

<div class="hero">
  <div class="hero-inner">
    <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
" alt="Logo Image"></a>
    <div class="hero-copy">
      <h1>MATCHA NERDZ</h1>
      <p>Podcast for green tea connoisseurs</p>  
    </div>
  </div>
</div>

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”:

.hero-inner {
  //padding: 3.5em;
  padding-top: 1.2em;
}

.hero-copy {
  text-align: center;
  
  h1 {
    color: $hero-color;
    font-size: 2em;
    margin-bottom: 0.5em;

    @include media($large-screen) {
      font-size: 3em;
    }
  }

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

  

    

      
MATCHA NERDZ
      
Podcast for green tea connoisseurs
  
    
  

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”:

//.hero-logo img {
//  height: 4em;
//  margin-bottom: 1em;
//}

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.

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”:

.hero {  
  $hero-image: '../images/Matcha_Nerdz.png';

  $hero-background-top: darken($matcha-green, 65%); 
  $hero-background-bottom: rgba(lighten($matcha-green, 10%), .3);

  @include background(linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), url($hero-image), no-repeat $hero-background-top scroll);

  margin-bottom: 2em;

  //background-color: #324766;
  //background-size: cover;

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.

Commit and Deploy

Time for another commit and deploy.

git add --all
git commit -m 'Adds hero unit to index.html.erb
               Adds hero image with gradient
               Adds _hero_banner Sass partial
               Imports Sass partial'

middleman deploy

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

  
    
    
		 
    
    
    
    
  

  

    

      

        
          
        
        MENU
        
      
    
    
    

      
    

    
    
  

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:

...