Build responsive sites with Foundation
Discover how to take advantage of the latest feature-rich version of Foundation 5.0 to develop fast-loading, responsive sites.
As its name suggests, Foundation is primarily used as a foundation for any responsive website project. It is a lightweight framework packed with rich features designed to quickly develop fast-loading, responsive websites. When designing responsive sites, the mobile-first approach springs to mind as the smartest way to build – and this is something Foundation has taken into account in its latest iteration.
When ZURB was building the new Foundation 5.0, the main priority it had in mind was to redevelop the framework for optimum speed. Interchange – the responsive image solution – is now built directly into the framework. You can also now use any kind of content type, including images, CSS and video, and it will be downloaded directly in the appropriate format for the device type.
On top of this, it is now possible to create different HTML partials, and Interchange will swap out the correct content type for the appropriate device. jQuery 2.0 has replaced the Zepto.js library for better performance. The new off-canvas navigation is now part of the core 5.0, with CSS animations. There are also a ton of hardware accelerations, making a Foundation 5.0 lightning-fast compared to its predecessors.
Other noticeable updates to this new release include a medium grid size, the inclusion of fastclick.js to provide mobile users with a snappier experience, Bower upgrade manager, Sublime Text package to automatically scaffold your new components in your project, and much more. Using the new Foundation 5.0, we can learn to quickly build a responsive website.
Download and Setup
First, head over to ZURB's website and download the latest version of Foundation. At the time of writing, the newest release was version 5.3, which is the version we'll be using in this tutorial. Foundation gives you the option of writing your CSS in pure CSS or Sass. To allow beginners to follow this tutorial we'll be using traditional CSS.
Once you have downloaded Foundation, extract it and open up the index.html. This HTML document already has most of the structure set up, including the Foundation stylesheets and other necessary libraries. Let's go ahead and delete everything after the opening <body> tag all the way down to just above the jQuery library at the footer of the document. We'll add in our own custom style sheet in the <head>
<link rel="stylesheet" href="css/style.css" />Now we're ready to get started.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
Responsive caroursel
Let's start off with giving our website immediate impact by adding in a JavaScript-based carousel. Foundation has its own built-in responsive image slider called Orbit, which has been deprecated since the new version 5.3.
Instead, there are a few third-party image sliders that work extremely well with Foundation, including Owl Carousel and Slick. I'll use Owl for this. Download the plugin, and once extracted, we want to load the plugin files, starting with the CSS:
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/owl.theme.css">Owl Carousel requires jQuery 1.7, but Foundation already has this library supplied for us, so we will only need to include the JS plugin at the bottom of our HTML document just before the </body> tag.
Now let's build the actual responsive slider:
<div id="owl" class="owl-carousel owl-theme">
<div class="item">
<h1>Foundation Framework</h1>
<img src="img/slider-1.jpg" alt=“Cityscape>
</div>
<div class="item"><img src="img/slider-2.jpg" alt=""></div>
<div class="item"><img src="img/slider-3.jpg" alt=""></div>
</div>Then we just need to call the Owl initialiser function:
$(document).ready(function() {
$("#owl").owlCarousel({
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
});
});Let's add some styling to our carousel:
#owl .item img{
position: relative;
display: block;
width: 100%;
height: auto;
z-index:10;
}We've given this a relative position because we want to place a H1 on top of the carousel image. Let's position our H1 and then add in some typography styling:
#owl .item h1 {
position: absolute;
top: 40%;
left: 27%;
z-index: 20;
margin:0;
color: #ffffff;
text-align: center;
font-weight: 900;
font-size: 450%;
text-transform: uppercase;
letter-spacing: 10px;
}Navigation and grids
One of the great benefits of using a framework such as Foundation is that it comes bundled with its own grid system. This makes laying out and structuring content a breeze.
The best part of the grid system is that it comes fully responsive and optimised for multiple device types. To use the grid system, we just need to wrap our content in a containing div called row. This creates our horizontal block.
Then, to create our vertical columns we use the div class called columns. We can then specify the grid column we want – so, if we're after a large column, we just add in the class large-12.
Within our grid system, start by opening a nav tag and give this a data attribute of data-topbar. Within our nav tag open up an list. The first list item will be used as our burger menu on a mobile device, and this will not be seen by a desktop browser.
<ul class="title-area">
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>Directly below this we can open up a section tag with a top-bar-section class. Make sure you have the correct classes applied. The top bar component has a lot of magic happening in the JS, and these classes help to provide presentational styles to define the look and feel of the site.
Within our <section> tag we can create a new unordered list with a class of left in order to position this to the left-hand side of our navigation. To implement a drop-down menu, we can just add the class has-dropdown to our <li> and Foundation will do the rest of the hard work for us.
<section class="top-bar-section">
<ul class="left">
<li><a href="#">Home</a></li>
<li class="has-dropdown"><a href="">About</a>
<ul class="dropdown">
<li><a href="#">Page 1</a></li>
</ul>
</li>
</ul>
</section>Tabs
To neatly organise lots of different types of content into a singular container we can use tabs. Foundation has a Tabs component to enable us to easily switch between items within the container.
To begin with, we'll wrap our tabs within a row container, followed by a large-12 and columns class to set up our grid layout. Using an <ul>, we give this a class of tabs, followed by a data attribute of data-tab.
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1-1">About the Company</a></li>
<li class="tab-title"><a href="#panel1-2">Our Goals</a></li>
<li class="tab-title"><a href="#panel1-3">Expert Knowledge</a></li>
<li class="tab-title"><a href="#panel1-4">Customer Support</a></li>
</ul>Each of our list items will have a class of tab-title , and each one will act as our title for our tab navigation. The first tab will have an active class to be set as our default tab on page load. In order to create our content for each tab item, we simple create a div with tabs-content and within this give it an ID of panel1-1 to reference to the associated tab.
<div class="tabs-content">
<div class="content active" id="panel1-1">
<!— Content —to go here —>
</div>
</div>Lightbox Gallery
One of the fancy features in the Foundation framework is that we can easily build images of variable heights images into a responsive lightbox gallery. Simply create an unordered list with the predefined class clearing-thumbs and the data-attribute , then we just need to specify the large image and the thumbnail image within a <li>.
<ul class="clearing-thumbs" data-clearing>
<li><a href="img/gallery-large-1.png"><img src="img/gallery-thumb-1.png"></a></li>
<li><a href="img/gallery-large-2.png"><img src="img/gallery-thumb-2.png"></a></li>
</ul>Now, when you click on the thumbnail it will expand into a photo gallery in a lightbox.
Pricing table
For any awesome site that includes a subscription-based product, you'll want to add a pricing table. Foundation's pricing table is simple to implement and comes fully responsive. Within a row container, create a <ul> with a class of pricing-table , and in our <li> item we can give specific class names to apply special styles to certain content.
<div class="large-4 columns">
<ul class="pricing-table">
<li class="title">Personal</li>
<li class="price">£10.99 per month</li>
<li class="bullet-item">Managed upgrades</li>
<li class="cta-button"><a class="button" href="#">Host my website</a></li>
</ul>
</div>If we duplicate the above three times, the content will be neatly aligned, and as we reduce the window screen size it will automatically scale to fit the monitor resolution.
Email subscription form
Writing your own script to validate your form can be time-consuming and tricky at times, but luckily Foundation provides us with a powerful and versatile form layout system, with Abide – a HTML5 form validation library.
To use Abide, add the attribute data-abide to your form element. For any mandatory input fields, add the required attribute to it. Below each label we can associate a small tag that contains our chosen error message.
<form data-abide>
<fieldset class="large-6 large-offset-3 columns">
<legend>Newsletter Sign Up</legend>
<label>Name:
<input type="text" placeholder="Your Name" required />
</label>
<small class="error">Please enter your name</small>
<label>Email:
<input type="email" placeholder="your@email.com" required />
</label>
<small class="error">Please enter your email address</small>
<input id="checkbox1" type="checkbox"><label for="checkbox1">Third Party Promotional Emails</label>
<button type="submit">Submit</button>
</fieldset>
</form>Button styles are also predefined in Foundation – the framework really does all the heavy lifting, while we can just use the components available to lay out our page. We can finish off our website by adding a much-needed footer.
<footer id="footer">
<div class="row">
<div class="large-6 columns">
<nav>
<ul>
<li><a href="#">Home</a></li>
</ul>
</nav>
</div>
<div class="large-6 columns copyright>
<p>Copyright info</p>
</div>
</div>
</footer>Some simple styling for our footers:
#footer {
background-color: #e3e7e9;
}
#footer ul {
padding-top: 10px;
}
#footer ul li {
display: inline-block;
margin:0 15px 0 0;
}
#footer .copyright {
padding-top: 10px;
text-align: right;
}With minimal work we were able to quickly put together a responsive, grid-based website. ZURB's Foundation framework is easy to use, powerful and provides the flexibility to prototype and build production-ready websites for any device.
Words: Steven Wu
Steven Wu is an expert in Magento, WordPress theme, and front-end development. Follow him on Twitter @designtodevelop.
Like this? Read these!
- How to build an app: try these great tutorials
- Brilliant Wordpress tutorial selection
- How to use an HTML boilderplate
Have you found any great tutorials or Foundation resources? Let us know about your experiences in the comments!
Thank you for reading 5 articles this month* Join now for unlimited access
Enjoy your first month for just £1 / $1 / €1
*Read 5 free articles per month without a subscription
Join now for unlimited access
Try first month for just £1 / $1 / €1
The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.
