Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Foundation 4 Framework Overview

This article gives a brief overview of Foundation 4 framework and discusses Orbit feature with example.

What is Foundation?

Foundation is a front-end development framework, consisting of many features which help for making responsive, mobile first websites. This framework is primarily built using HTML, CSS and Jquery.

Foundation framework consists of modules in it, each can be used independently while building applications or can be used along with other modules.

This framework is built with CSS SASS, a CSS powerful pre-processor, allowing us to develop our own foundations much faster and provides new tools to customize and build upon the initial styles.

Elements of Foundation Framework

The following are some of the elements which part of this framework:

  • The Grid : You can create powerful multi-device layouts quickly and easily with the 12-column, nestable Foundation grid. Columns give structure.
  • Typography: Foundation 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints.
  • Buttons : Foundation has a lot of easy to use button styles that you can customize or override to fit your needs.
  • Navigation: Navigation or Top Bar helps you display a complex navigation bar on small or large screens.
  • Forms : Foundation provides an easy to handle, powerful and versatile form layout system.
  • UI Elements: UI Elements or Panel is a simple, helpful Foundation component that enables you to outline sections of your page easily.
  • Section : These are similar to tabs as a way to selectively show a single panel of content at a time.
  • Orbit : Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.
  • Reveal: Reveal is a jQuery modal plugin making Modal dialogs, or pop-up windows, easy for you to use.
  • Clearing : This feature gives similar effect of responsive lightboxes with any size image.
  • Magellan : It is a style agnostic plugin that lets you style a sticky navigation that denotes where you are on the page.
  • Joyride: It is an extremely flexible plugin that gives users a tour of your site or app when they visit.
  • Tooltips : These provide extra inforamtion about an action or term on a page.
  • Dropdown: This feature helps you attach dropdowns or popovers next to anything
  • Interchange : This feature uses media queries to load the images that are appropriate for a user's browsers, making responsive images a snap.
  • Abide : This is an HTML5 form validation library that supports the native API by using patterns and required attributes.

Download and Installation

Download Foundation 4 framework. When you open this link the following screen would be seen:

Download Foundation 4

Figure 1: Download Foundation 4

Here you can see 3 options of download which are explained as below:

  • Default CSS - This version of Foundation includes smart defaults and doesn't require Sass or any other tools installed.
  • Custom CSS - You can customize your build of Foundation to include or remove certain elements, as well as to define the size of columns, colors, font size and more.
  • Sass - Foundation is built using SCSS, and you can work with it in the same way.

While writing this article I downloaded the Default CSS. Once the download is complete, unpack it and following files and folders would be visible:

  • Stylesheet folder (css): This folder includes files : foundation.css, foundation.min.css, normalize.css
  • Javascript folder (js): This folder has many plug-ins required for JavaScript to make the Foundation work properly.
  • Images folder (img): This folder is empty .
  • 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.

In the next section I will discuss about the Orbit feature of the Foundation 4 framework.

Orbit is an easy to use, powerful image slider that's responsive, allowing you to swipe on a touch-enabled device.

First let us create our basic HTML structure that uses Foundation 4. Write an HTML file with contents as below:

Listing 1: HTML Code

<!DOCTYPE html> 
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 

<head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Foundation 4</title> 

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. --> 
  <link rel="stylesheet" href="css/normalize.css" /> 
  <link rel="stylesheet" href="css/foundation.css" /> 

  <script src="js/vendor/custom.modernizr.js"></script> 

</head> 
<body> 

  <!-- body content here --> 

 <script> 
      document.write('<script src=foundation/js/vendor/' 
        + ('__proto__' in {} ? 'zepto' : 'jquery') 
        + '.js><\/script>'); 
    </script> 

  <script src="foundation/js/foundation/foundation.js"></script> 
  <script src="foundation/js/foundation/foundation.orbit.js"></script> 
  <!-- Other JS plugins can be included here --> 

  <script> 
    $(document).foundation(); 
  </script>
</body> 
</html>

Now let us build Orbit in our above HTML code. We will use three images for this. Orbit has swipe functionality that makes it easy to switch slides. On screens without touch interfaces, you'll see bullet and arrow navigation if you have the options setup in your JS.

Listing 2: Revised HTML with Orbit feature

<!DOCTYPE html> 
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 

<head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width" /> 
  <title>Foundation 4</title> 

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. --> 
  <link rel="stylesheet" href="foundation/css/normalize.css" /> 
  <link rel="stylesheet" href="foundation/css/foundation.css" /> 
  <script src="foundation/js/vendor/custom.modernizr.js"></script> 

</head> 
<body> 

  <!-- Orbit Container --> 
<div class="twelve columns slideshow-wrapper"> 
  <ul id="featured2" data-orbit> 
    <li class="active"> 
      <img class='imagem_artigo' width="100%" src="img/demo1.gif"> 
      <div class="orbit-caption">...</div> 
    </li> 
    <li> 
      <img class='imagem_artigo' width="100%" src="img/demo2.gif"> 
      <div class="orbit-caption">...</div> 
    </li> 
    <li> 
      <img class='imagem_artigo' width="100%" src="img/demo3.gif"> 
      <div class="orbit-caption">...</div> 
    </li> 
    
  </ul> 

    <!-- Timer and Play/Pause Button --> 
  <div class="orbit-timer"> 
    <span></span> 
    <div class="orbit-progress" style="width: 100%; -webkit-transition: width 2s linear;"></div> 
  </div> 
</div> 


  <script> 
      document.write('<script src=foundation/js/vendor/' 
        + ('__proto__' in {} ? 'zepto' : 'jquery') 
        + '.js><\/script>'); 
    </script> 

  <script src="foundation/js/foundation/foundation.js"></script> 
  <script src="foundation/js/foundation/foundation.orbit.js"></script> 
  <!-- Other JS plugins can be included here --> 

  <script> 
    $(document).foundation(); 
  </script> 

</body> 
</html>

Details of the above code are:

  • First create a list of images.
  • Add slideshow-wrapper class to the div
  • Add data-orbit to the ul
  • At the bottom of the page within the body add the below script for the orbit to work:

Listing 3: Javascript code

  	<script> 
      	document.write('<script src=foundation/js/vendor/' 
       	 + ('__proto__' in {} ? 'zepto' : 'jquery') 
       	 + '.js><\/script>'); 
   	 </script> 

  	<script src="foundation/js/foundation/foundation.js"></script> 
  	<script src="foundation/js/foundation/foundation.orbit.js"></script> 
  	<!-- Other JS plugins can be included here --> 

  	<script> 
   	 $(document).foundation(); 
  	</script> 

Now open your HTML page in the browser and the output would be as below:

Slide 1

Figure 2: Slide 1

 Slide 2

Figure 3: Slide 2

Slide 3

Figure 4: Slide 3

Conclusion

This article discussed about Foundation 4 framework. We also saw an example of Orbit feature. Hope you liked the article.

See also



I''m a full stack developer with around 10+ yrs of experience. I enjoy writing technical articles on upcoming technical trends.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login