Image courtesy of Zurb
We’ve come up with ten! This new cleaned-up, stripped-back framework is an excellent starting place for developers looking to rapidly prototype or build a full-featured front-end experience.
Designers will appreciate the new flattened UI, how easy it is to stick do things mobile-first and the ability to render different content on specific device widths.
1. Compass keeps things semantic
Foundation can be used with completely semantic markup. As Foundation is built with Compass, it allows the abstraction of presentation to be easier and faster. No more extraneous IDs, classes or non-semantic empty HTML elements. Cleaner markup means easier to maintainability and reusability.
2. Faster development and page load speed
3. A true mobile-first philosophy
Foundation is built with small devices as a priority, in the true spirit of progressive enhancement. Foundation is optimised for mobile devices, and version 5 takes it even further with greater support for touch input. Hardware acceleration has been added for smoother transitions and animations, making for a more native-app style experience on mobile.
The industry’s finest CSS pre-processor, sitting on top of the enormously helpful Compass library, makes for a more modular, pragmatic approach to presentation.
5. Everything’s responsive
Foundation 5 takes responsive design to the next level, with the much-needed medium grid accommodating for tablets, mini-tablets, high-def mobiles and small monitors. Interchange has had a revamp and now allows you to serve any kind of unique content to specific devices, without the cost on page-load time or maintainability.
6. Rails friendly
As Foundation is built with Rails, the new gem works flawlessly with any Rails project, and with more detailed documentation it’s even easier to quickly integrate Foundation’s presentational magic at any stage of development.
7. Improved accessibility
Accessibility is something we can always improve on as developers. Foundation 5 makes it easier, as all of their components are 508 compliant out of the box, which will help build good habits and a better experience for users with disabilities.
8. Customisability for developers of all levels
Foundation 5 offers developers three levels of customisation:
- The in-browser customiser is great for small projects and projects where time is of the essence or minimal style changes will need to be made.
- You can build a Foundation project with Compass for more presentational control.
- Similar to Bootstrap 3, Foundation 5 also comes in a development package with Grunt and Libsass for greater speed and control.
9. Surprisingly readable
In Foundation 5 all the components have been well commented, which makes it very easy to understand the presentational decisions made. This also makes things easier for developers less familiar with CSS!
10. Lightning-fast prototyping
Bootstrap 3 comes with some really solid JS plugins, but they are quite simple and stripped back. Foundation provides developers with some rather more grunty interactive components. These are ideal for projects with limited time and resources to spend on the user experience. This means faster prototypes, and more time for the code monkeys to do what they do best. The flat, stripped back UI of Foundation 5 makes for a more bespoke, modern look.