Foundation: a Compelling Alternative to BootstrapBy Joe Hewitson
Front end frameworks have, in recent years, helped web developers improve design consistency and maintain mobility in today’s responsive web world. Twitter’s Bootstrap framework quickly became the unanimous favorite thanks to its large community, strong developer backing and topnotch compatibility.
Despite such success, many in the web design arena have jumped ship for a relative newcomer.
Foundation, a front end framework from the fine folks at Zurb, offers a deep bag of web design tools similar to Bootstrap with a few notable differences that have proven irresistible to some. With that, let’s dive right in and explore the key factors that have tempted many away from GitHub’s most popular project.
1. Have it your way
One of the most common complaints lodged against Bootstrap is its heavy handed approach to design. This knock against it could easily be attributed to the framework’s overwhelming success. Bootstrap has provided a CSS layout solution that works marvelously out of the box with very professional results. The problem with this is that customizing the underlying CSS beyond mere color changes can be a rather frustrating experience. As such, Bootstrap driven web designs often look very similar if not exactly the same.
Foundation on the other hand is far less opinionated about design from the get go. For web developers this means less “undoing” of default styles and more focus on fine tuning the look and feel of the site.
2. Mobility minded
Bootstrap found its way into this world thanks to a small team of developers at Twitter searching for a better way to share common design patterns among internal team members. In comparison, Foundation was built on the premise of flexible mobility first.
The topic of SASS vs LESS can easily devolve into an argument of opinion. For this reason we’re not looking to find an empirical answer as to which is better, but rather discuss why Foundation’s use of SASS can prove beneficial to web developers.
Using CSS helpers takes a lot of the leg work out of generating style patterns. An unfortunate byproduct of this streamlining is the superfluous markup automatically created. SASS users can enjoy the CSS authoring abilities of the Compass project. Notable reasons to enjoy Compass include cleaner markup and automatic mixin updates, both of which lead to easier maintenance of design patterns.
Building on the mobility focus, Foundation utilizes the Zepto library instead of the full fledged jQuery implemented by Bootstrap. Zepto weighs in under 10kb when compressed meaning faster load times and decreased bandwidth use on mobile data plans.
5. Zurb suite compatibility
There you have it.
Zurb’s Foundation is clearly the best front end framework available and everyone with the slightest involvement in web design should use it.
All sarcasm aside, the fine minds over at Zurb headquarters have built a wonderful tool for laying the groundwork in grid based web design.
From the points above it becomes evident that Foundation differentiates itself from Bootstrap by remaining more design agnostic while focusing on responsive, mobile web development. Add to that the reusable mixins, semantic grids and cleaner markup and you have a good idea as to why many have migrated from Twitter’s Bootstrap.
And hey, it’s free, so why not give it a try and decide for yourself?