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 team at Zurb recognized the mobile browsing trend early on and made it their focus to provide an extensible CSS framework that would scale equally well across a multitude of devices, screen sizes and resolutions. Those spending any measurable amount of time developing mobile sites will find Foundation’s “mobile first” approach makes for easier development on a small screen. Also of note on the mobility front, Foundation has a lighter footprint thanks in large part to its use of smaller JavaScript files, which we’ll get to in a bit.
3. SASS
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.
4. Zepto
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.
While it may be true that Zepto is a subset of jQuery, it maintains compatibility with a majority of commonly used APIs. For those without obscure jQuery needs, Zepto provides a lean and efficient JavaScript library that excels on mobile devices. It may be worth bringing up here that Zepto’s IE compatibility is less than stellar when compared to jQuery. If Microsoft’s browser is responsible for much of your traffic, issues could arise.
5. Zurb suite compatibility
The Foundation front end framework isn’t Zurb’s only claim to fame. In fact, it might not even be its most notable product. Its roots firmly planted in design consultation, Zurb has a long track record of developing cutting edge web design tools like the popular feedback app Notable and touch optimization tester by the name of Plunk. Zurb has also made a name for itself by producing high quality JavaScript plugins and downloadable tools under the guise of “experiments”. For web designers already familiar with Zurb’s web design “experiments” found in their Playground, Foundation becomes a highly extensible platform for web design.
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?
Joe HewitsonGrowing up with a love for coding, I’ve greatly enjoyed learning many forms of programming, especially web development. This has lead me to professional success ranging from the creation of cutting edge, web based, healthcare applications to simple CMS frameworks.
