Skill Level: Beginner - Intermediate

Last month we talked about responsive, mobile-first web design (read the article¹) 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 framework² such as Bootstrap³, Foundation⁴ or Skeleton⁵. 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 queries⁶ 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 Apart⁷:

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 page⁸ 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 link⁹) displays a hamburger icon¹⁰ (or menu icon) and hides the navigation, which would normally break onto multiple lines at this width.

Some notable Bootstrap features are responsive embeds¹¹, modals¹², scrollspy¹³, and affix¹⁴, though the real magic is in the grid (see Erik Flowers’ insightful article¹⁵.) 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 Bootstrap¹⁶, 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 2012¹⁷. Foundation also offers similar default CSS, source code and custom versions. Check out Getting Started¹⁸ 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 apps¹⁹).

Some of my favourite Foundation features are magellan²⁰, interchange responsive content²¹, top bar²², off-canvas²³ and equalizer²⁴. 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