ZURB’s Foundation framework is a feature-rich, easy to implement, light weight framework for designing responsive web applications. Designed with mobile-first approach in mind, it comes packed with CSS3 media queries, The Grid, reusable HTML5 components and several jQuery plugins to aid interactivity.
Foundation is built on Sass: fast tracking the development effort with constant deployment, semantic code, faster styling and few other programmatic features. Let's look at Foundation 5 new features.
Loads Content Faster
Interchange in Foundation, helps developers to create optimized sites by letting the developers to selectively load sections based on the client device type. Interchange uses media queries to dynamically load responsive content that is appropriate for different user's browsers.
Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.
Using Interchange with images alone is the same process as arbitrary HTML content, and a common use case for Interchange. This way you'll only load larger resources for devices that can handle it.
<!-- larger screens -->
<img alt="deafult" data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" />
<!-- data-interchange="[image_path, (media query)], [image_path, (media query)]"-->
<img alt="deafult"
data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]" />
<!-- support browsers with JavaScript disabled -->
<img
data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]">
<noscript><img src="/path/to/default.jpg"></noscript>
<!-- Retina images -->
<!-- data-interchange="[image/path/to/retina.jpg, (retina)]" -->
Foundation provides following features to further enhance the speed:
Fast Click
Integration of fastclick.js for mobile users.
GPU Acceleration
Animation will perform significantly better and sleeker.
Off Canvas
Off Canvas provides a powerful way to build navigation into screens.
Improved Forms
Makes it easy to code up forms, in-line labels and other components.
Faster to Code
Foundation now includes a medium grid that you can leverage, nestled neatly between the small and large grids you’re used to. That’s a lot less custom code for you to write to make use of intermediate sizes.
CLI
Foundation has written their own CLI wrappers so you can quickly spin up new projects. Just use foundation new project-name.
Sublime Text
Sublime Text editor now has Foundation shortcuts.
Templates
Foundation has created new templates to jump start a Foundation 5 project.
Libsassy
Foundation 5 works with Libsass, a new Sass processor. And it’s fast, sometimes 32x as fast.
Medium Grid
Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.
<div class="row">
<div class="medium-2 columns">2 columns</div>
<div class="medium-10 columns">10 columns</div>
</div>
<div class="row">
<div class="medium-3 columns">3 columns</div>
<div class="medium-9 columns">9 columns</div>
</div>
By popular request, Foundation now includes a medium grid that you can leverage, nestled neatly between the small and large grids you’re used to. That’s a lot less custom code for you to write to make use of intermediate sizes.
Faster to Learn
Foundation is easy to learn and their Getting Started with Foundation guide is the place you should be.
There are few other places you can expand your knowledge of Foundation, and also reuse some of the code.
Building Blocks
Building Blocks are bits of code that you can drop into any Foundation project.
Forum
A custom forum specifically for Foundation users to get the answers they need.
Videos
A premium channel for you to get individual support using Foundation.
Training
ZURB now offers Web-based and on-site training classes for Foundation, taught by the framework developers themselves.
