July 27, 2015 3:36 pm

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.
How to Create a webpage with 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 small-NUMBER_OF_COLUMNS, medium-NUMBER_OF_COLUMNS and 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 namedcolumns. Here is the container for our navigation:

<div class="large-12 columns">
    <!-- NAVIGATION -->   
</div>

The navigation

In the container, we add a container with a class of icon-bar and 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 two-up or 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 subheader and 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 success.

Inside the second promo div we add some centered text and an input of type email. You can see that we do not have to add any additional classes to the 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.

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:

Leave a Reply

Your email address will not be published. Required fields are marked *