Front-end framework speed dating

In my last post, I talked about the emergence of front-end frameworks. Creating a high quality responsive web site does not require writing all of the CSS from scratch, though doing so is a viable option. Frameworks start you out with a cross-browser, standards-compliant CSS and JavaScript base. When properly used, frameworks save time and result in modern, maintainable web sites.

The Grid

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:

A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!
A responsive web site for a municipality in Sweden, care of Per Axbom. Try it yourself!

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

Foundation and Bootstrap are two popular front-end frameworks.  Both provide a fully functional default look, using pre-built CSS and JavaScript.

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.
  • Zurb has more JavaScript goodness. Even though Zurb’s base is more style-agnostic, it offers more pre-fab tools than Bootstrap. Magellan lets a user to jump to different parts of the page from a fixed navigation bar.  Joyride takes the user on a tour of the page through tooltips.

Neither framework will limit your final result. However, you will likely do more work to customize Bootstrap than you would to customize Zurb.

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.

You will start with a bare layout that adapts to various devices, uses CSS best practices, and accounts for cross-browser differences. Then, it’s up to you to write a ton of CSS. You will also need to write more JavaScript or find libraries if you are planning any client interactivity.

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.

Check out Foundation’s documentation and Bootstrap’s documentation. The documentation for both frameworks is comprehensive, and somewhat intuitive if skimmed from beginning to end.

In addition the documentation, there are tutorials available online, including CSS: Frameworks and Grids from (requires paid membership).

Thanks to Jess Dang from Cooksmarts, my favorite cooking web site, for providing the previous 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.

Update 8/1/2013: brings Rails job offers to you. Free for candidates. Salaries from $75,000 to $250,000. Sign up now!

One thought on “Front-end framework speed dating”

Leave a Reply