Build responsive websites with foundation from ZURB

→ Are you a new visitor? Please visit the page guidance for new visitors ←

Build responsive websites with foundation from ZURB

Mobile platform is rising in these days. More and more users are adopting these platforms for usage or development. We live in a world where speed is important, and we connect from our mobile phone to solve problems that we normally do from a desktop machine. In this case, you want to develop websites and applications that can manage this situations.

What is responsive ?

Responsive means when you enter on a website from a desktop machine and it looks in a way, and when you change the window width the website is changing his content and sizes.  You can see an example here (resize the browser’s screen).

How to develop responsive websites ?

You can take advantage of media queries. All modern browsers have support for that, or you can use a framework for this that does this job for you. First of all, let’s see what is a media query and how that works.

What are media queries ?

Media queries are css declarations for different window sizes. Basically the concept behind them is that you tell your website how to manage his css based on different screen sizes.

An example o media query is the following one:

The above example tells your browser to render the body tag different for the devices with the resolution smaller than 699 pixels. The above ones will not take the same characteristics defined in the media query, but the others defined outside it.

We will not go deep into this, you can check some examples of media queries for different screen resolutions here, and all over the web.

Foundation ZURB

The same effect can be obtained with a well written framework called Foundation. The official website is here. It is pretty well documented, you can read all about that in the documentation pages.

Instead of writting media queries, you write classes on html elements that are designed to respond differently for each device. You have three main classes that you can use. One is for large screen resolutions, one for medium, and other one for small.

This framework is built on the grid principle. You just have to imagine your website sliced in 12 columns vertically. And then you have classes for building the elements. Let’s see an example.

The above example contains three divs wrapped in the common foundation class called “row”. A row is taking full width resolution, so you can call it a 12 columns row. Inside it, we have three divs that should take also twelve columns in total, but being three, you need to split them as you want. If you want that all of them to be equal, you give them large-4 classes, so three divs each of four columns equals twelve, right ? You can split them however you want, so that could be two divs of six columns size, or four divs of three columns. You get it ? It is as simple as that!

You noticed also that we used besides “large-x” class, a “small-x” class for our divs. The point of this is that you can define an element to have four columns for large devices (desktop, laptop, etc) and other values for small devices (tablets portrait, cellphones, etc). This gives you huge power in your hands when comes to developing applications.

You can use also visibility classes like “hide-for-small” or “hide-for-large”. I think you get what you can do with those right ? You can define which div is shown for different screen resolutions, so if we give to our first div a class of “hide-for-small”, when we resize the screen, or enter for a mobile device on the website, that div will not be shown, so the website will look different.

The only way you can learn to use this framework is to play with it a lot. Start by making a small registration form for all devices. That could be a good starting point to get you going.

Besides the grid system, foundation framework comes with a lot of great tools for developing complex and modern websites. You can obtain dialog modals, tooltips, slideshows,  dropdown buttons, ui buttons, and other cool stuffs only by giving to an html element a certain class. Pretty cool ha?

Here is an example of websites obtained with this framework : Responsive websites.

Summary

So until now you should have a good understanding of that a media query is and how to toy with foundation zurb framework. The only thing that remains is to start using them and create cool applications.

Request an article ←