How to Create a webpage with Zurb’s Foundation part 2
Here is how you load both:
<head lang="en"> <meta charset="UTF-8"> <title>Beer Mugsy, Inc.</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link rel="stylesheet" href="foundation5/css/foundation.min.css"/> <script src="foundation5/js/foundation.min.js"></script>
<script> $(document).foundation(); </script>
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:
<div class="row"> <blockquote class="text-center"> We recommend the products of Beer Mugsy to everyone who drinks beer and values the experience delivered by a comfortable beer mug <cite> BeerLake </cite> </blockquote> <!-- MORE CONTENT FOLLOWS -->
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:
<div class="top-products columns large-12"> <div class="product columns large-3"> <ul class="pricing-table"> <li class="title">Muggy 2016</li> <li class="price">$124.01</li> <li class="description">This mug is the best choice when it comes to beer. The glass is reinforced so it will never break and it has a golden handle so it speaks about your social status.</li> <li class="bullet-item">Golden handle</li> <li class="bullet-item">Reinforced glass</li> <li class="cta-button"><a class="button expand success" href="#">Order it!</a></li> </ul> </div> <div class="product columns large-3"> <!-- NEXT PRODUCT -->
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.
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:
<div class="most-sold-pagination row"> <div class=" medium-offset-4 medium-5 columns"> <ul class="pagination"> <li class="arrow unavailable"><a href="">«</a></li> <li class="current"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li class="unavailable"><a href="">…</a></li> <li><a href="">50</a></li> <li><a href="">51</a></li> <li class="arrow"><a href="">»</a></li> </ul>
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:
<div class="columns large-6 large-offset-3"> <div class="flex-video"> <iframe width="420" height="315" src="https://www.youtube.com/embed/y0rjfSQvms0" frameborder="0" allowfullscreen></iframe> </div> </div>
Beer Mugsy’s footer
To build the footer, we use a
<dl> with the class of
The company’s name is in a
<dt> tag and we place all other items as
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:
<dl class="sub-nav"> <dt>Beer Mugsy, Inc.</dt> <dd class="active"><a href="#">Home</a></dd> <dd><a href="#">Our Beer Mugs</a></dd> <dd><a href="#">Contact Us</a></dd> <dd >Copyright 2015 © Beer Mugsy, Inc. </dd> </dl>
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.
Leave a Reply