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 and Bower
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. 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-snippetsDownload Foundation 5
Download Foundation 5, give it a try and let us know how you found it.Frequently Asked Questions about Foundation 5
What is Foundation 5 and how does it differ from other versions?
Foundation 5 is a responsive front-end framework that allows developers to design websites and apps that are accessible on any device. It is the fifth version of the Foundation framework and comes with several improvements over its predecessors. These include faster JavaScript, smarter image loading, and better accessibility. Unlike previous versions, Foundation 5 also includes a command-line tool called Foundation CLI that makes it easier to create projects and add components.
How can I get started with Foundation 5?
To get started with Foundation 5, you need to download the framework from the official website. Once downloaded, you can use the Foundation CLI to create a new project. The CLI also allows you to add components to your project as needed. Additionally, there are several online tutorials and guides available that can help you understand how to use Foundation 5 effectively.
What are the main features of Foundation 5?
Foundation 5 comes with a host of features designed to make web development easier and more efficient. These include a responsive grid system, a variety of pre-designed UI components, custom form styles, and a powerful JavaScript plugin library. Foundation 5 also includes a command-line tool for easier project management.
How does Foundation 5 improve accessibility?
Foundation 5 has been designed with accessibility in mind. It includes features like ARIA roles and attributes, which help to make your website or app more accessible to users with disabilities. Additionally, Foundation 5’s JavaScript plugins have been designed to work well with screen readers and other assistive technologies.
Can I use Foundation 5 with other front-end frameworks?
Yes, Foundation 5 can be used alongside other front-end frameworks. However, it’s important to note that using multiple frameworks can sometimes lead to conflicts or compatibility issues. Therefore, it’s recommended to thoroughly test your website or app if you choose to use Foundation 5 with another framework.
What kind of support is available for Foundation 5?
Foundation 5 is backed by a large and active community of developers. If you encounter any issues or have questions about the framework, you can reach out to the community through the official Foundation forum or on GitHub. There are also numerous online tutorials and guides available that can help you get the most out of Foundation 5.
How does Foundation 5 handle responsive design?
Foundation 5 uses a flexible grid system to handle responsive design. This grid system allows you to easily create layouts that adapt to different screen sizes. Additionally, Foundation 5 includes a variety of responsive UI components that can be used to build a fully responsive website or app.
Can I customize Foundation 5 to suit my needs?
Yes, Foundation 5 is highly customizable. You can easily modify the framework’s CSS and JavaScript to suit your specific needs. Additionally, the Foundation CLI allows you to add or remove components from your project as needed.
Is Foundation 5 suitable for beginners?
While Foundation 5 does have a bit of a learning curve, it is suitable for beginners. The framework’s documentation is comprehensive and easy to understand, and there are numerous online tutorials and guides available to help you get started.
What are the system requirements for Foundation 5?
To use Foundation 5, you need to have Node.js and Git installed on your system. Additionally, if you plan to use the Foundation CLI, you’ll also need to have Ruby installed.
Tahir TaousTahir Taous is founder of Just Learn WordPress, a training site where you can learn how to create and manage websites with WordPress, WordPress essential training, theme development courses free video tutorials and articles.
