Getting Started with Foundation Front-end Framework

In this article we will talk about Foundation 3, which is a CSS framework built with Sass, a powerful CSS pre-processor, which allows us to develop much faster our own foundations and provides new tools to customize and build upon the initial styles.

With the Foundation we can write and organize CSS code that can more easily maintain over time without the typical headaches also have JavaScript plug-ins that are useful and easier to implement interactions in different screen resolutions.

With the Foundation can use the following resources to create our application.

Elements

Grade: It is constructed by two fundamental elements columns and rows, columns create the actual structure. For layout work properly we have to put the content in a row and a column. What we need to know is that these columns do not have a fixed size, the size can vary depending on the screen resolution or window size.
Details: The grid is built with the elements "box-sizing" and "border-box". CSS properties powerful that tell the browser to the spacing and the edge as part of an element and not as something extra, so we can create a very simple grid. Gaps are created only with the border in columns. This means that the columns have simple size as, for example, 25% or 50%. When adjusting fills adjusted the spacing, we can control this through the CSS classes.
Typography: It uses a modular scale. The idea of a modular scale is that the size and spacing throughout the typography in the grid is derived from an initial value, another "important" arbitrary value and a particular ratio.
Buttons: The buttons are the most used elements 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 came up with a number of navigation options for a range of situations and the best thing is that it was designed to work cross-device.
Forms: The Foundation brought a powerful and versatile layout system to form. With a combination of the Foundation grid and forms of styles, we can basically do everything we need in terms of layout.
UI Elements: Our prototipagens will have more than just navigation, guides or typography. So the Foundation has created a number of additional elements to help us quickly in our prototipagens that, like everything else in this framework are now ready to use and easy to modify or replace.
Guides: The guides are very versatile both corporately and for creating navigation. With the Foundation package guides are already connected without the need for extra work.
Orbit: It was created as a sliding controller simple images, but supports elements with arbitrary content, for example, we can have a slider text blocks.
Pop-up: Pop-up windows are useful for creating prototyping. The Foundation included the pop-ups in jQuery modal pug-in to make the job easier.

Some other tools will be seen the course of the article.

Download

To start using the Foundation in our applications, we must first of all download your source codes package at: http://foundation.zurb.com/sites/download.html.

For this article we will be by downloading the "CSS standard." After we complete the download will unpack and have the following files and folders.

StyleSheets folder: Including Foundation.css and Foundation.min.css, so we can choose which one to use. It has also included app.css we can use to custom styles.
JavaScript folder: JavaScript has several plug-ins needed to make the Foundation function properly. In this folder the most important file is app.js, which will be used to initialize the various plug-ins that we want to use. "All js are started by default."
Pictures folder: This page has all the necessary images for creation, which are actually not many. The only images included by default are used for Orbit. If we do not use the Orbit, we are free of these images.
Index.html: An example structure for the page content, giving us something as a model for us to use as a basic framework for the rest of the pages in our project.

Basic structure

Let's start to put into practice what we already know about the Foundation to date, for it will start building our structure. The first thing we must do is plug the files necessary for the operation of the Foundation.

Listing 1. Basic File Structure of the Foundation

 head>
 
<metaname="viewport"content="width=device-width"/>
 
  <title>Estrutura Foundation </title>
  
  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">
 
< !-- Custom Mordernizr to the foundation. -->
 
<script src="javascript/modernizr.foundation.js"></script>
 
</head>
 
<body>
  Content.
  Content.
 
<!-- Including javascript files -->
 
  <script src="javascript/jquery.js"></script>
  <script src="javascript/foundation.min.js"></script>
 
  
  <!-- Starting javascript plug-ins -->
  <script src="javascript/app.js"></script>
</body>

Now we already have all the basic structure formed, we understand what this structure is composed.

In the first line inside the tag include the viewport meta to make sure that the smaller devices use all the space width for the display of the content. Then include foundation.css file that serves as the basis for the Foundation and also app.css, we use to customize at the Foundation structure. After we called the modernizr.foundation.js file, used to have HTML5 support with access classes and JavaScript media queries that help us control the Foundation. Inside the body, at the bottom, we call the JavaScript files jquery.js and foundation.min.js. We must always enter the jquery.js before any of the Foundation JavaScript file. The foundation.min.js file includes all available plug-ins. And finally our structure, we enter the app.js file, which has the function to initialize all plug-ins.

Already we understand our structure and the elements we have at our disposal for us to use with it. Let's go to practice, putting the elements we know into action in order to see the result of what can be done with such elements.

Listing 2. Example of Grid in Foundation

 <head>
  <meta charset="utf-8" />
 
  <!— Defining resolution of mobile devices -->
  <meta name="viewport" content="width=device-width" />
 
  <title> Example Grid 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>
 
  <div class="row">
    <div class="eight columns">
      <h3>GRID</h3>
 
      <!—Example grid-->
      <div class="row"> <!—Linha -->
        <div class="twelve columns"> < !-- Setting number of columns -->
          <div class="panel"> < !— Painel --> 
          <p> Twelve columns </p> < !-- Content within the panel -->
          </div> <! -- End panel -->
        </div> <! --End columns -->
      </div> <! -- End 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>

Figure 1. Results example Grid Foundation

Typography

The styles related to typography in the Foundation remains with the CSS files inserted initially. In the following example, for instance, we have basic headings (h1 to h6) in which it was not required to enter 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>
       <!— Typography basic text -->
            <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>

We can still style smaller texts using the tag.

Listing 4. Example of 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>->
    <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>
       <h6>h6 exemplo <small> text using small. </small></h6>
</body>
</html>

There is also a class called subheader that we can apply for some elements for a text effect "dimmed", which can be used as a subtitle, for example.

Listing 5. Example typography using subheader class

 <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>
    <h1 class="subheader"> h1.Text subheader class </ h1>
<h2 class = "subheader"> h2.Text subheader class </ h2>
<h3 class = "subheader"> h3.Text subheader class </ h3>
<h4 class = "subheader"> h4.Text subheader class </ h4>
<h5 class = "subheader"> h5.Text subheader class </ h5>
<h6 class = "subheader"> h6.Text subheader class</ h6>
</ Body>
</ Html>

So we have seen three different possibilities we are setting our texts within our web application. The printing settings can be customized within the foundation.css file.

Buttons

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

Tyni: very small;
Small: small;
Medium: Medium;
Large: large;

Now let's look at the example below creating a reference to each of these sizes button.

Listing 6. Creating buttons with different sizes

 <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>
       < !-- Buttons 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="javascripts/jquery.js"></script>
  <script src="javascripts/foundation.min.js"></script>
  <script src="javascripts/app.js"></script>
 
</body>
</html>

Figure 2. Various button sizes

There are also the drop-down menu buttons, we can use this when you want to display a list of several possible values to choose from. Suspended buttons use the same class as the other buttons, what sets it apart is its structure.

Listing 7. Sample drop-down button.

 <head>
 
<head>
 
  <meta name="viewport" content="width=device-width" />
 
  <title>Welcome to Foundation</title>
 
  <!-- Incluindo Arquivos CSS -->
  <link rel="stylesheet" href="stylesheets/foundation.css">
  <link rel="stylesheet" href="stylesheets/app.css">
 
  <script src="javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div href="#" class="large button dropdown">
   Itens
  <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="javascripts/jquery.js"></script>
  <script src="javascripts/foundation.min.js"></script>
  <script src="javascripts/app.js"></script>
</body>
</html>

Figure 3. Drop-down menu buttons

These are some of the possible things we are doing with the Foundation, but many other tools are available.

Hugs and until the next.