News

How to build a responsive template with Foundation

Get started using Zurb’s Foundation framework to build a responsive template that can be reused for any project

foundation900

foundation900

When starting a new responsive web design project, trying to custom develop your own framework that includes a flexible grid system, media queries, typography, JavaScript media including video, carousels, lightboxes and more can be exhausting.

Not to mention the rapidly changing web arena, you’ll have to rigorously maintain and update your framework to keep up to date with all the cool new features.

Using an open source framework like Foundation by Zurb helps to relieve the stress on developers. This robust and flexible framework is well documented and has a host of ready components to reuse; the best part is you can easily customise it, adding and removing functionality to suit your needs.  Foundation is built to be mobile first, so as soon as you start using this framework for your web project it’s instantly responsive.

Through this tutorial we’ll touch upon some of Foundation’s core components and how to assemble these to create your own custom template, which can be reused for any project.

DOWNLOAD TUTORIAL FILES

Download Foundation

To begin, navigate over to the Zurb Foundation framework website at foundation.zurb.com. Click on the ‘Download Foundation 5’ button and you will be presented with multiple choices to download Foundation. You can select from a complete package, lightweight, custom or Sass. In this tutorial we’ll be using pure CSS to allow beginners to follow along, so go ahead and download the complete version.

Unarchive the zip

Unarchive the Foundation framework you just downloaded; inside you will find a CSS directory that includes the complete Foundation CSS file and Normalize a CSS reset. Within the JS directory is the complete JavaScript library and scripts. The index.html has all the standard HTML5 boilerplate ready. Start by removing everything within the body tag.

HTML head

Within the HTML head we’ll add a custom Google Font called Cabin, which can be found and downloaded at www.google.com/fonts#UsePlace:use/Collection:Cabin. It’s good practice not to directly edit the foundation.css, which contains all the framework styles. We should house all our custom styles in a separate CSS file called style.css.

001     <link href=’http://fonts.googleapis.com/
css?family=Cabin:400,500’ rel=’
stylesheet’ type=’text/css’>
002     <link rel=”stylesheet” href=”css/
foundation.css” />
003     <link rel=”stylesheet” href=”css/style.
css” />

Basic styles

Now that we have our head of our HTML set up we can start applying some default styling. Create a new style.css in the CSS directory. Let’s change the default font colour to a dark grey and make sure all of our headings are now using the new Google font Cabin.

001    body {
002        color: #666;
003    }
004    h1, h2, h3, h4, h5, h6  {
005        font-family: ‘Cabin’, ‘sans-serif’;
006        font-weight: 500;
007        color: #666;
008    }

Build the navigation

Create a <nav> wrapper and within this have a <ul> with a <li> item for the main title, with a second <li> for the mobile menu (this will only appear on a small mobile screen). The top-bar class is used for presentational purposes, the data-option stick_on will force the navigation to stick to the top of the browser window.

001    <nav class=”top-bar” data-topbar data-
options=”     sticky_on: large”>
002            <ul class=”title-area”>
003                <li class=”name”>
004                    <h1> <a href=”#”>Foundation 
Custom Template</a></h1>
005                </li>
006                <li class=”toggle-topbar menu-
icon”><a href=”#”><span>Menu
</span></a></li>
007            </ul>
008    </nav>

Sub menu

Creating drop-down menus can sometimes be overly complex and tricky but Foundation makes the whole process very simple. Within the <nav> create a <section> with the class top-bar-section. Within this we create a <ul> and our <li> items, making sure to add the class has-dropdown to act as our secondary menu.

001    <section class=”top-bar-section”>
002            <ul class=”left”>
003                <li class=”has-dropdown”>
004                    <a class=”active” href=”#”>
Main Item 1</a>
005                    <ul class=”dropdown”>
006                        <li><a href=”#”>Dropdown 
Option</a></li>
007                    </ul>
008                </li>
009            </ul>
010        </section>

Style the menu

The beauty of an advanced framework such as Foundation is that it provides a lot of default styling for us, which means we can concentrate on structuring our page and customising our styling a lot less. You will notice the menu will have its own custom styling already. We’ll just add a drop shadow with some browser vendor prefixes.

