Every front-end framework described here is based on the responsive grid. Your content is arranged into rows and columns, which adjust themselves based on screen size.
For instance, if you have three columns of information on a large screen, they may become one column on a small screen.
The responsive grid makes your site look good on desktop computers, tablets, and phones.
Here is an example of the grid in action, thanks to our friends in Sweden:
Notice that the site’s columns shrink in the transition from desktop to tablet, and become a single column on a phone.
More and more, people expect content to look good on all devices. Sometimes, a separate “mobile” web site or app is a good approach. However, a responsive web site is often the clearest path, and frameworks make it easier to implement.
The Heavyweights: Foundation and Bootstrap
Bootstrap was created by people from Twitter, though it is maintained independently of the company. Bootstrap first looked much like Twitter by default, but is becoming more style-agnostic in version 3.
Foundation was created by Zurb, a web development firm, for use with its clients. More than Bootstrap, Foundation was built to be customized. Its default look stands on its own, but is not opinionated.
Here are some key differences:
- Bootstrap is more cross-browser. Bootstrap supports IE 8, while Zurb does not without hack-y workarounds.
- Bootstrap is a larger user community. Recent stats suggest that it powers 1% of the web. This means if you have a question, someone on Stack Overflow will likely answer it. There are fan-created sites like Bootswatch, which provides themes that help you escape Bootstrap’s default look.
- Bootstrap is playing catch-up to Zurb. The upcoming version of Bootstrap takes many cues from Foundation, in that its style is less opinionated, mobile-first, and easier to customize. But Zurb was first, and the next version of Zurb is already in development.
- Zurb is ahead of Bootstrap on HTML5 and responsive design. It recently introduced HTML5-based form validation, can load different images based on screen size, and even scales embedded video.
Neither framework will limit your final result. However, you will likely do more work to customize Bootstrap than you would to customize Zurb.
So Zurb doesn't come with as much out of the box shiny as bootstrap but is way more customisable and defers to the dev more
— da nn olan (@dannolan) July 30, 2013
DesignShack, a blog, noted, “Foundation has the best responsive grid support,” and “Bootstrap has the most expansive UI. For internal tools, that’s great. For client sites, we end up fighting to override Bootstrap.”
Then again, among desktop browsers, IE 8 has a 22% market share. When considering a framework for an existing site, look at its percentage of IE 8 users. Consider if the number is significant enough to sway your decision toward Bootstrap, then consider whether Foundation’s strengths are worth a hack-y solution for IE 8 support.
The Nitty Gridy: Grid-only frameworks
For heavily customized sites, it may take longer to customize a framework l than to write CSS from scratch. In those cases, if the site needs to look good on every device, consider a grid-only framework.
The most popular grid-only framework appears to be Skeleton.
More support for your decision
See an in-depth comparison of Bootstrap, Foundation, and Skeleton.
In addition the documentation, there are tutorials available online, including CSS: Frameworks and Grids from Lynda.com (requires paid membership).
Thanks to Jess Dang from Cooksmarts, my favorite cooking web site, for providing the previous Lynda.com link.
In an upcoming post, we’ll talk with Jess about her experience writing CSS from scratch for Cooksmarts.
Also coming up, I’ll choose a framework for my upcoming web app.
@coreyITguy cool Corey! Interesting fact- Bootstrap, Foundation and Skeleton were all created by ZURB designers.
— Bryan Zmijewski (@bryanzmijewski) August 1, 2013
Hired.com brings Rails job offers to you. Free for candidates. Salaries from $75,000 to $250,000. Sign up now!