Introduction

Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.

Foundation for Sites is a client end framework with javascript classes , CSS/Sass libraries , Responsive UI integration for easy development of new gen websites.

Highlights

Semantics : Everything is semantic. You can have the cleanest markup without sacrificing the utility and speed of Foundation.

Mobile First : You can build for small devices first. Then, as devices get larger and larger, layer in more complexity for a complete responsive design.

Customizable : You can customize your build to include or remove certain elements, as well as define the size of columns, colors, font size and more.

Professional : Millions of designers and developers depend on Foundation. We have business support, training and consulting to help grow your product or service.

 

Foundation Framework Components

Layout

• Grid
• Flex Grid
• Forms
• Visibility Classes
• Float Classes
• Flexbox

Typography

• Base Styles
• Helper Classes

Controls

• Button
• Button Group
• Close Button
• Slider
• Switch

Libraries

• Motion UI
• Panini

 

Navigation

• Overview
• Menu
• Dropdown Menu
• Drilldown Menu
• Accordion Menu
• Top Bar
• Responsive Navigation
• Magellan
• Pagination
• Breadcrumbs

Containers

• Accordion
• Callout
• Dropdown
• Media Object
• Off-canvas
• Reveal
• Table
• Tabs

Media

• Badge
• Flex Video
• Label
• Orbit
• Progress Bar
• Thumbnail
• Tooltip

Plugins

• Abide
• Equalizer
• Interchange
• Toggler
• Sticky

Sass

• Mixins
• Functions

 

What’s New in Foundation Framework

50% Code Reduction – Half the Size of Foundation 5
Total filesize of every component and class now weighs in at 60KB CSS & 84KB JS, with plenty of room to make them even smaller when selectively removing unused components.

A11y Friendly – The Base for Fully Accessible Sites
All code snippets come with ARIA attributes and roles along with instructions on how to properly use these components. This helps ensure that every website built on Foundation 6 can be used anywhere, on any device, by anyone.

Fewer Style Overrides – The Styles You Need. None That You Don’t
The base styles act as a coded wireframe rather than a final design. Simpler CSS styles allow you to more easily modify them to fit your brand.

Customizable Sass Grid – Any Combination of Columns You Need
The Sass grid mixins have been made smartly to give you even more flexibility to customize the grids with any number of columns.

ZURB Development Stack – Prototype With the Tools ZURB Uses
Use the same template that ZURB uses on all our client projects. This starter template is a souped up stack complete with a custom static site generator to help flatten files into single HTML documents. It gives you ‘Handlebars’ templating, UglifyJS, UnCSS, and image compression and Sass as well.

Motion UI – Easily Create Animations and Transitions
This Sass library includes more than two dozen built-in transition and animation classes.

 

References:

http://zurb.com/article/1416/foundation-6-is-here

http://foundation.zurb.com/sites/docs/

 

Contact Taksa for your Outsourcing Design Project requirements and see how our designers incorporate such extraordinary branding philosophy into your brand for great marketing success.