001    .top-bar {
002        -webkit-box-shadow: 0px 3px 7px 0px rgba
(50, 50, 50, 0.75);
003        -moz-box-shadow:    0px 3px 7px 0px rgba
(50, 50, 50, 0.75);
004        box-shadow:         0px 3px 7px 0px rgba
(50, 50, 50, 0.75);
005    }

Orbit slider plug-in

Creating a carousel slider is extremely simple when we use the Orbit slider plug-in. First we’ll wrap the code within a row class, followed by a large-12 columns grid to lay out our carousel. Apply a orbit-container class and a data- orbit data-attribute using a <li> item to separate each slide.

001    <div class=”row”>
002        <div class=”large-12 columns”>
003            <ul class=”orbit-container” 
data-orbit>
004                <li>
005                    <img src=”img/slides/slide-1.jpg” 
alt=”slider 1” />
006                    <div class=”orbit-caption”>
007                    Text to go here 
008                    </div>
009                </li>
010            </ul>
011            </div>
012        </div>

Orbit JavaScript

Before the ending </body> tag there is an initial Foundation JavaScript, simply used to call all plug-ins on the page. Using this we can customise the plug-in initialisation. We can configure the options for the Orbit plug-in, so let’s change the default slide effect to a fade animation and change the speed at which it rotates.

001    <script>
002            $(document).foundation({
003                orbit: {
004                    animation: ‘fade’,
005                    animation_speed: 500,
006                    time_speed: 1000, 
007                    pause_on_hover: true,
008                    bullets: false,
009                }
010            });
011        </script>

Basic content

The grid system is one of Foundation’s most powerful features, making it easy to create multi-device layouts. The row class is used to hold all the columns, defining a grid column of 12 indicates the number of columns we need in a row.  Below is a basic structure of content using the grid system.

001    <div class=”row main-content”>
002          <div class=”large-12 columns”>
003            <h1>Our latest work</h1>
004            <p>Lorem ipsum….</p>
005            <img src=”img/photo.png” alt=”” />
006          </div>
007        </div>
008        

foundation01950

Add a video

Adding a video is extremely easy. Foundation will automatically help you to scale your video from an intrinsic ratio, so you can guarantee it can be properly scaled and viewed on any device. Simply add the class flex-video as a containing <div> around your video.

001    <div class=”row”>
002                <div class=”large-6 columns”>
003                    <div class=”flex-video”>
004                        <iframe width=”560” height=”315”
src=”//www.youtube.com/embed/_ejeqxRdGwk” 
frameborder=”0” allowfullscreen></iframe>
005                    </div>
006                </div>
007        

Panel component

Let’s have some accompanying content next to our video. We’ll use another six-column grid and to add components that help outline sections on a page we can use the panel component. All you have to do is create a wrapping <div> called panel encasing your content and Foundation will automatically apply a border and background colour to this panel.

001     <div class=”large-6 columns”>
002    <div class=”panel”>
003            <p>Lorem ipsum ….</p>
004        </div>
005    </div>

Lightbox gallery

To build a lightbox gallery of photos to slide through with a variable height, we can use the Clearing plug-in. Again, wrap the code in a row class with the grid columns, open a <ul> and apply a class of clearing-thumbs and a data-attribute of data-clearing. Each <li> item will act as a separate photo slide.

001    <div class=”row gallery”>
002            <div class=”large-12 columns”>
003                <h2>Gallery</h2>
004                <p>View our latest photos</p>
005                <hr />
006                <ul class=”clearing-thumbs” 
data-clearing>
007                    <li>
008                        <a href=”img/photo.jpg”>
009                            <img src=”img/photo.jpg” 
alt=”” data-caption=”Text to go here” />
010                        </a>
011                    </li>
012                </ul>
013            </div>
014    </div>

Gallery styles

Let’s apply some styling to the gallery. We’ll give this section a light grey background and some top and bottom padding. Each <li> item will have a bottom and right margin so they’re equally separated. Using the CSS pseudo class first-child we can give the first <li> item a margin-left.

