HTML5 Boilerplate 4: Improved Apache Configuration, IR Technique and Use of MIT License
HTML5 Boilerplate (H5BP) provides a starting template for HTML5 and CSS development. It contains a set of best practices for front-end web development, including recommended web server settings. Here's what's new with H5BP 4.
- Improved Apache compression configuration
Apache 2.4 has changed the FilterProvider syntax which now uses a boolean expression to determine if a filter is applied. H5BP 4 no longer uses FilterProvider and instead uses a simpler gzip compression configuration that works with versions of Apache 2 up to 2.4. This configuration can be found in the H5BP 4 .htaccess file.
- HiDPI media query
H5BP 4 has added a media query example for HiDPI (Retina) resolutions. This can be found in main.css.
- Bundled documentation
H5BP 4 distributions now contain a doc folder, which includes all documentation for that version of H5BP. This makes sure documentation is available offline, and matches the version of H5BP being used. The documentation has been consolidated and is much easier to use. There is no longer a stripped download version for H5BP, as most of the inline comments have been moved to the documentation.
- MIT license
H5BP 4 has moved from Unlicense to MIT License, which can be found in LICENSE.md. This provides H5BP a license which addresses concerns about the inability to place software in the public domain. The MIT license is recognized by the OSI, so companies who require OSI-recognised licenses are now free to use H5BP.
- Normalize.css 1.0.1
H5BP 4 has been updated to use Normalize.css 1.0.1. Normalize.css is also now in it's own CSS file. This makes it easier to update or remove normalize.css if needed.
- console.log protection
Earlier version of H5BP uses a log function wrapper around console.log. Using a wrapper changes the reported line position of the logs, losing context and making them less useful. H5BP 4 now recommends directly using console.log and added stubbed code for early versions of IE. This stubbed code can be found in plugins.js and has no jQuery dependency.
- Neutral selection color
The signature hot pink text selection color of H5BP has been replaced with a neutral color.
- New image replacement (IR) technique
There are various IR issues with previous versions of H5BP and this has been fixed by using a pseudo-element to force the element's content downwards without covering the background of the element. For IE 6/7, it falls back to using text-indent. For the complete pros and cons of this new IR technique, please read the H5BP GitHub commit #1149.
- Code cleanup
H5BP now consistently uses quotes in HTML, and hex for color values in CSS. It now has multi-line CSS and JS, and uses 4 spaces for indentation. It now uses closing tags and the common DOCTYPE capitalization. The old style.css has been split into main.css and normalize.css. The js/libs directory has been renamed to js/vendor. The old and empty scripts.js has been renamed into main.js.
- jQuery 1.8.0 and Modernizr 2.6.1
H5BP 4 has been updated to use jQuery 1.8.0 and Modernizr 2.6.1. The non-minified version of jQuery has also been removed. Note that the latest versions of jQuery and Modernizr at this writing are jQuery 1.8.1 and Modernizr 2.6.2.
For more information, please visit the H5BP website and read the H5BP 5 changelog. For those who are doing web development specific for mobile devices, you might also want to read more about Mobile Boilerplate.
Yousef Awad May 16, 2016
Jason McGee of IBM Talks about Open Source Projects and the Interactions at the Collaboration Summit
Jason McGee May 15, 2016
Srini Penchikala May 15, 2016