ZURB Foundation 5: Creating A Responsive Blog Layout

ZURB Foundation 5 Tutorial
ZURB Foundation 5

ZURB’s Foundation is a light weight framework for designing responsive web applications, it comes packed with: CSS3 media queries, The Grid, reusable HTML5 components and several jQuery plugins to aid interactivity. Furthermore, Foundation is built with mobile-first approach and allows the stacking of content by default using predefined break points. Or, in other words, we can say that it is responsive by default.

Understanding The Foundation 5 Grid

The Grid in Foundation is pretty easier to understand, we use row class on a div element to define a horizontal container, then we use column class on nested divs to add columns. Since Foundation 5 uses two break points for responsive casting, it allows us to specify grid in three sizes using small-*,medium-* and large-* classes. Small family is used to set column width for a viewport size between 0 to 640, medium is used for viewport size between 641 to 1023, and medium is used for 1024 and greater viewports. See Foundation’s Documentation for further details.

Building The Blog Layout

Foundation 5 Responsive Blog Layout Tutorial
Foundation 5 Responsive Blog Layout Tutorial Screenshot

First of all we need to download a copy of Foundation from here, which I have already downloaded and created the following directory structure:

┌─[usm4n@usm4n-desktop]―[~/Web/foundation5]
└─•tree -L 3
.
├── assets
│   ├── css
│   │   ├── custom.css
│   │   ├── foundation.css
│   │   ├── foundation.min.css
│   │   └── normalize.css
│   ├── img
│   └── js
│       ├── foundation
│       ├── foundation.min.js
│       ├── jquery.js
│       ├── modernizr.js
│       └── vendor
└── index.html

Our index.html looks like this:

<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive Blog Layout</title>
  </head>

  <body>

  </body>
</html>

Now we are going to link necessary style sheets and scripts for Foundation to work properly. We will add the following three lines in the head section of the page:

<link rel="stylesheet" href="./assets/css/foundation.css">
<link rel="stylesheet" type="text/css" href="./assets/css/custom.css">
<script src="./assets/js/vendor/custom.modernizr.js"></script>

I have also added custom.css, we will utilize this style sheet to define our custom styles. To boot Foundation JavaScript, following lines are required to be added before the closing body tag:

<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
      $(document).foundation();
</script>

Defining The Grid

Now having all setup, we are ready to define our grid, we will add following HTML markup inside body tag:

<div class="row main">
    <div class="small-9 large-9 column primary">
      <header id="masthead">
      <div class="sub-header">
        <hgroup>
          <h1>Responsive Blog Layout</h1>
          <h2>Foundation 5 responsive design tutorial</h2>
        </hgroup>
      </div>
      </header>

      <div class="content">
          <!-- content -->
      </div>

    </div>
    <div class="small-3 large-3 column">
      <aside class="sidebar">  
        <!-- sidebar with full height -->
      </aside>
    </div>    
</div>

In the above HTML snippet, the row class on outer div will create a horizontal container. Inside this container, I have added two columns using column class, small-* and large-* classes will set the width of the columns in small and large grids respectively.

Required changes in custom.css:

body {
    background-color: #232323;
    color: #555;
    padding: 5px;
}

.main {
    background-color: #008CBA;
    border: 1px solid #eee;
    border-radius: 3px;
}
.primary {
    background-color: #fff;
    padding: 0 1px 0 0;
    box-shadow: -4px 0 3px -3px #000 inset;
}
.sub-header {
    height: 200px;
    background: #F47063;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    box-shadow: -2px 0 3px -3px #000 inset;
}
.sub-header h1 {
    color: #fff;
    margin: 0;
    text-shadow: 2px 0 1px #555;
}
.sub-header h2 {
    font-size: 18px;
    color: #fff;
    margin:0;
}
.content {
    padding :10px 10px;
}

Since our sidebar will not be utilizing full height of the row container, I have applied a shadow on the primary div using inset to fake the height of the sidebar.

Foundation 5 Responsive Blog Layout Tutorial
Foundation 5 Responsive Blog Layout Tutorial Screenshot

The Navigation Bar

Navigation Bar in Foundation requires a prerequisite markup and classes. I have taken this markup directly from Foundation’s documentation:

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name"></li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Home</a></li>
      <li class="has-dropdown not-click not-click"><a href="#">Categories</a>
        <ul class="dropdown">                   
          <li><a href="top-bar.html#">PHP</a></li>
          <li class="divider"></li>
          <li><a href="top-bar.html#">HTML5</a></li>
          <li><a href="top-bar.html#">CSS3</a></li>
          <li><a href="top-bar.html#">jQuery</a></li>
        </ul>
      </li>
      <li><a href="#">Archives</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </section>
</nav>

Class top-bar-section defines a navigation section, left and right classes on the ul elements can be used to move the navigation sections on right or left side of the Top Bar. To create a dropdown menu, Top Bar in Foundation requires a ul element with class dropdown to be wrapped in li element with class has-dropdown.

Now our body section with navigation added in the header section looks like this:

<div class = "row main">
    <div class="small-9 large-9 column primary">
      <header id="masthead">
        <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <!-- Title Area -->
            <li class="name"></li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
          </ul>

          <section class="top-bar-section">
            <ul class="left">
              <li><a href="#">Home</a></li>
              <li class="has-dropdown not-click not-click"><a href="#">Categories</a>
                <ul class="dropdown">                   
                  <li><a href="top-bar.html#">PHP</a></li>
                  <li class="divider"></li>
                  <li><a href="top-bar.html#">HTML5</a></li>
                  <li><a href="top-bar.html#">CSS3</a></li>
                  <li><a href="top-bar.html#">jQuery</a></li>
                </ul>
              </li>
              <li><a href="#">Archives</a></li>
              <li><a href="#">About</a></li>
            </ul>
          </section>
      </nav>
      <div class="sub-header">
        <hgroup>
          <h1>Responsive Blog Layout</h1>
          <h2>Foundation 5 responsive design tutorial</h2>
        </hgroup>
      </div>
      </header>

      <div class="content">
          <!-- content --><br><br><br>
      </div>

    </div>
    <div class="small-3 large-3 column">
      <aside class="sidebar">  
        <!-- sidebar with full height -->
      </aside>
    </div>    
</div>

Styling The Navigation Bar

Let us add the following styles in our custom.css:

@media only screen and (min-width: 640px) {

    .top-bar {
        border-top-left-radius: 3px;
        box-shadow: -3px 0 3px -3px #000 inset;
    }
    .top-bar-section ul {
        background: none;
    }
    .top-bar-section > ul > li:first-child > a{
        border-top-left-radius: 3px;        
    }
    .top-bar-section .has-dropdown > a:after {
        border-color: #555 transparent transparent;
    }
    .top-bar-section .has-dropdown:hover > a:after {
        border-color: #eee transparent transparent;
    }
    .top-bar-section ul li.active > a {
        background: #008CBA;
    }
    .top-bar-section li a:hover:not(.button) {
        background: #008CBA;
    }
    .top-bar-section .has-dropdown:hover > a {
        background: #008CBA;
    }
    .top-bar-section .divider,.top-bar-section > ul > .divider {
        border: 1px solid #ccc;
    }
}

First two rules are pretty simple, third rule will add a 3px radius to the first a element. Fourth rule will make the dropdown icon a bit darker, fifth rule will make the icon brighter upon hovering.

Download HTML Download CSS

That’s all for now, I am really looking forward to your suggestions please leave a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.