Quick start – using Foundation 4 components for your first website

Exclusive offer: get 50% off this eBook here
Instant Zurb Foundation 4 [Instant]

Instant Zurb Foundation 4 [Instant] — Save 50%

Get up and running in an instant with Zurb Foundation 4 Framework with this book and ebook

$12.99    $6.50
by Carlos Azaustre Jorge Arévalo | October 2013 | Open Source Web Development

Foundation 4 provides a set of UI elements to construct our websites. In this article by Jorge Arévalo and Carlos Azaustre, the authors of the book Instant Zurb Foundation 4, we will show you how to use some of them in our websites. Specifically, we will see the following two elements:

  • The Grid
  • The navigation Bar
  • Buttons

(For more resources related to this topic, see here.)

 

Step 1 – using the Grid

The base building block that Foundation 4 provides is the Grid. This component allows us to easily put the rest of elements in the page. The Grid also avoids the temptation of using tables to put elements in their places. Tables should be only used to show tabular data. Don't use them with any other meaning. Web design using tables is considered a really terrible practice.

Defining a grid, intuitively, consists of defining rows and columns. There are basically two ways to do this, depending on which kind of layout you want to create. They are as follows:

  • If you want a simple layout which evenly splits contents of the page, you should use Block Grid . To use Block Grid, we must have the default CSS package or be sure to have selected Block Grid from a custom package.
  • If you want a more complex layout, with different sized elements and not necessarily evenly distributed, you should use the normal Grid. This normal Grid contains up to 12 grid columns, to put elements into.

After picking the general layout of your page, you should decide if you want your grid structure to be the same for small devices, such as smartphones or tablets, as it will be on large devices, such as desktop computers or laptops.

So, our first task is to define a grid structure for our page as follows:

  1. Select how we want to distribute our elements. We choose Block Grid, the simpler one. Consequently, we define a <ul> element with several <li> elements inside it.
  2. Select if we want different structure for large and small screens. We Yes .This is important to determine which Foundation 4 CSS class our elements will belong to.

As result, we have the following code:

<ul class="large-block-grid-4"> <li><img src ="demo1.jpg"></li> <li><img src ="demo2.jpg"></li> <li><img src ="demo3.jpg"></li> <li><img src ="demo4.jpg"></li> </ul>

The key concept here is the class large-block-grid-4. There are two important classes related to Block Grid:

  • Small-block-grid : If the element belongs to this class, the resulting Block Grid will keep its spacing and configuration for any screen size
  • Large-block-grid : With this, the behavior will change between large and small screen sizes. So, large forces the responsive behavior.

You can also use both classes together. In that case, large overrides the behavior of small class. The number 4 at the end of the class name is just the number of grid columns.

The complete code of our page, so far is as follows:

