ZURB’s Foundation framework is a feature-rich, easy to implement, lightweight framework for designing responsive web applications. Designed with a 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.
Foundation provides following features to further enhance the speed:
Integration of fastclick.js for mobile users.
Animation will perform significantly better and sleeker.
Off Canvas provides a powerful way to build navigation into screens.
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.
Foundation has written their own CLI wrappers so you can quickly spin up new projects. Just use ‘foundation new project-name’.
Sublime Text editor now has Foundation shortcuts.
Foundation has created new templates to jump start a Foundation 5 project.
Foundation 5 works with Libsass, a new Sass processor. And it’s fast, sometimes 32x as fast.
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 are bits of code that you can drop into any Foundation project.
A custom forum specifically for Foundation users to get the answers they need.
A premium channel for you to get individual support using Foundation.
ZURB now offers Web-based and on-site training classes for Foundation, taught by the framework developers themselves.