Zurb Foundation – an Overview

Exclusive offer: get 50% off this eBook here
Getting Started with Zurb Foundation 4

Getting Started with Zurb Foundation 4 — Save 50%

Design and build professional websites with Zurb Foundation's mobile-first responsive framework with this book and ebook.

$20.99    $10.50
by Andrew D. Patterson | November 2013 | Open Source Web Development

Every web architect, designer, or builder needs a toolkit. From text editors to graphic programs, from table structures to fluid style sheets, the web designer has many tools and techniques to choose from. In this article by Andrew D. Patterson, author of Getting Started with Zurb Foundation 4, we will see how Zurb's Foundation framework can be used as an excellent kit for today's web layout. It's fluid and it's easy to work with. It has an excellent grid system and has over two dozen CSS components and JavaScript plugins.

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

Most importantly, you can apply your creativity to make the design your own. Foundation gives you the tools you need for this. Then it gets out of the way and your site becomes your own. Especially when you advance to using the Foundation's SASS variables, functions and mixins, you have the ability to make your site your own unique creation.

Foundation's grid system

The foundation (pun intended) of Zurb Foundation is its grid system—rows and columns—much like a spread sheet, a blank sheet of graph paper, or tables, similar to what we used to use for HTML layout. Think of it as the canvas upon which you design your website.

Each cell is a content area that can be merged with other cells, beside or below it, to make larger content areas. A default installation of Foundation will be based on twelve cells in a row. A column is comprised of one or more individual cells.

Lay out a website

Let's put Foundation's grid system to work in an example. We'll build a basic website with a two part header, a two part content area, a sidebar, and a three part footer area. With the simple techniques we demonstrate here, you can craft mostly any layout you want.

Here is the mobile view

Foundation works best when you design for small devices first, so here is what we want our small device (mobile) view to look like:

This is the layout we want on mobile or small devices. But we've labeled the content areas with a title that describes where we want them on a regular desktop. By doing this, we are thinking ahead and creating a view ready for the desktop as well.

Here is the desktop view

Since a desktop display is typically wider than a mobile display, we have more horizontal space and things that had to be presented vertically on the mobile view can be displayed horizontally on the desktop view.

Here is how we want our regular desktop or laptop to display the same content areas:

These are not necessarily drawn to scale. It is the layout we are interested in.

The two part header went from being one above the other in the mobile view to being side-by-side in the desktop view. The header on the top went left and the bottom header went right. All these make perfect sense.

However, the sidebar shifted from being above the content area in the mobile view and shifted to its right in the mobile view. That's not natural when rendering HTML. Something must have happened!

The content areas, left and right, stayed the same in both the views. And that's exactly what we wanted.

The three part footer got rearranged. The center footer appears to have slid down between the left and right footers. That makes sense from a design perspective but it isn't natural from an HTML rendering perspective.

Foundation provides the classes to easily make all this magic happen.

Here is the code

Unlike the early days of mobile design where a separate website was built for mobile devices, with Foundation you build your site once, and use classes to specify how it should look on both mobile and regular displays.

Here is the HTML code that generates the two layouts:

<header class="row"> <div class="large-6 column">Header Left</div> <div class="large-6 column">Header Right</div> </header> <main class="row"> <aside class="large-3 push-9 column">Sidebar Right</aside> <section class="large-9 pull-3 columns"> <article class="row"> <div class="small-9 column">Content Left</div> <div class="small-3 column">Content Right</div> </article> </section> </main> <footer class="row"> <div class="small-6 small-centered large-4 large-uncentered push-4 column">Footer Center</div> <div class="small-6 large-4 pull-4 column">Footer Left</div> <div class="small-6 large-4 column">Footer Right</div> </footer>

That's all there is to it. Replace the text we used for labels with real content and you have a design that displays on mobile and regular displays in the layouts we've shown in this article.

Toss in some widgets

What we've shown above is just the core of the Foundation framework. As a toolkit, it also includes numerous CSS components and JavaScript plugins.

