Whilst HTML5 boilerplates are great tools, they can sometimes in the wrong hands result in over bloated HTML5. Ditch the excess boilerplate markup that's there "just in case" and adopt leaner "mobile first" responsive web design.
By utilising HAML comments, this boilerplate still includes the kitchen sink "just in case", however, all but the most essentials have been commented out. As a result, it compiles to just:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/favicon.ico" rel="shortcut icon">
<link href="/css/base.css" rel="stylesheet">
</head>
<body>
</body>
</html>This should be enough to get started. If you need anything else, just uncomment and compile.
There are several options included for dealing with legacy IE browsers for "mobile first" design:
-
Choose between Paul Irish's
<html>tag conditional classes hack or the more traditional conditional stylesheets. Paul Irish's hack is disabled by default as it's not always necessary on every site. -
Use a CSS3 media query polyfill such as respond.js (this can be included in a custom Modernizr build) to enable media queries in older IE.
-
Adopt a fixed-width layout for legacy IE (no polyfills), using SASS to help compile the IE stylesheets.
- Rachael Andrew's "HTML5 boilerplate" in her excellent article Stop solving problems you don’t yet have was a big infulence on the default markup this boilerplate compiles to.
- Whilst you're there, also read Responsibly Responsive: developing the Greenbelt website.
- Jeremy Keith's dConstruct optimisation is an excellent starting point for "mobile first" optimisation.