What is Modernizr, Normalize and HTML5Boilerplate [closed]

Question

when i download a free theme or a demo tutorial in the web. I just noticed that now a days i always see those modernizr, normalise, and boilerplate thingy.

I have researched them but still i cant understand what they do? Maybe you guys can explain more or maybe use an analogy to explain it better.

It's like "Explaining New Web Development thingy for Dummies" Really appreciate it.

Answer 1

Due to the differences in browsers and platforms, these libraries try to make is so that you don't have to use browser-specific code to take advantage of all the new HTML5 features.

Another way of saying it is, since all browsers "interpret" the HTML5 standard differently, these libraries help to smooth out the differences between interpretations.

Modernizr: http://modernizr.com/

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

Boilerplate: http://html5boilerplate.com/ (If this is the one you are referring to)

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

Basically this gives you a framework for laying out your webpages so you don't have to start from scratch every time.

Normalize.css: http://necolas.github.io/normalize.css/ (Again, assuming this is the one you're talking about)

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Basically, this CSS file allows you to write standard CSS and then it helps to render it consistently in all browsers.

TL;DR Version These frameworks/files make it so that you can focus on writing standard-compliant website code (HTML5, CSS or JS) without having to worry about browser-specific tweaks. In addition, a front-end framework like Boilerplate gives you some nice "style-helpers" to make your website look great from the start.