A Framework for any device, medium, and accessibility. 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. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!

Foundation Framework use for:-

  1. Website Design
  2. Email Design
  3. Apps Design



1.     Decreased Page Load Time

The Foundation team had to face some constructive criticism that claimed that in most Foundation projects, about the 90% of the CSS code goes unused. This wasn’t only true for Foundation, but also for other major CSS frameworks such as Bootstrap. As part of their reply, Zurb decided to significantly cut the file size of the outputted CSS by implementing a roughly 40-50% code reduction.

2.     Full Accessibility

Probably the most amazing feature of the new Foundation 6 is that it will be fully accessible. Every component and code snippet will come with the appropriate WAI-ARIA attributes and landmark roles. Moreover developers will even be provided with a user guide about how to use the a11y web standards.

3.     Explicit support for RTL languages

Older versions supported RTL (right-to-left) languages like Arabic to an extent; but they needed some tweaking. Foundation 6 has support built right in.

4.     Flex grid

The Flex grid is exactly what you think it is: it’s the Grid component re-done with Flexbox. On the one hand, this gives it a number of features and options that a regular float-based grid can’t handle. On the other hand, it’s probably not as well-supported, especially by IE. It’s a trade-off.

5.     Typography helper classes

A couple of cool enhancements were included for website-style typography. Specifically, there are helper classes designed to make typographic layouts just a bit easier to deal with:

  • Text alignment classes
  • Subheader classes – applies a lighter color to any heading with the .subheader
  • Lead paragraph styles
  • Un-bulleted lists
  • Statistics – applies a larger font size to important numbers

6.     Navigation

As mentioned above, all of the previous navigation components got merged into one-big flexible component. This means that all navigation types will play nicely with each other. It also means that you can choose different kinds of navigation for different screen sizes.

Want drill-down navigation on a smart phone, and a horizontal bar on a desktop? Easily done with the screen-size-specific classes. Want your “Top bar” back? Just add a wrapper div around the default menu components.

7.     Badge

You know those little circles or squares—usually placed on or near icons of some sort—with tiny numbers in them? Like when you have Facebook notifications? Those are called badges.

You learn something new every day. Also, Foundation has them now.

8.     Sticky

Need to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plug-in! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 6.

9.     Toggler

In case dropdowns, accordions, drilldowns, tooltips, and modals aren’t enough for you, here’s a generic way to make stuff appear or disappear. It’s a simple JavaScript-based toggle event that can be applied to basically anything.

I imagine it’s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.

10. Media object

Well, the name sounds like it’s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it’s really meant for is displaying any media object, such as an image, alongside text information.





  • Abide – form validation
  • Accordions
  • Basic global styles
  • Breadcrumb navigation
  • Buttons
  • Callouts
  • Color mixins
  • Dropdown menus
  • Equalizer – column alignment
  • Flex Video
  • Forms
  • Interchange responsive content
  • Label
  • Magellan – no longer sticky by default
  • Media queries (it should be noted that the break points have changed)
  • Off-canvas
  • Pagination
  • Progress bars
  • Reveal
  • Sliders
  • Switches
  • Tables
  • Tabs
  • The Grid
  • Thumbnails
  • Tooltip
  • Typography styles
  • Visibility and utility classes

You can refer Foundation website for more information.