Among available CSS frameworks these two stand out from the crowd. Packed with styles, tools and components both deliver an easy to manage way to quickly build an up-to-date responsive website layout.
A CSS framework provides a range of turnkey components that are already designed for almost instant deployment. In particular, both Bootstrap (previously known as Twitter Bootstrap) and Zurb Foundation contain:
Advantages of using a CSS framework are rather obvious. Along with faster development and deployment of a website, CSS frameworks deliver standardized look and feel of the website in all major desktop and mobile browsers, easier configuration, higher stability. Also, with frameworks like Bootstrap or Foundation you don’t have to reinvent the wheel, you just use stable solutions tested by thousands of developers.
What’s important is the large community and superior support for both Foundation and Bootstrap. There’s also a vast number of plugins, add-ons and extensions bringing in all kinds of functions not available in the frameworks as standard.
The latest stable versions of the frameworks are Bootstrap 3 and Foundation 6. There is also Bootstrap 4 alpha currently in development and featuring a lot of innovations (see below).
Both frameworks are quire popular, but Bootstrap is a leader here.
So, what framework should you prefer? Leaping ahead, the concluding answer is – they are both good, but there are differences that may have effect on your choice depending on the goals of your website and specifics of your industry.
Here is a brief overview of Bootstrap 3, Bootstrap 4 and Foundation 6 with more detailed function-by-function comparison going below.
Bootstrap was first presented in 2011 under the name of Twitter Blueprint. The current stable version of this front-end framework is arguably the most popular CSS framework now.
Bootstrap 4 is a total overhaul of Bootstrap 3. The new version switched to the more popular SASS CSS preprocessor. Most of the code is new, and the majority of components were also rewritten. The new version moves Bootstrap 3 functionality forward by upgrading it to the more flexible and advanced FlexBox-driven markup.
Foundation was first presented to the public in the same 2011 as Bootstrap. This modular framework was initially based on SASS and provided a large set of ready to use components for extra-fast development.
| Bootstrap 3 | Bootstrap 4 | Foundation 6 | |||||||||||||||||||||||||||||
| CSS Preprocessor | LESS, SASS | SASS | SASS | ||||||||||||||||||||||||||||
| Grid system | 12 columns, responsive | 12 columns, responsive | 12 columns, responsive | ||||||||||||||||||||||||||||
| Container minimal sizes * |
|
|
|
||||||||||||||||||||||||||||
| Primary sizing unit | Pixel, px | Relative units, rem | Relative units, rem | ||||||||||||||||||||||||||||
| Browser support | All modern browsers, IE8+ | All modern browsers, IE10+ | All modern browsers, IE9+ | ||||||||||||||||||||||||||||
| Block support | Fluid, fixed | Fluid, fixed, flexible | Fluid, fixed, flexible | ||||||||||||||||||||||||||||
| Supported by Bootstrap Editor | Yes | Yes | Yes |
* - all these sizes can be changed by editing SASS/LESS constants when generating CSS, or in online builder.
As you can see, frameworks are generally similar in terms of basic functionality. Differences are in details.
Now, let’s take a close look at the details to learn the strengths and weaknesses of each solution.
Being far more popular, Bootstrap delivers an enormous number of plugins and tweaks. Moreover, many of the tweaks come as standard in the form of built-in options, CSS classes or JavaScript components. The community and independent developers further broaden the range of Bootstrap’s capabilities. As a result, Bootstrap 3 and Bootstrap 4 are easy to start with, and these frameworks provide a decent result even with basic components.
Foundation is popular too, so it too has many tweaks to offer. Yet the accent is flexibility here. You don’t get many options from the start, but can easily customize almost anything using SASS without much of an effort. Where Bootstrap apologists often have to go with a third-party theme and non-ideal layout, Foundation users can fine-tune the standard components and get better result.
Summary
Bootstrap: a lot of add-ons for quick start.
Foundation: still enough tweaks and more flexible customization of them.
Thanks to SASS available both in Foundation and Bootstrap 4, customization is easy. You can use SASS/SCSS to manage styles and components of the framework on the fly, so it is a tie here.
However, as we said above, Foundation delivers more flexibility out of the box, while Bootstrap can be a little bit too tedious to tailor its layout to something less standard. Foundation does not enforce styles or approaches. It creates a base (well, literally a foundation) to build whatever design you want.
Summary
Bootstrap: harder to customize but more out of the box capabilities.
Foundation: easier to customize thanks to the lighter and more flexible barebone.
A definitive leader here is Bootstrap:
A superior number of third-party themes are available for both Bootstrap 3 and 4, ranging from lightsome styling to complete overhaul of the standard design.
Many developers think that the majority of Bootstrap themes look pretty much “bootstrapish”. This is true, but only for the most popular and usually free themes. In fact, the internals of Bootstrap are still very customizable even though the process may be more complicated. The majority of designers and layout specialists are more experienced in Bootstrap than in Foundation (due to lower popularity of the former). So in fact there are no formidable obstacles to create a complex or non-standard template. Plus, you still can use Bootstrap without any themes at all – just as a CSS barebone and a grid system, and style all elements the way you want.
Examples of Bootstrap themes
Foundation themes usually look really different from each other.
Examples of Foundation themes
Another intrinsic feature of Foundation themes is they are far more designer friendly than those of Bootstrap. This means making slight changes and tinkering with the layout, visuals and behavior is easier in Foundation. In Bootstrap, creating a unique look and feel requires a lot of forcing your way through pre-defined defaults of the template.
Summary
Bootstrap: a lot of free themes that look typical to Bootstrap unless strongly customized. However, it is easy to find a designer who creates a unique design for you.
Foundation: less third-party themes, but more designer freedom. In the end, you got the same possibilities, but fewer designers and web developers – either freelance or companies – who can work with Foundation are available on the market.
From a brief comparison it may seem that both Bootstrap and Foundation are pretty similar in the range of functions they provide. And that’s true. However, there are slight differences in what and how things work in each solution.
Zurb Foundation’s strengths are block grids, gutters, flexbox and generally more flexible responsive design. For instance, in Foundation you can make a gutter-free row in the grid by simply adding one class.
Also, Foundation supports LTR languages from the beginning and offers a built-in way to create e-mail with responsive design (Foundation for E-mails).
Block grid is a very convenient way to arrange an arbitrary number of equal-sized blocks across the entire screen width.
Gutters are dynamic spacing between two columns in a row, and the space between the edge of a grid and the edge of the page. Responsive gutters allow for better visuals of a grid on various screen sizes.
Flexbox is extremely handy for grids where you don’t know the exact number of columns (galleries, previews, showcases). The flexbox grid automatically arranges any number of boxes and evenly distributes them on the screen.
And the off-canvas menus are an excellent way to free screen space of navigation when you don’t need it.
Bootstrap is not as flexible as Foundation when it comes to responsive grids, but it compensates this with utter simplicity. Creating a basic responsive grid design is a little bit easier in Bootstrap though.
Since version 4 Bootstrap also has flexbox functionality. Combined with other novelties and enhancements over Bootstrap 3 this effectively makes Bootstrap v4 a superior CSS framework. Even though it is alpha yet.
But where Bootstrap really shines is forms. They have better design than is less dependent on the browser. Foundation’s form visuals rely on a browser and generally require more attention to put them in order with the rest of the website. On the other hand, Abide, the Foundation form validation library, makes it easy to check the contents of forms on the client side. Bootstrap’s form validation is not that sophisticated and only appears in Bootstrap 4.
Finally, Bootstrap code is cleaner and easier to write. It features fewer classes and therefore has more comprehensible DOM as well.
From the point of an end user, both frameworks deliver excellent user experience. Really, this is a tie.
Developers also admit that Foundation and Bootstrap go very close. Since Bootstrap is easier to start with and delivers a lot of UI components out of the box, websites based on this framework generally require less front-end development. And thanks to cleaner code back-end development is easy too. One example is that a default Bootstrap grid features one class less compared with Foundation, specifically, columns.
The backside of the same coin is that any non-typical front-end design will require a Bootstrap developer to rip his hair out. Bootstrap styles almost everything, so when your design or layout is going to be very different from the default, you will waste a lot of time trying to fix what is not broken. Foundation is way friendlier to front-end developers.
Now, for the internals. Foundation is based on SASS from the start, while Bootstrap switched to SASS only in version 4. This means two things. First, if you prefer the LESS CSS preprocessor, you may find Foundation is not your cup of tea. Second, if you have to migrate from Bootstrap 3 to Bootstrap 4 you may need to rework quite a lot.
Summary
Bootstrap: friendly when you don’t need drastic changes of the default front-end.
Foundation: friendly to developers and designers, but requires more effort with all other things being equal.
Both Bootstrap and Foundation are well-thought-out frameworks, and are equally good for creating responsive grid layouts of pages. However, there’s one more thing we need to compare.
You see, creating responsive content of pages is often a job of content managers and editors, not website designers and layout specialists. This means pages of a website are often created in a visual content editor, like CKEditor or TinyMCE.
Let’s see if Bootstrap and Foundation are good when it comes to visual content (and grid layout) editing. We consider CKEditor and TinyMCE as they are two most popular editors supported by all major CMS.
The support for both Bootstrap and Foundation markup in these editors can be easily added by installing plugins developed by JS+, namely Bootstrap Tools, Bootstrap Table Tools, and Bootstrap Editor. Or, respectively Foundation Tools, Foundation Table Tools, and Foundation Editor if you want to add support of Foundation.
Moreover, for the topmost flexibility you can install Bootstrap Editor as a standalone component (JavaScript edition), not as a CKEditor/TinyMCE plugin. What are the benefits of such an approach? In this case, CKEditor (or TinyMCE) becomes a plugin for Bootstrap Editor, providing its wide content editing capabilities to the content of the selected responsive columns of the website layout. Simply put, you can visually add rows and columns, modify styles and adjust behavior of the Bootstrap (or Foundation) grid system.
Needless to say, you still can install Bootstrap Tools and Bootstrap Table Tools for even more powerful editing functions, as well as many other plugins by JS+. Conveniently, plugins installed to CKEditor are caught by Bootstrap Editor on the fly, so they work as native plugins extending the functionality of the content editor.
Although, we have to admit that new features in JS+ plugins are prioritized to Bootstrap versions first, then to Foundation. So, we recommend selecting Bootstrap unless you have some specific requirements.
Summary
Bootstrap: full-featured visual editing of responsive layouts and content in CKEditor or TinyMCE is available by installing JS+ plugins.
Foundation: the same as above except for lower priority of updates and new features in JS+ plugins.
Bootstrap is extremely popular and is a de facto standard today. Hence a large community. However, Foundation is also very popular, and comparing the numbers of active contributors on GitHub, Foundation is even leading.
The support is equally great. Documentation of each framework is extensive, up to date and actually helpful. It is also good to know that older versions of the frameworks are not discontinued. For instance, Bootstrap 3 is going to receive updates even after the final release of Bootstrap 4, according to developers.
Ok, may be you won’t be excited to hear that, but we don’t know which of two frameworks you should choose. In fact, both of them are equally good as long as you know of and understand the philosophies, goals and limitations under hood of each tool.
Bootstrap is good to quickly develop a working, nearly standard-looking and pretty functional front-end. Not as designer friendly as the competitor, it features a lot of widgets and components from the start. Bootstrap offers enough to not worry about customization unless you need something really unique. And Bootstrap 4 now in the alpha stage is going to present even more.
We recommend to stick with Bootstrap if you want less coding and more action. Also, Bootstrap is an indisputable standard when it comes to responsive formatting of HTML content and web page templates.
Foundation is… well, a foundation. You can build your choice of a village hut or a skyscraper on it. At least as long as you can devote enough time for that. Less themes and ready components means you cannot quickly deploy a website without investing in creating the front-end first. But thanks to extremely flexible and responsive behavior (with a bunch of nifty Foundation-only gimmicks) the resulting website will look truly authentic compared with the corporate style of millions of Bootstrap offsprings.