001    .gallery {
002        padding: 20px 0;
003        background-color: #f2f2f2;
004    }
005    .clearing-thumbs li {
006        margin: 0 20px 20px 0;
007    }
008    .clearing-thumbs li:first-child {
009        margin-left: 10px;
010    }

Common styles

To create a uniformed look and give all our elements equal spacing, we’ll style the main content, gallery and the subsequent contact form (in the following step) with some margin and make the content aligned centre. If you ever use Sass with Foundation, you can always use the @extend for this case.

001    .main-content, .gallery, .contact-us {
002        margin-bottom: 30px;
003        text-align: center;
004    }

Contact form

Creating user-friendly and HTML5 validation-ready forms is wonderfully simple in Foundation. Let’s create a contact form: first, open a <form> tag and within this give it a data-abide data-attribute to enable validation. Make sure the input field has a required attribute with a pattern to define restraints on what users should input.

001        <form data-abide>
002            <div class=”name-field”>
003                <label>Name:
004                    <input type=”text” placeholder=”
James Smith” required pattern=”                        [a-zA-Z]+” />
005                    </label>                  
006                </div>
007            </form>

Error message

If you do not fill out the input field or input the incorrect data this will return an error. However this does not display an error message to the user, which is not helpful. To apply an error message, add a <small> tag with the class error and place your error message within this.

001        <small class=”error”>Please enter your 
name</small>

Email input

It’s the same markup again to set the email input field, but instead of using the pattern attribute as we did previously, we can use the input type attribute and place the pattern name within this to help validate our input field. To set an error message below this within the same <div>, add the <small> tag with the class error.

001    <div class=“email-field”>
002        <label>Email:
003            <input type=”email” placeholder=
”james@email.com” required />
004        </label>
005        <small class=”error”>
Please enter your email</small>
006    </div>

Message field

A contact form would not be complete without a message field. Similarly to our input fields we created previously, and using the same <div> structure, we will place a <textarea> in place of the input field. Again, apply an error message directly below this. Following this we also add a Submit button to finish it off.

001    <div class=“message-field”>
002        <label>Message:
003            <textarea placeholder=”Enter your 
comments here” required></textarea>
004        </label>
005        <small class=”error”>Please enter your 
comments</small>
006    </div>
007    <button type=”submit”>Submit</button>

Form styles

Now with our HTML structure of our contact form completed, we can look at applying some styling. Because Foundation has a lot of in-built default styles, we don’t need to heavily customise the form styling – and it’s already responsive. We will just make sure the labels are aligned to the left and provide an explicit height for the <textarea> field.

001    label {
002        text-align: left;
003        color: #666;
004    }
005    textarea {
006        height: 200px;
007    }

Build the footer

No website template would be complete without a footer. Let’s add a <footer> tag that wraps the footer content inside. Again we’ll need to dictate a row class and wrap a large-12 columns grid within our content. We will then separate the footer to two equal halves using two children large-6 column grids.

001    <footer class=”row”>
002            <div class=”large-12 columns”>
003                <hr />
004                <div class=”large-6 columns”>
005                    <p>&copy;Copyright notice to go 
here</p>
006                </div>
007                <div class=”large-6 columns”>
008                    <ul class=”inline-list right”>
009                        <li>
010                            <a href=”#”>Link 4</a>
011                        </li>
012                    </ul>
013                </div>
014            </div>
015        </footer>

Style the footer

Finally we’ll style our footer. Let’s give this a gradient background colour of a light black fading into a dark black. Included are some browser vendor prefixes. And that’s all it takes! We’ve quickly constructed our own custom template using the Foundation framework and haven’t had to write our own components, with minimal styling involved.

001    footer {
002        color: #fff;
003        background: rgb(43, 43, 43);
004        background: -moz-linear-gradient(90deg, 
rgb(43, 43, 43) 30%, rgb(29, 29, 29) 70%);
005        background: -webkit-linear-gradient
(90deg, rgb(43, 43, 43) 30%, rgb
(29, 29, 29) 70%);
006        background: linear-gradient(180deg, rgb
(43, 43, 43) 30%, rgb(29, 29, 29) 70%);
007    }

Improve your web design skills with Web Designer. Download issues direct from GreatDigitalMags.com or buy print issues from ImagineShop

×