Foundation 5 New Features

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="" 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="" 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.

Be first to comment

Leave a Reply