Foundation includes styles for labels, lists, and data tables. It has several navigation components including Breadcrumbs, Pagination, Side Nav, and Sub Nav. You can add regular buttons, drop-down buttons, and button groups.

You can make unique content areas with Block Grids, a special variation of the underlying grid. You can add images as thumbnails, put content into panels, present your video feed using the Flex Video component, easily add pricing tables, and represent progress bars.

All these components only require CSS and are the easiest to integrate. By tossing in Foundation's JavaScript plugins, you have even more capabilities.

Plugins include things like Alerts, Tooltips, and Dropdowns. These can be used to pop up messages in various ways.

The Section plugin is very powerful when you want to organize your content into horizontal or vertical tabs, or when you want horizontal or vertical navigation. Like most components and plugins, it understands the mobile and regular desktop views and adapts accordingly.

The Top Bar plugin is a favorite for many developers. It is a multi-level fly out menu plugin. Build your menu in HTML the way Top Bar expects. Set it up with the appropriate classes and it just works.

Magellan and Joyride are two plugins that you can put to work to help show your viewers where they are on a page or to help them navigate to various sections on a page.

Orbit is Foundation's slide presentation plugin. You often see sliders on the home page of websites these days. Clearing is similar to Orbit except that it displays thumbnails of the images in a presentation below the main display window. A viewer clicks on a thumbnail to display the full image. Reveal is a plugin that allows you to put a link anywhere on your page and when the viewer clicks on it, a box pops up extra content, which could even be an Orbit slider, is revealed.

Interchange is one of the most recent additions to Foundation's plugin factory. With it you can selectively load images depending on the target environment. This lets you optimize bandwidth between your web server and your viewer's browser.

Foundation also provides a great Forms plugin. On its own it is capable. With the additional Abide plugin you have a great deal of control over form layout and editing.

Summary

As you can see, Foundation is very capable of laying out web page for mobile devices and regular displays. One set of code, two very different looks. And that's just the beginning.

Foundation's CSS components and JavaScript plugins can be placed on a web page in almost any content area. With these widgets you can have much more interaction with your viewers than you otherwise would.

Put Foundation to work in your website today!

Resources for Article:


Further resources on this subject:


Getting Started with Zurb Foundation 4 Design and build professional websites with Zurb Foundation's mobile-first responsive framework with this book and ebook.
Published: November 2013
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Andrew D. Patterson

Andrew D. Patterson offers services through his own firm Patterson Research Inc., where he provides IT consulting, research, and writing services. He can be available on site in Atlantic Canada and throughout the world, anywhere the Internet reaches.

One of his projects was to help the Internet reach the South Pole.

His entire career has involved technology, from his early days of servicing cash registers to software engineering and consulting. He has worked as a requirements architect, designer, or builder on numerous business and government applications. He understands business, software, and technology. He has worked on both large and small projects. Clients appreciate his independent and thorough perspective when delivering advice and solutions.

For the past 10 years, all of his projects have been Internet-based—from the design and building of websites to open source integrations, medical billing requirements, and business intelligence.

In addition to early electronics training, Andrew has earned a Bachelor of Science degree from the University of New Brunswick, Canada; and he has a Master of Mathematics degree from the University of Waterloo, Canada.

Although he has authored dozens of documents, from requirements ("what is to be") to specifications ("how it should be") and user help ("what is"), this is his first published book.

Books From Packt


 Instant Zurb Foundation 4 [Instant]
Instant Zurb Foundation 4 [Instant]

 Responsive Web Design by Example
Responsive Web Design by Example

 Instant Responsive Web Design [Instant]
Instant Responsive Web Design [Instant]

OpenLayers Cookbook
OpenLayers Cookbook

Responsive Web Design with jQuery
Responsive Web Design with jQuery

HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

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

 Instant OpenLayers Starter [Instant]
Instant OpenLayers Starter [Instant]


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
1
Q
y
8
Q
R
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