<!DOCTYPE html> <!--[if IE 8]><html class="no-js lt-ie9" lang="en" ><![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]--> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <title>My First Foundation Web</title> <link rel="stylesheet" href="css/foundation.css" /> <script src ="js/vendor/custom.modernizr.js"></script> <style> img { width: 300px; border: 1px solid #ddd; } </style> </head> <body> <!-- Grid --> <ul class="large-block-grid-4"> <li><img src ="demo1.jpg"></li> <li><img src ="demo2.jpg"></li> <li><img src ="demo3.jpg"></li> <li><img src ="demo4.jpg"></li> </ul> <!-- end grid --> <script> document.write('<script src =' +

('__proto__' in {} ? 'js/vendor/zepto'

: 'js/vendor/jquery') + .js><\/script>') </script> <script src ="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html>

We have created a simple HTML file with a basic grid that contains 4 images in a list, using the Block Grid facility. Each image spans 4 grid columns.

The following screenshot shows how our page looks:

Not very fancy, uh? Don't worry, we will add some nice features in the following steps.

We have way more options to choose from, for the grid arrangements of our pages. Visit http://foundation.zurb.com/docs/components/grid.html for more information.

Step 2 – the navigation bar

Adding a basic top navigation bar to our website with Foundation 4 is really easy. We just follow steps:

  1. Create an HTML nav element by inserting the following code:

    <nav class="top-bar"></nav>

  2. Add a title for the navigation bar (optional) by inserting the following code:

    <nav class="top-bar"> <ul class="title-area"> <li class="name"> <h1><a href="#">My First Foundation Web</h1> </li> <li class="toggle-topbar"> <a href="#"><span>Menu</span></a> </li> </ul> </nav>

  3. Add some navigation elements inside the nav element

    <nav class="top-bar"> <!--Title area --> <ul class="title-area"> <li class="name"> <h1><a href="#">My First Foundation Web</h1> </li> <li class="toggle-topbar"> <a href="#"><span>Menu</span></a> </li> </ul> <!-- Here starts nav Section --> <section class="top-bar-section"> <!-- Left Nav Section --> <ul class="left"> <li class="divider"></li> <li class="has-dropdown"><a href="#">Options</a> <!-- First submenu --> <ul class="dropdown"> <li class="has-dropdown"><a href="#">Option 1a</a> <!-- Second submenu --> <ul class="dropdown"> <li><label>2nd Options list</label></li> <li><a href="#">Option 2a</a></li> <li><a href="#">Option 2b</a></li> <li class="has-dropdown"> <a href="#">Option 2c</a> <!-- Third submenu --> <ul class="dropdown"> <li><label>3rd Options list</label></li> <li><a href="#">Option 3a</a></li> <li><a href="#">Option 3b</a></li> <li><a href="#">Option 3c</a></li> </ul> </li> </ul> </li> <!-- Visual separation between elements --> <li class="divider"></li> <li><a href="#">Option 2b</a></li> <li><a href="#">Option 2c</a></li> </ul> </li> <li class="divider"></li> </ul> </section> </nav>

    Interesting parts in the preceding code are as follows:

    • <li class="divider">: It creates a visual separation between the elements of a list
    • <li class="has-dropdown">: It shows a drop-down element when is clicked.
    • <ul class="dropdown">: It indicates that the list is a drop-down menu.

    Apart from that, the left class, used to specify where we want the buttons on the bar. We would use right class to put them on the right side of the screen, or both classes, if we want several buttons in different places.

Our navigation bar looks like the following screenshot:

Of course, this navigation bar shows responsive behavior, thanks to the class toggle-topbar-menu-icon. This class forces the buttons to collapse in narrower screens. And it looks like the following screenshot:

Now we know how to add a top navigation bar to our page. We just add the navigation bar's code before the grid, and the result is shown in the following screenshot:

Summary

In this article we learnt how to use 2 of the many UI elements provided to us by Foundation 4, the grid and the navigation bar. The screenshots provided help in giving a better idea of how the elements look, when incorporated in our website.

Resources for Article :


Further resources on this subject:


Instant Zurb Foundation 4 [Instant] Get up and running in an instant with Zurb Foundation 4 Framework with this book and ebook
Published: September 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Carlos Azaustre

Carlos Azaustre is a freelance frontend developer with several years' experience in web development, graphic design, and entrepreneurial projects. He has a BS in Telematics Engineering issued by UC3M in Spain and an MS in Web Technologies issued by UCLM in Spain. He has a technical blog, http://carlosazaustre.es, where he writes in Spanish about web technologies. You can follow him on Twitter at @carlosazaustre.

"We've hired Carlos a couple of times for implementing user interfaces for small web applications. He was responsible for creating HTML and CSS from the graphical specifications we provided. He presented good skills in HTML5 and CSS3. Carlos was very responsive and altogether a nice guy to work with. We can warmly recommend him for any web application frontend development work."
Jukka Aitokkaillo, CTO, StellarQ

"Carlos is an excellent graphic designer with brilliant web development skills, he is always willing to learn new stuff to improve his work, and never turns down a challenge. He is also one of the most creative persons I've ever known, and having him as a teammate was a real pleasure."
Luis Sánchez, Co-Founder and Product Manager, Spartanbits

Jorge Arévalo

Jorge Arévalo is a Computer Engineer from the Universidad Autónoma de Madrid, UAM. He started developing web applications using JS, PHP, and Python. In 2010, he began collaborating with the PostGIS and GDAL projects, after participating in GSoC 2009, creating the PostGIS Raster GDAL driver. He currently works as a freelance web/GIS developer, and collaborates with the geomati.co group in projects, such as gvSIG CE and QGIS. He also writes about Geographical Information Systems and open source at www.libregis.org.

"I worked with Jorge for a while. He acted as Scrum Master of our development team, where I was working as a designer. He is a great professional, with proven ability as developer and team manager. A good person and excellent colleague."
                                                                                                                                                                           Carlos Azaustre, web developer.

"Jorge is a great project engineer, an excellent workmate. His commitment and devotion makes him a very valuable person."
                                                                                                                                                   Victor Serrano, GMS System Integration Engineer

"A very organized, responsible, and hard working colleague. Jorge is very autonomous independent and has a strong technical background. He is the kind of person you can trust in."
                                                                                                                                          Diego Abia, Payload Data Ground Segment AIV Engineer

Other books that he is working on, are as follows:

  • PostGIS 2.0 Cookbook (PacktPub Ltd.), as a reviewer
  • OpenLayers Beginner's Guide (PacktPub Ltd.), as a reviewer

 

Books From Packt


Learning Modernizr
Learning Modernizr

Instant EaselJS Starter
Instant EaselJS Starter

Drupal 7 Development by Example Beginner’s Guide
Drupal 7 Development by Example Beginner’s Guide

Visual Studio 2012 Cookbook
Visual Studio 2012 Cookbook

HTML5 Canvas Cookbook
HTML5 Canvas Cookbook

HTML5 Data and Services Cookbook
HTML5 Data and Services Cookbook

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile
Dreamweaver CS6 Mobile and Web Development with HTML5, CSS3, and jQuery Mobile


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
x
e
F
t
H
n
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software