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

July 28, 2015 3:37 pm

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

{ Leave a comment}

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

[wpdm_file id=144]DEMO

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>

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

<script>
    $(document).foundation();
</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:

<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 -->

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:

<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.

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:

<div class="most-sold-pagination row">
    <div class=" medium-offset-4 medium-5 columns">
    <ul class="pagination">
        <li class="arrow unavailable"><a href="">&laquo;</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="">&hellip;</a></li>
        <li><a href="">50</a></li>
        <li><a href="">51</a></li>
        <li class="arrow"><a href="">&raquo;</a></li>
    </ul>

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:

<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>

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:

<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 &copy; Beer Mugsy, Inc. </dd>
    </dl>

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.