July 28, 2015 3:37 pm

How to Create a webpage with Zurb’s Foundation part 2

In the first part we did not discuss how to set up Foundation as the setup is really easy. If you do not plan to use the JavaScript features of Foundation, you only have to download it and add their stylesheet in your <head> tag. If you intend to use the JavaScript features you first have to load jQuery, then the Foundation’s js file as well.

How to Create a webpage with Zurb's Foundation

Here is how you load both:

If you want to use the JavaScript features you would also have to initialize Foundation by adding the following script:

Quotes

Foundation adds automatically styles to most HTML tags. If you want a nicely styled quote you can use the <blockquote> tag and nest a <cite> tag in it that mentions the author of the quote.

Here is how we added it:

Product listings

You can use Foundation’s class pricing-table with an unordered list (<ul>) to create beautiful pricing tables. In the ul you can add list items (<li>) with classes such as title (for the title of the product),price (for its price), description (for a longer description of the product), bullet-item (for generic list items that depict characteristics of the product).

We have added a row with 4 products. Here is the markup for one of them:

You can see we create a div that spans across the entire area and in it we add 3 divs that take 3 columns each.

Pagination

We place the product’s pagination near the center of the products through medium-offset-4 medium-5 classes. To create a pagination, you create an unordered list (<ul>) with a class of pagination and inside it place list items with anchors. Adding a class named unavailable to the list item will make it unclickable. Adding a class of current to the list item will highlight it (used for showing the user which page he is on).

Here is our markup:

Responsive video

With Foundation, the only thing you need to do to make a video responsive is to wrap it within the class flex-video. It will automatically scale to take the proportions you set up in the grid and it will keep the proper ratio.

Here is an example video from YouTube that we added:

To build the footer, we use a <dl> with the class of sub-nav.
The company’s name is in a <dt> tag and we place all other items as <dd>.
In the footer, we place all links located in the main menu but with a smaller emphasis and we add a copyright notice.

Here is the excerpt:

Conclusion

If you have started to like Zurb’s Foundation (and you should) visit their documentation and practice building user interfaces with it. I find it a really good alternative to Twitter’s Bootstrap.

There are many interesting JavaScript features in Foundation that we have not discussed such as Joyride which allows you to give instructions to users on how to use your website one they enter.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories: