When comparing Foundation vs HTML5 Boilerplate, the Slant community recommends Foundation for most people. In the question“What are the best Bootstrap alternatives?”Foundation is ranked 2nd while HTML5 Boilerplate is ranked 8th. The most important reason people chose Foundation is:

Pros

Pro

Responsive design philosophy

Pro

Uses REMs instead of pixels

Foundation uses REMs instead of pixels, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply put, using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%.

This is great for making your site mobile friendly. There is also a Sass function in Zurb that converts pixels to REMs so if you're used to thinking in pixels, you don't have to learn a different system.

Pro

RTL support

Allows easily changing text direction.

<html class="no-js" lang="ar" dir="rtl">

Pro

No style lock-in

Styles are purposefully undeveloped to encourage differentiation between different sites using Foundation.

Pro

Block grid

Foundation has a feature called block grid. Block grid gives designers the power to divide the contents of an unordered list into a grid that is evenly spaced. Furthermore, Foundation also takes care of collapsing columns as well as removing gutters.

Easily extensible with a selection of add-ons

Pro

Uses Interchange to load responsive content

Foundation comes with Interchange, it makes use of media queries to load images responsively and create content that's suited to different browsers and devices.

Pro

Easy customization

Just by looking at the name, Foundation merely provides designers with a foundation of sorts on which they can build their design. It can be customized easily through SASS, a powerful CSS pre-processor or by overriding the default CSS styles.

Pro

Support for off-canvas navigation

Foundation comes with an easy way of creating off-canvas menus.

Pro

Built-in form validation

Pro

Good mobile support

Foundation was one of the first frameworks to adopt a mobile-first philosophy. By focusing on mobile design first, Foundation makes designers think on what kind of content is important, relevant and interesting to the users without thinking too much on the space.

Pro

Includes a comprehensive set of server configuration files

These configuration files may help increase performance of the webapp.

Pro

Includes Modernizr

Modernizr checks browser support for HTML5, CSS3, as well as a few other miscellaneous elements and allows for easily writing fallbacks if they're not supported.

Pro

Documented and undocumented versions

To help out newcommers to either programming in general or HTML5 Boilerplate specifically, the boilerplate includes in-depth docs that help understand how things work and why certain choices are made. The documentation is highly comprehensive going even as far as to describe every single line of normalize.css that the H5BP includes.

Pro

Cross-browser normalization

H5BP includes normalize.css that will help fix inconsistencies in the way browsers render elements.

Pro

Performance optimizations

HTML5 Boilerplate theme doesn't only provide a base template for building your next modern site. It also has performance optimization features built into it which include stuff like html + js minification , image size reduction as well as css minification. This link here describes how to optimize your shiny new html5 site using these built in features.

Pro

Optional support for XHR and Flash

With optional support for XHR, we can use techniques such as XHR eval and XHR injections to optimize the loading of external scripts and significantly reduce page load times. Alongside XHR, built-in support for Flash means that you can use your old swf/flash content on your website, where you feel you're not ready for HTML5 yet.

Ad

Cons

Con

Documentation is not that good

Con

Can be hard for beginners to grasp

Since Foundation is built to be customizable, it's default style may not be very appealing for most. While it's true that most production-ready websites shouldn't be using the default style of a css framework (they would all end up looking the same), this is even more true for Foundation.

Con

Not UMD pattern in core

This problem will bring attention when used with Angular, React and other JS framework. It is important to know that they create app version of this framework.

Con

Not a complete solution

HTML5 Boilerplate is basically just that, a template or a basis on which to build an HTML page. It doesn't have much mark up or components out of the box. In other words, it doesn't provide all the components and tools needed to build a UI, it contains best practices and a generall template on which to build your UI.

Alternative Products

Each month, over 2.8 million people use Slant to find the best products and share their knowledge. Pick the tags you’re passionate about to get a personalized feed and begin contributing your knowledge.