Foundation - Overview

What is Foundation?

Foundation is one of the advanced front-end frameworks for designing beautiful responsive websites. It works on all types of devices and provides you with HTML, CSS and JavaScript plugins.

Foundation - Installation

In this chapter we will discuss about how to install and use Foundation on website.

Download the Foundation

When you open the link foundation.zurb.com, you will get to see a screen as below -

Foundation - Starter Projects

You can startup with your project development with some available templates which can be installed through Yeti Launch or Foundation CLI. You can start with the new project by using these templates by using Gulp build system for the processing of the Sass, JavaScript, copying files etc.

Foundation - Global Styles

In this chapter let's study about Global Styles. The global CSS of Foundation framework includes useful resets that makes sure styling is consistent across browsers.

Foundation - Sass

SASS helps to make the code more flexible and customizable in the Foundation.

Compatibility

To install SASS based version for foundation, Ruby has to be installed on Windows. Foundation can be compiled with Ruby Sass and libsass. We recommended node-sass 3.4.2+ version to compile SASS.

Foundation - JavaScript

In this chapter let's study about JavaScript. It is easy to set up JavaScript in Foundation, only thing you require is jQuery.

Installing

You can use ZIP download, package manager or CDN to get Foundation JavaScript file. In your code provide links to jQuery and Foundation using <script> tags. For more information click here.

Foundation - JavaScript Utilities

Foundation includes JavaScript utilities which are used to add common functionalities. It is very helpful and easy to use. This JavaScript utilities library can be found in the folder Your_folder_name/node_modules/foundation-sites/js

Foundation - Media Queries

Media queries are CSS3 module that include media features such as width, height, color and displays the content as per specified screen resolution.
Foundation uses following media queries to create breakdown ranges:

Foundation - The Grid

Description

Foundation grid system scales up to 12 columns through the page. Grid systems are used to create page layouts through a series of rows and columns that house your content.

Foundation - Flex Grid

The grid depends on the flex display property. It consist number of features that are available with the flexbox, like automatic stacking, source ordering, vertical alignment and horizontal alignment.

Foundation - Forms

In this chapter let's study about Forms. Foundation provides powerful, easy and versatile layout system for Forms, which combines form styles and grid support.
The below table list the form elements used in Foundation.

Foundation - Visibility Classes

Description

• Foundation uses visibility classes to show or hide elements based upon device orientation (portrait and landscape)or screen size (small, medium, large or xlarge screen).
• It allows user to use elements based on the browsing environment.
  

Foundation - Base Typography

Description

Typography in Foundation defines headings, paragraphs, lists and other inline elements which create attractive and simple default styles for elements.
The Following table lists different types of typography used in the Foundation:

Foundation - Typography Helpers

In this chapter let's study about Typography Helpers. Typography helpers are used to format your text in semantically relevant ways. Helper classes in Foundation let you to scaffold some typographic styles quicker.
The below table list Typography Helpers which are used in Foundation.

Foundation - Basic Controls

In this chapter let's study about basic controls. The Foundations provides basic controls such as buttons, slider and switch.
Below table list basic controls used in Foundation.

Foundation - Navigation

Description

Foundation provides a few different options for styling navigation elements. Many simple navigation patterns are bundled, it can be integrate in the form for robust responsive navigation solution.
The following table describes different types of navigation along with description.

Foundation - Containers

Foundation containers are used to make full width of browsers at all times for the site and wrap the site contents.
Following table lists down some of the containers used in the Foundation:

Foundation - Media

In this chapter let's study about media in Foundation. The Foundation consists of several media types like Flex Video, Label, orbit, progress bar and tooltip. The below table list all of media types.

Foundation - Plugins

Description

Plugin is a piece of software that provides additional functionality which was not originally completed by Foundation core functionality. Foundation Plugins can be uploaded to expand the functionality of the site. Plugins are used to make your work easier.

Foundation - Sass Functions

Foundation provides set of SASS utility functions which can be used with util, color, selector, unit, value and many more utilities.
You can import all utility files at a time by using below line of code:

@import 'util/util';

or even you can import individual utility file as shown below:

@import 'util/color';