Foundation Framework Tutorials and Guide

Navigation Features in Foundation Framework

November 7, 2013 by Manisha Patil Leave a Comment

In this article I’ll discuss some more features of the Foundation 3 framework. In the previous article Introduction to Foundation 3 Framework , we saw some of the following features offered by Foundation 3 framework:

Forming basic HTML sturucture using GRIDS
Typography
Buttons

In this articles I’ll cover Navigation using the foundation framework. Refer the article Introduction to Foundation 3 Framework on how to download and setup the Foundation 3 framework in your application.

also read:

Navigation Options in Foundation Framework

The framework provides navigation options for number of situations, like:

Top Bar
Navigation Bar
Vertical Navigation
Side Navigation
Sub Navigation
Pagination
Breadcrumbs

Let us see an example for each one these in the sections below:

1. Top Bar

This framework provides a fixed bar on the top of the page. By default the responsive layout has width of 940px, but you can change that by updating your Scss settings file or changing it with the customizer upon download. An example is shown in the Listing 1 below:

Listing 1: Top Bar example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Grid Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

<div class="row">
<div class="twelve columns">
<nav class="top-bar">
<ul>
<!– Title Area–>
<li class="name"><h1><a href="#">Top Bar Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>

<section>
<!– Left Nav Section –>
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">
<a class="active" href="#">Item 1</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Level 1, Has Dropdown</a>
<ul class="dropdown">
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
<ul class="dropdown">
<li><label>Section</label></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li class="divider"></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>

<!– Right Nav Section –>
<ul class="right">
<li class="divider show-for-medium-and-up"></li>
<li class="has-dropdown">
<a href="#">Item 2</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
</body>
</html>

[/java]

Open the above html in your browser, you can observe an output as below:

Details of the above file:
The three main elements are:

The title ul
one of the section ul class=“right/left elements
and the li.toggle-topbar element that will expand the menu in the responsive layout.

To position the bar we use a single nav element with a class of top-bar. It will take on full browser width by default. Depending on where you want your links, use the class ul.left and/or ul.right. Simply add items using li. To build a drop down menu you’ll need to add has-dropdown to the li and include ul.dropdownright after that anchor. Add a class of active to mark the current page. I’ve also included the divider using the class li.divider, this will give some separation. You can also include a button (has-button ) and search/text (using class search).

2. Navigation Bar

The default top nav bar provided by this framework includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content). An example is as shown in the listing 2.

Listing 2:Nav bar example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Nav Bar Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</div>
</div>
</li>
</ul>
</div>
</div> <script src="foundation/javascripts/foundation.min.js"></script>
<script>
$(document).foundationNavigation();
</script>

</body>
</html>
[/java]

Open the file in your browser and you would an output as below:

Details of the above file:
In the above file we observe that:

A basic nav bar is created using class nav-bar with the ul element. Then ‘li’ elements are used to create navigation within that.
Class ‘has-flyout’ is attached to the dropdown elements. These render more content on hover.
Class ‘flyout‘ is attached to the ‘div‘ elements, which contains the content rendered on hover.
Notice that direction of the flyouts are left by default. ‘right‘ class is added to set the flyout direction right.
Lastly file ‘foundation.min.js‘ is added and then ‘$(document).foundationNavigation();‘ is used to initialize the navigation and dropdowns.

3. Vertical Nav

By adding class of .vertical to the element the above nav bar can be made vertical. The code is as in the listing below:

Listing 3: Vertical Nav Bar

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Vertical Nav bar Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</div>
</div>
</li>
</ul>
</div>
</div> <script src="foundation/javascripts/foundation.min.js"></script>
<script>
$(document).foundationNavigation();
</script>

</body>
</html>
[/java]

Output:

4. Side Nav

Sometimes, instead of a nav bar (either top or vertical) it is suitable to use a side navigation. The code is as in the listing below:

Listing 4: Side Navigation

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Side bar Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</body>
</html>
[/java]

The ouput is as in the image below:

5. Sub Nav

Sub navs are useful when you need to move between different states of a page , say for example Filters. An example below demonstrates this:

Listing 5: Sub nav

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example subnav Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</body>
</html>
[/java]

Output of the above code is as in the image below:

6. Pagination

When you need iteration through a long list of items, for example you want to provide your user with a way to navigate over 50 blog posts, each page showing 10 of it, you need pagination. Here is how you may create one with Zurb Foundation 3.

Lisitng 6: Pagination example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example pagination Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</body>
</html>
[/java]

