Introduction to Foundation 3 Framework

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

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

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

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

  <script src="foundation/javascripts/modernizr.foundation.js"></script>
</head>
<body>

  <div class="row">
    <div class="eight columns">
      <h3>A GRID</h3>

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

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

<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

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

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
	<!— Basic text-typography  -->
            <h1>h1 header</h1>
	  <h2>h2 header</h2>
	  <h3>h3 header</h3>
	  <h4>h4 header</h4>
	  <h5>h5 header</h5>
	  <h6>h6 header</h6>
</body>
</html>

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

<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

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

  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
	<!—Typography smaller text using small tag-->
<h1>h1 example <small> text using small.</small></h1>
	<h2>h2 example <small> text using small.</small></h2>
	<h3>h3 example <small> text using small.</small></h3>
	<h4>h4 example <small> text using small. </small></h4>
	<h5>h5 example <small> text using small. </small></h5>
	<h6>h6 example <small> text using small. </small></h6>
</body>
</html>

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.

<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

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

  <script src="foundation/javascripts/modernizr.foundation.js"></script>
</head>
<body>
		<h1 class="subheader">h1.Text Class subheader </h1>
		<h2 class="subheader">h2.Text Class subheader </h2>
		<h3 class="subheader">h3.Text Class subheader </h3>
		<h4 class="subheader">h4.Text Class subheader </h4>
		<h5 class="subheader">h5.Text Class subheader </h5>
		<h6 class="subheader">h6.Text Class subheader </h6>
</body>
</html>

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

<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

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

  <script src="foundation/javascripts/modernizr.foundation.js"></script>
</head>
<body>
	<!-- Buttons of different sizes  -->
	<a class="tiny button" href="#">Tiny</a><br>
	<a class="small button" href="#">Small</a><br>
	<a class="button" href="#">Medium</a><br>
	<a class="large button" href="#">Large</a><br>

  <script src="foundation/javascripts/jquery.js"></script>
  <script src="foundation/javascripts/foundation.min.js"></script>
  <script src="foundation/javascripts/app.js"></script>

</body>
</html>

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.

<html>
<head>

  <meta name="viewport" content="width=device-width" />

  <title>Welcome to Foundation</title>

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

  <script src="foundation/javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div href="#" class="large button dropdown">
   Items
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>
  <script src="foundation/javascripts/jquery.js"></script>
  <script src="foundation/javascripts/foundation.min.js"></script>
  <script src="foundation/javascripts/app.js"></script>
</body>
</html>

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.

Elements in Foundation 3

Download Foundation 3

Basic Structure of Foundation

Typography

Buttons

Summary

About Manisha Patil