TodoMVC. Should You Use Bootstrap or Foundation? (Photograph from Flickr user Uppy Chatterjee) I’ve been teaching web design in some capacity for about 5 years now, and lately one of the most frequently asked questions is, “Should I use Bootstrap or Foundation?” Bootstrap (currently at v3.2) and Foundation (currently v5.3) are the two most popular front-end frameworks right now, so it’s certainly a sensible question to ask.
Choosing between Bootstrap or Foundation is like choosing between red or white wine; one isn’t necessarily better than the other, they just pair well with different things, and people tend to develop personal preferences. However, this isn’t just fuzzy taste buds we’re talking about here. This is code, with explicit logic and intent. So, there has to be some kind of difference, right? Free trial on Treehouse: Do you want to learn to code? Grid System The most prominent part of a front-end framework is the grid system. Block grids in Foundation can convert an unordered list into a grid. Sizing Units Customization. Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton. Bootstrap 4.0.0-alpha is a fairly large update to the framework. It has dropped Less support in favor of Sass, converted from px-based to rem-based sizing, improved its grid system, and dropped IE8 support.
Also, all its JS plugins were re-written in ES6, it now uses a customized reset CSS file called Reboot, and offers flexbox support via a Sass boolean variable. In addition to this update, Bootstrap now offers themes at themes.getbootstrap.com. Also, Bootstrap will continue supporting version 3, unlike the dropping of version 2 support after the release of version 3. You can read more here. Foundation 6 is a fairly major update which includes more grid flexibility, custom breakpoints, optional flexbox, and more. Like Bootstrap 4, Flexbox is now toggleable via Sass in Foundation 6. The Sass/CSS has been reworked and consolidated, and there are fewer default styles to override on common elements.
Skeleton 2 was updated in December 2014 after remaining mostly unchanged for about three years. Responsive CSS Framework Comparison: Bootstrap, Foundation, Skeleton. Initializr - Start an HTML5 Boilerplate project in 15 seconds! HTML5 Boilerplate: The web’s most popular front-end template. Foundation | The Most Advanced Responsive Front-end Framework from ZURB. Bootstrap.