The output of the above code would be as shown below:

7. Breadcrumbs

Breadcrumbs are a great way to show your users where they are in you site hierarchay. It may also helpful to direct your users to the flow of content. An example is as below:

Listing 7: Breadcrumbs example

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example breadcrumbs Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

<ul class="breadcrumbs">
<li><span>Home</span></li>
<li><span>Features</span></li>
<li><span>Add ons</span></li>
<li class="current"><span>Home</span></li>
</ul>
</div>

</body>
</html>
[/java]

Output would be as below:

Summary

In this article we saw one of the features provided by Foundation 3 framework, i.e the navigation. In the next articles i shall discuss some more features. Hope you liked the article.

Introduction to Foundation 3 Framework

October 18, 2013 by Manisha Patil Leave a Comment

In this article I’ll give a brief overview of the Foundation 3 Framework, which provides us various styles for formatting various page elements in a practical and elegant way, and allows the development of a responsive layout.

Foundation 3 is a framework built with CSS SASS, a CSS pre-processor powerful, allowing us to develop much faster our own foundations and provides new tools to customize and build upon the initial styles. With Foundation we can write and organize the CSS codes that can be more easily maintained over a period of time without the typical headaches of maintenance. We also have plug-ins that make JavaScript interactions useful and easiest to implement on different screen resolutions. With Foundation one can use the following resources to create our application.

Elements in Foundation 3

Grade : It is constructed by two fundamental elements columns and rows. Columns create the actual structure. For the layout to work properly. we have to put the contents into a row and a column. What we need to know is that these columns do not have a fixed size, the size may vary according to screen resolution or window size.
Details : The grid is built with the elements “box-sizing” and “border-box”. Powerful CSS properties that tell the browser to see the spacing and the border as part of an element and not as something additional, so we can create a grid extremely simple. Gaps are created with just the edge columns. This means that the columns have a single size, such as 25% or 50%. Adjusting the spacing can be controlled through the CSS classes.
Typography : Uses a modular scale. The idea of a modular scale is that the size and spacing of all the typography in the grid is derived from an initial value, an arbitrary value and a particular ratio.
Buttons : Buttons are mostly used when it comes to user interaction. The Foundation includes a number of easy to use buttons and styles we can use or replace, to meet our needs.
Navigation : The Foundation framework has come up with a number of navigation options for a range of situations and the best thing is that it was created to work cross-device.
Forms : The Foundation brought a powerful and versatile system for form layout. With a combination of grid Foundation forms and styles, we can do basically everything we need in terms of layout.
UI Elements : Our prototyping or design has more than just navigation, guides or typography. Therefore, the Foundation has created a number of additional elements to help us in our prototyping, like everything else in this framework, are already ready to use and easy to modify or replace.
Guides : The guides are very versatile for creating navigation.
Orbit : It was created as a controller to slide simple images, but supports arbitrary elements with content, for example, we can have a slider blocks of text.
Pop-up : The pop-ups are useful for create prototyping. The Foundation included the pop-ups in the plug-in jQuery modal to make work easier.

Download Foundation 3

To start using the Foundation in our applications, we have to first of all download package source codes from : Foundation Download Link.
By accessing the download site mentioned above we will see three download options.

CSS Standard: This version of the Foundation includes intelligent defaults and does not require SASS or any other tool installed.
Custom CSS: We can customize the package to download the Foundation and set the column size, color, font size, and much more.
Sass + Compass: Foundation is built using SCSS and we can work with it the same way.

Figure 1: Download Page of Foundation

For this article we will be downloading the “CSS standard.” Once the download is complete, unpack it and the following files and folders would be available:

Style sheets folder: Includes Foundation.css, Foundation.min.css and thus we can choose which one to use. It has also included app.css which we can use to custom styles.
JavaScript folder: It has many plug-ins required for JavaScript to make the Foundation work properly. In this folder the file app.js is most important, that we will use to initialize the various plug-ins that we want to use. “All js are started by default.”
Images folder: This folder includes all the images needed for creation, which actually are not many. The only images included by default are used for the Orbit. If we do not use the Orbit, these images are free.
Index.html: A sample structure for the content of the page, that can be used as a template or a basic structure of our pages in our project.

Basic Structure of Foundation

Let’s start to put into practice what we already know about the Foundation 3 so far. We will start to build our structure. The first thing we should do is to link the files needed for the functioning of the Foundation.

Listing 1: File Structure Basic Foundation

[java]
<html>
<head>
<metaname="viewport" content="width=device-width"/>

