Foundation 5

Foundation 5 was released a few days back. It is a fully responsive framework for front-end developers. The Foundation framework is made by Zurb and it was first released in 2011. Foundation 5 claims to be “The most advanced responsive front-end framework in the world”, used by millions of developers and sites including National Geographic, Mozilla, The Washington Post and others. Foundation was considered the first fully responsive framework when it was released in 2011.

Foundation 4 was released about nine months ago and now Zurb has released the latest version 5 with many new features and improvements. Foundation 5 is the fastest and best build yet. It is packed with features to help you code and learn faster than ever before. So says the Foundation team.

Foundation is a fully responsive framework, which helps developers and designers to create fully responsive and beautiful websites with Semantic code. Foundation uses a mobile first approach, so you can design sites that will not only work well on small devices but also on large screens.

What’s new in Foundation 5

The latest version is faster for users, faster to code and faster to learn. Foundation’s interchange plug-in allows you present different content, when the screen size reaches to a certain point. For example you can present large image file on desktop and small optimized image on small devices. Foundation 5 offers some new features for its millions of users. Let’s have a look at some new features.

New Documentation, Forum and Foundation Business

Foundation is also faster to learn with new documentation, detailed code examples, new start-up guide and a new discussion forum. You can quickly learn how to get started with Foundation 5 and how it works.

Getting Started Guide

Getting started With Foundation 5 is easy. The Foundation teams has created entirely new sections with new and more detailed code examples. They have also written a new “Getting Started” Guide, to help you learn all about Foundation 5. You can also try Foundation in the browser at Codepen. If you are coming from Foundation 4, you can visit the Foundation Migration Guide.

New Official Foundation Forum

You can now also visit the new official Foundation Forum dedicated to questions, answers and dialog with the design community.

Foundation Business

If you are an enterprise user, you can now rely on Foundation Business, where you will get professional support, consulting, tools and training for all your company projects. Individual and Business plans are available for premium support.

Full Support For Medium Grid

By popular request, Foundation 5 now includes Medium Grid. It was an experimental feature of Foundation 4.3. So, now you have a Large, Medium and Small Grid to use.

New starter templates

With shiny new starter templates, you can jump start your next Foundation 5 project in seconds. The Foundation team has created 13 layouts for you to start from and build on. It is very simple and easy to use these simple HTML templates, just grab the code and drop it between the <body> tags of a Foundation page. Starter templates are available for Blog, Feed, Banner Home, Contact, Marketing, and Store. You can learn more at How to Use Foundation Templates.

Interchange

Interchange in Foundation uses media queries to dynamically load responsive content appropriate to different devices. Now you can use Interchange to pull in HTML partials, meaning you can load entirely different sections, content (images, CSS and other content) of your web page for small, medium and large devices. You can use this feature to load mobile friendly content on small devices and large components on desktops.

To use Interchange you’ll have to verify that jQuery and foundation.js are available on your page. You can refer to the JavaScript documentation on setting that up. Just add foundation.interchange.js AFTER the foundation.js file.

Faster with jQuery 2, fast-click.js, GPU Acceleration and more …

Goodbye Zepto, hello jQuery 2

Foundation 5 uses many features to make it faster. Foundation switched to Zepto (with a jQuery option) for its smaller file size and faster load time but Zepto had some performance issues. So now Foundation 5 uses jQuery 2.

Fast Click for Mobile users

With the integration of fastclick.js in Foundation 5 mobile users will have a snappier experience. FastClick is used for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim of fast-click.js is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.

Improved GPU Acceleration

With GPU Acceleration, Animation will perform significantly better and sleeker in Foundation 5. The Off Canvas feature provides a powerful way to build navigation into screens. You can position Off Canvas menus outside of the viewport and slide them in when activated.

More Powerful Forms

Forms have also been improved in Foundation 5. Foundation features an easy to use, powerful and versatile form layout system. A combination of form styles and the Foundation grid means you can do almost anything.

New command line Tool, Bower and LibSass

Cli

Foundation team has written their own CLI wrappers so you can quickly spin up new projects. Just use ‘foundation new project-name’ and off you go.

LibSass Support

New projects will now use Libsass, a back-end Sass compiling library that will dramatically speed up how long it takes for your SCSS changes to load. Libsass is used to run the code locally (i.e. to compile your stylesheets).

Foundation has started to use Bower, the popular upgrade manager, to make Foundation upgrades more efficient and easier to carry out. Bower is a popular package manager, which solves the problem of front-end package management.

ZURB Foundation 5 Sublime Text Snippets

SublimeText, a very popular editor and a favorite of developers now has some sweet Foundation shortcuts you can use to write crazy fast code. You can read more about Foundation 5 Sublime Text Snippets at official github page https://github.com/zurb/foundation-5-sublime-snippets

Download Foundation 5

Download Foundation 5, give it a try and let us know how you found it.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Anonymous

    Tahir, I published a review of Foundation 5 a few days ago. I absolutely love it. The simplicity of implementing each component makes it super fast easy to build responsive websites that work great. From now on, every project I work on will be based on Foundation.

  • Tahir Taous

    Yes, i belive Responsive Frameworks like Foundation makes it very simple and wasy for developers to create powerful responsive websites without learning alot of code from scratch.

  • Anonymous

    I prefer use the 1200px of responsive grid by Amazium. But this is great once. Nice article!

    • Anonymous

      If you like you can just make Foundations maximum width larger when you download it. Default is 62.5em but you can change it.

  • Anonymous

    That’s true! you can fully customize the Build of Foundation 5 before you download it. I LOVE Foundation 5 and I am working on some free website templates to give away. I made one already, and you can download it for free.

  • Rome

    Thanks for the article Tahir!
    I wonder if you have tried using fastclick.js in foundation 5. The docs do not mention anything about this. Got any ideas?

  • http://papodeblogueiros.com/ Matheus Beck

    I am developing the new template of http://papodeblogueiros.com with the Bootstrap 3 and am very pleased. I thought it more complete than the Foundation, in short, is a matter of taste.

    Thanks for sharing such information with us and congratulations post!

    Sorry my bad english.