Bootstrap vs. Foundation, Pt. 1: An introduction to grid-based frameworks

Skill Level: Beginner - Intermediate

Last month we talked about responsive, mobile-first web design (read the article1) and the importance of factoring in different screen sizes and resolutions. One of the best ways to approach responsive web design (RWD) is to start with a mobile-first CSS framework2 such as Bootstrap3, Foundation4 or Skeleton5. The two frameworks we will be covering in this blog are Bootstrap and Foundation, but I do recommend reading the Skeleton framework documentation on media queries6 for an interesting take on responsive breakpoints.

In user experience design, “mobile first” means putting the needs of the mobile user first. In front-end development, a mobile-first CSS framework targets devices with the min-width property and prevents small devices from loading styles intended for tablets or desktops. Coding in this way ensures a smooth transition between the breakpoints of common phones, tablets, PCs and widescreen monitors. Most mobile-first responsive websites will adapt as you drag your browser window to increase/decrease the width.

Introducing Bootstrap

Bootstrap was originally created by two Twitter developers named Mark Otto and Jacob Thornton. Then called Twitter Blueprint, it was initially intended to reduce the maintenance of organizing multiple libraries used for interface development. In early 2012, Otto reports in Issue 342 of A List Apart7:

After some early meetings around this one product, we set out with a higher ambition to create a toolkit for anyone to use within Twitter, and beyond. Thus, we set out to build a system that would help folks like us build new projects on top of it, and Bootstrap was conceived.
— Mark Otto, 2012

Check out the Bootstrap examples page8 to see various ways you can easily customize the layout and functionality (try and drag your browser window to mobile width, then increase it to the maximum size your monitor supports.) Notice when you reduce the screen to less than 768px the navbar (direct link9) displays a hamburger icon10 (or menu icon) and hides the navigation, which would normally break onto multiple lines at this width.

Some notable Bootstrap features are responsive embeds11, modals12, scrollspy13, and affix14, though the real magic is in the grid (see Erik Flowers’ insightful article15.) Read the documentation to choose your flavour: production-ready default CSS, source code version in Less or Sass (both require a compiler and some custom setup). You can also customize Bootstrap16, defining which elements are included as well as editing default variables.

Foundation by Zurb

Like Bootstrap, Foundation originated as an internal project (in this case, a style guide they used on every client project) as described in this historical read from 201217. Foundation also offers similar default CSS, source code and custom versions. Check out Getting Started18 for more information about CSS/Sass versions and a kitchen sink (displaying every Foundation element on a single page). Foundation offers a number of templates, building blocks and resources which can be very useful when starting a new project (example: bordered alerts for social messaging apps19).

Some of my favourite Foundation features are magellan20, interchange responsive content21, top bar22, off-canvas23 and equalizer24. Compared with my preferred Bootstrap features, you can start to see a lot of similarities. Either framework is a viable option to create standards-compliant, mobile-first code. Pro Tip: Whichever framework you decide, get familiar with the source code versions, compiling minified CSS after modifying Less/Sass files. Managing your own build is the best way to leverage the full power of these frameworks, and we’ll be covering exactly that next month.

Reference Links:

1.    http://www.smartt.com/insights/responsive-web-design-and-retina-displays
2.    https://en.wikipedia.org/wiki/CSS_frameworks
3.    http://getbootstrap.com/
4.    http://foundation.zurb.com/
5.    http://getskeleton.com/
6.    http://getskeleton.com/#queries
7.    http://alistapart.com/article/building-twitter-bootstrap
8.    http://getbootstrap.com/getting-started/#examples
9.    http://getbootstrap.com/examples/navbar-fixed-top/
10.  http://blog.placeit.net/history-of-the-hamburger-icon/
11.  http://getbootstrap.com/components/#responsive-embed
12.  http://getbootstrap.com/javascript/#modals
13.  http://getbootstrap.com/javascript/#scrollspy
14.  http://getbootstrap.com/javascript/#affix
15.  http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-gri...
16.  http://getbootstrap.com/customize/
17.  http://zurb.com/article/1224/11-things-you-didn-t-know-about-foundatio
18.  http://foundation.zurb.com/develop/getting-started.html
19.  http://zurb.com/building-blocks/bordered-alerts
20.  http://foundation.zurb.com/docs/components/magellan.html
21.  http://foundation.zurb.com/docs/components/interchange.html
22.  http://foundation.zurb.com/docs/components/topbar.html
23.  http://foundation.zurb.com/docs/components/offcanvas.html
24.  http://foundation.zurb.com/docs/components/equalizer.html