<title>Foundation Structure</title>
<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">
<!–Include modernizr javascript–>
<script src="foundation/javascript/modernizr.foundation.js"></script>

</head>
<body>
Some content
Some content.
<!—Including javascript files –>
<script src="foundation/javascript/jquery.js"></script>
<script src="foundation/javascript/foundation.min.js"></script>

<!—Initializing the plugins javascript –>
<script src="foundation/javascript/app.js"></script>
</body>
</html>
[/java]

Now that you have the basic structure formed, let us understand what this structure is composed of.

In the first line in the <head> we include the viewport meta tag to make sure that the smaller app use all the space width for displaying content.
Then we include foundation.css file that serves as the base Foundation and also app.css that is used to make the structure of the customized Foundation.
Then turn on the file modernizr.foundation.js, terms used to support HTML5 with free classes and media queries from JavaScript that help us control the Foundation.
Within the body, at the bottom, we call the JavaScript files jquery.js and foundation.min.js. We must always insert the jquery.js before any JavaScript file of the Foundation. File foundation.min.js includes all plug-ins available.
And to finalize our structure, insert the file app.js, which has the function to initialize all the plug-ins.

Now that we understand our structure and the elements , let us use it. Let us put the elements that we know into action in order to see the result of what can be done with such elements.

Listing 2 : Example Grid Foundation

[java]
<head>
<meta charset="utf-8" />

<!—Defining resoluiton–>
<meta name="viewport" content="width=device-width" />

<title>Example Grid Foundation.</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

<!—Example-grid–>
<div class="row"> <!—Line –>
<div class="twelve columns"> < !– Setting number of columns –>
<div class="panel"> < !— Panel –>
<p>Twelve columns</p> < !– Content inside the panel–>
</div> <! – End Panel –>
</div> <!—End-columns –>
</div> <! – End of Line –>

<div class="row">
<div class="six columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
<div class="six columns">
<div class="panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="four columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
<div class="row">
<div class="four columns">
<div class="panel">
<p>Four columns</p>
</div>
</div>
</div>
</body>
</html>
[/java]

Open the above html in your browser, you will see the screen as below:

Figure 2: Result example Grid Foundation

Typography

The typography styles related to the Foundation are due to the CSS files inserted initially. In the following example, for instance, have basic titles (h1 to h6) in which it is not necessary to insert any additional formatting.

Listing 3 : Example of basic typography

[java]
<html>
<head>

<title>Welcome to Foundation</title>

<!– Including CSS files –>
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">

Open the above html in your browser, you will see the screen as below:

Figure 3: Basic Typography

We can also stylize smaller text using the tag <small>.

Listing 4: Example typography using small tag

[java]
<html>
<head>

<title>Welcome to Foundation</title>

<!– Including CSS files –>
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">

Open the above html in your browser, you will see the screen as below:

Figure 4: Example of using typography tag <small>

There is also a class called subheader that we can apply on some elements to get a “dimmed” text effect which can be used as a caption, for example.

Listing 5 : Example using typography class subheader.

[java]
<html>
<head>

<title>Welcome to Foundation</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

Open the above html in your browser, you will see the screen as below:

Figure 5: Example of using typography class sub header

So we saw three different possibilities to set our texts within our web application. Typography settings can be customized within the file foundation.css.

Buttons

In this framework, there are CSS classes that allow us to create buttons with different sizes:

Tiny
Small
Medium
Large

Let us now consider the example below to create a button for each of these sizes.
Listing 6: Creating buttons with different sizes

[java]
<html>
<head>

<title>Welcome to Foundation</title>

<!– Including CSS file –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

</body>
</html>
[/java]

Open the above html in your browser, you will see the screen as below:

Figure 6: Various sizes of buttons

There is also the drop-down menu, you can use this when you want to display a list of several possible values to be chosen.

Listing 7 : Example of dropdown button.

[java]
<html>
<head>

<title>Welcome to Foundation</title>

<!– Including CSS files –>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">

Open the above html in your browser, you will see the screen as below:

Figure 7: Buttons dropdown

Summary

In this article we saw an overview of Foundation 3 framework used for UI development. Though a newer version of this framework is available, since version 3 being most stable and I being more comfortable to use it, I have given an overview of the same. There are many other framework similar to Foundation available today. For example : Twitter Bootstrap, UIkit, Skeleton, 960 Grid system and many more. Hope you liked the article. If you have any questions, please write it in the comments section.