Warning: A non-numeric value encountered in /home/ricston2/public_html/blogarchive/wp-content/themes/Divi/functions.php on line 5766

To increase productivity in a web project team it is good to start off from a web framework. I’ve been using Foundation since version 2 and this latest version 5 is simply awesome. It provides ways to make your sites immediately more flexible and responsive without much effort. Now in order to use it you will have to accept that it does not support IE versions less than IE 9.

Note: before you try these examples you need to have Foundation setup on your server. The simplest way is to just download a customised version (to your own tastes, or just go with the default settings/colours) and then extract the contents onto your server, and use one of the templates as described below.

Here is a list (by no means exhaustive) of some cool features in Version 5 of Foundation:

1 Out of the box and responsive templates

A great way for your team to immediately get started with Foundation is to use one of their ready made templates. They present a generous selection of site layouts and quickly show you how to get up to speed with the Foundation styles.

2 Grids

These are one of the primary reasons that I use framework like foundation. Grids provide an easy way for you to layout your page, breaking free from messing about with floats and clears. They also make it really easy to have multi-row, differing widths grid layouts. All you need is to declare them like this:

To see them in action click here.

3 Block grids

These are handy CSS classes for displaying items in a ‘grid like’ row by column fashion.

To see them in action click here.

4 Off canvas menu

This is a handy tool when you want to have an extra menu but don’t have the space for it. It works by positioning a button next to a div which when clicked reveals a hidden menu.

To see it in action click here.

5 Orbit slider

If you need to show images in a slide-show, Orbit is an easy, powerful and responsive image slider that allows users to swipe on touch-enabled devices, while supporting the desktop. All you need is a properly classed <ul> and a series of <li> and your ready to go.

To see it action see click here.

6 Topbar

The Topbar provides a handy out of the box nav bar that supports multiple nestings of sub navs and is a great way to display a complex navigation bar on small, medium or large screens.

7 Progress bars

A simple way to add progress bars to your layouts. You only need two HTML elements to make them and they’re easy to customize.

To see it action click here.


Well that’s just a taste of what foundation can do! If you are interested in improving your teams web workflow I would definitely recommended you giving foundation a spin.