Bootstrap vs. Foundation, Pt: II: Front-end Framework Comparison (using custom builds)
Difficulty Level: Expert
Last month we introduced two of the most popular mobile-first CSS frameworks: Bootstrap and Foundation. Click here1 to read the introduction article for a refresher on some basic concepts that we will build on in this article. Geared towards Intermediate and Expert users, this article assumes you are comfortable configuring tools such as Bower, Grunt and Yeoman using the command line. If all of these terms are new to you, you might want to start with this introduction to Yeoman2.
Bootstrap vs. Foundation
A full comparison of Bootstrap and Foundation is outside the scope of this article. Check out this blog post3 from Team Treehouse teacher Nick Petit which gives a great summary of the core differences (editor’s note: The release of Bootstrap 4 has made a lot of these differences irrelevant.) Foundation enthusiasts will be happy to hear that Bootstrap has finally followed suit, switching from LESS to Sass (click here4 for an introduction to Sass, or Syntactically Awesome Stylesheets). Bootstrap has also made the shift from pixels to relative Ems. If you’re unfamiliar with Ems/relative Ems, check out this article for a background5.
Before configuring a custom build, we strongly recommend you install a package manager (we recommend Homebrew for Mac6 and Chocolatey for Windows7.) Using a package manager to install Ruby, Compass, Sass, and Node.js means you can manage the updates for each tool in one central location. This article by Chris Chernoff8 does a great job explaining the setup procedure.
Whether you’re comfortable with the command line or prefer to use a simple one-click solution like Codekit/Prepros, using a custom build will save you time and cut down on the overall size of your framework.
If you would like more insight into different front-end builds or have questions about the article, I invite you to leave a comment or connect with me at email@example.com.