How to Create a webpage with Zurb’s Foundation part 1
The Zurb’s Foundation framework developed to create front-end faster and better. In this and the following article we will be building a webpage for an imaginary site dedicated to selling beer mugs using UI from Zurb’s Foundation.
Demo and download code will be added in 2nd part.
The markup of the page
Firstly, we create the navigation which involves three menu items with icons.
Foundation grid system
We wrap the navigation within a
div container with the classes of
large-12 columns. Foundation has 12 columns just like Twitter Bootstrap but the way to declare them is different. You can specify
large-NUMBER_OF_COLUMNS. However, each time you declare that a container takes a certain number of columns you have to add an extra class named
columns. Here is the container for our navigation:
<div class="large-12 columns"> <!-- NAVIGATION --> </div>
In the container, we add a container with a class of
three-up. The second class –
three-up is telling Foundation that our icon navigation menu will have three items. You can adjust it using a different number in the class name such as
five-up. In that second container, we add anchors with the class of
item for each navigation item and nest inside an image (the icon) and a label with the text that will appear below the icon.
Here is how that looks like:
<div class="icon-bar three-up "> <a class="item" href="#"> <img src="img/icons/home.png" alt="Home"/> <label>Home</label> </a> <a class="item" href="#"> <img src="img/icons/mug.png" alt="beer mug"/> <label>Our Beer Mugs</label> </a> <a class="item" href="#"> <img src="img/icons/contact.png" alt="Contact us"/> <label>Contact Us</label> </a> </div>
The Beer Mugsy’s Title
Below the navigation, we add a column that spans across the entire viewport and add a
h1 with the classes of
text-center. The class
subheader will lighten up our heading and
text-center will display the text in the center of the element’s content area. Inside the heading’s text content we add a
<small> tag which will further lighten up the text and reduce its font size.
Here is how our title looks like:
<div class="large-12"><h1 class="subheader text-center">Beer Mugsy, Inc. <small>Affordable and luxurious</small></h1></div>
The Beer Mugsy’s Promo Section
We create a row which will span for 10 columns and will have one blank column to the left and one to the right for large screens. We achieve this with
large-offset-1 which works like Bootstrap’s
col-lg-offset-1. Inside those 10 columns, we create two promo divs with the class of
panel and each spans for 5 columns of its container.
Inside the first promo div we put some centered text, an image and a button that occupies the entire horizontal space of the promo div – through the classes
button expand and we add to it a greenish color with the class
Inside the second promo div we add some centered text and an input of type
input: Foundation styles it automatically. Finally, we add a button with the classes of
button expand (we do not add the class of
success so the button will have its default color which is in the family of blue.
Here is how the markup looks like:
<div class="promo large-10 large-offset-1 columns"> <div class="panel large-5 columns"> <p class="text-center">See our beer mug discounts, valid only for another day!</p> <div class="text-center"> <img src="img/icons/mug2.png" alt="Our brand new beer mug"/> </div> <a href="#" class="button expand success">Discount me!</a> </div> <div class="panel large-5 columns"> <p class="text-center">Sign up for our newsletter to be notified of new deals!</p> <div class="text-center"> <form action="" method="POST"> <input type="email" placeholder="Enter your email" name="email"/> <img class="mug3" src="img/icons/mug3.png" alt="Mug of beer"/> <input type="submit" value="Sign up" class="button expand"/> </form> </div> </div> </div> </div>
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