Bootstrap vs. Foundation, Pt: II: Front-end Framework Comparison (using custom builds)

Difficulty Level: Expert

Recap

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.

Whichever framework you prefer, both options provide a custom build option which allows you to leverage the full power of each framework while retaining creative control. You can edit a single settings/variables file which will cause the framework to recompile the distributed CSS/Javascript (rather than creating your own custom CSS/Javascript to override it.)

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.

Once you’re up and running, you can use yeoman to scaffold a new web with one command, configuring Compass/LibSass support, Modernizr, and more. Check out this guide from Bootstrap9 for a simple step-by-step process (remember to install each tool using a package manager such as Homebrew/Chocolatey.) Another simple one-click solution is Codekit by developer Bryan Jones10. This tool will grab the latest version of Foundation from the git repository and provides a GUI to add/remove bower components. It also compiles/minifies your Sass/Javascript, animates changes to CSS and automatically refreshes your browser when you save a file. If you accidentally try to save a file with a syntax error, Codekit will throw an error (blocking the compilation of your code) and define the exact line item the error occurs on. Though Codekit is for Mac users only, Prepros11 is a solid contender that offers a Windows and Linux version.

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 todd.baylis@smartt.com.

Links:

  1. http://www.smartt.com/insights/bootstrap-vs-foundation-pt-1-an-introduct...
  2. http://yeoman.io/learning/
  3. http://blog.teamtreehouse.com/use-bootstrap-or-foundation
  4. http://sass-lang.com/guide
  5. https://codemyviews.com/blog/whats-the-deal-with-em-and-rem
  6. http://brew.sh/
  7. https://chocolatey.org/
  8. http://burnedpixel.com/blog/beginners-setup-guide-for-ruby-node-git-gith...
  9. http://v4-alpha.getbootstrap.com/getting-started/build-tools/#tooling-setup
  10. https://incident57.com/codekit/
  11. https://prepros.io/