Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

html5-boilerplate

h5bp4.8kMIT9.0.1

A professional front-end template for building fast, robust, and adaptable web apps or sites.

h5bp, template, front-end

readme

HTML5 Boilerplate

Build status LICENSE NPM Downloads github-stars-image

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

This project is the product of over 10 years of iterative development and community knowledge. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.

About This Repository

This repository is where HTML5-Boilerplate is authored. Some of the tools, files and processes that you see here are solely for the production of HTML5 Boilerplate and are not part of HTML5 Boilerplate. For one example, the gulpfile.mjs script is used to build the project. It's not part of the project itself.

The project we publish is represented by the contents of the /dist/ folder. Everything else in this repository is used to author the project.

Think of it this way, in the same way that you don't clone vuejs/core to create a Vue.js app, you don't need to clone this repository to start a new site or app based on HTML5 Boilerplate.

So, if you're looking for a quick start template to build a website or application, look at the options in the Quick Start section of this document.

If you want to help us improve HTML5 Boilerplate then you can start with the documentation here, which includes steps to clone this repo in order to get it set up for development.

Quick Start

Choose one of the following options:

  • Using the create-html5-boilerplate script, instantly fetch the latest npm published package (or any version available on npm) with npx, npm init or yarn create without having to install any dependencies. Running the following npx command installs the latest version into a folder called new-site

    npx create-html5-boilerplate new-site
    cd new-site
    npm install
    npm run start
  • Using our new Template Repository create a new GitHub repository based on the latest code from the main branch of HTML5 Boilerplate.

  • Install with npm: npm install html5-boilerplate or yarn: yarn add html5-boilerplate. The resulting node_modules/html5-boilerplate/dist folder represents the latest version of the project for end users. Depending on what you want to use and how you want to use it, you may have to copy and paste the contents of that folder into your project directory.

  • Download the latest stable release from here. This zip file is a snapshot of the dist folder. On Windows, Mac and from the file manager on Linux unzipping this folder will output to a folder named something like html5-boilerplate_v9.0.0. From the command-line, you will need to create a folder and unzip the contents into that folder.

    mkdir html5-boilerplate
    unzip html5-boilerplate*.zip -d html5-boilerplate

Features

  • A finely-tuned starter template: Reap the benefits of 10 years of analysis, research and experimentation by over 200 contributors.
  • Designed with progressive enhancement in mind.
  • Includes:
    • Placeholder Open Graph elements and attributes.
    • An example package.json file with WebPack commands built in to jumpstart application development.
    • Placeholder CSS Media Queries.
    • Useful CSS helper classes.
    • Default print styles, performance optimized.
    • "Delete-key friendly." Easy to strip out parts you don't need.
    • Extensive documentation.

Browser Support

HTML5-Boilerplate supports the latest, stable releases of all major browsers.

Check the default configuration from Browserslist for more details on browsers and versions covered.

Documentation

Take a look at the documentation table of contents. This documentation is bundled with the project which makes it available for offline reading and provides a useful starting point for any documentation you want to write about your project.

Contributing

Hundreds of developers have helped to make the HTML5 Boilerplate. Anyone is welcome to contribute. However, if you decide to get involved, please take a moment to review the guidelines:

License

The code is available under the MIT license.

changelog

Changelog

9.0.1 (April 11, 2023)

  • Fixed tests on Windows, adds Windows Testing Action #3110
  • Add og:image:alt for accessibility #3066
  • Upgrade to Gulp 5 #3100 #3105
  • ci: Use GITHUB_OUTPUT envvar instead of set-output command #3068
  • Readme and Changelog updates #3055 #3057 #3064

9.0.0 (December 6, 2023)

  • Removing tile images #3023
  • Add Prettier #3011
  • Remove Modernizr #3002
  • Drop Normalize.css #2960
  • Create WebPack build to ship with the project #2650
  • Sets package to private by default #2888
  • Removes Babel and upgrades our gulpfile to use ES Modules #2831
  • Farewell Internet Explorer! #2773
  • Remove apache-server-configs/.htaccess #2779
  • Moving docs out of src and dist #2655
  • Replace Parcel with Webpack #2641
  • Add SVG Favicon #2554
  • Remove Google Analytics #2547
  • Rename master branch to main #2583
  • Remove humans.txt #2584
  • Add a template repository #2391
  • Remove plugins js #2346
  • Rename CSS file #2342 and JS file #2341

8.0.0 (June 04, 2020)

7.3.0 (November 19, 2019)

  • Update Modernizr to 3.8 (2b2bb45)
  • Update to Gulp 4 (#2151)
  • Update package.json (#2162) and enable package-lock.json (abe2087),(#2145)
  • Remove redundant rules from .editorconfig (#2157)
  • Small docs maintenance updates (#2155), (#2164), (#2165), (#2167) & (#2168)
  • Bump lowest supported version of node to 8.x (#2142)
  • Remove .jscsrc config and remove gulp-jscs from package.json (#2153)

7.2.0 (June 4, 2019)

7.1.0 (March 18, 2019)

  • Update Modernizr to 3.7.1 (#2121)
  • Update Analytics docs and snippet (#2118)
  • Minor docs updates (#2115)
  • Minor devdeps updates (#2114)
  • More succinct way of writing the IE conditional statement (#2113)

7.0.1 (February 11, 2019)

  • Bumps main.css to current version (#2112)

7.0.0 (February 8, 2019)

  • Drop support for IE9/IE10 (usage of these versions is tiny and Microsoft officially ended support back in 2016). (#2074)
  • Move the CSS to a separate repo (#2066)
  • Add theme-color meta tag to index.html (#2074)
  • Add 'install with yarn' steps to README (#2063)
  • Improved Webmanifest (#2060)
  • Upgrade Normalize to 8.0.1 (#2104)
  • Update .htaccess (#2110)
  • Remove instances of shrink-to-fit=no (#2103)
  • Removes "display": "standalone" from manifest (#2096)
  • Big Docs update - Fixed links, removed IE9/IE10 specific info, made touch icons section more concise, add details on security.txt and more tidying up (#2074, #2065, #2062)

6.1.0 (May 1, 2018)

6.0.1 (August 20, 2017)

  • Reverts .visuallyhidden (see #1985)

6.0.0 (August 17, 2017)

  • Fix Bug: .visuallyhidden on macOS VO fixes #1985 (#1989)
  • Adds web app manifest file (#1963)
  • Update to jQuery 3.2.1 (#1942)
  • Improve ::selection documentation which became confusing after c7057be (#1955)
  • refactor(html): update browsehappy to https instead of http (#1952)
  • Fix links to CONTRIBUTING.md (#1951)
  • Adds .github folder and contents Fixes (#1948)
  • Modernizr 3, modernizr.config and (#1940)
  • Housekeeping by @coliff (#1968 #1969 #1965 #1964 #1958 #1957 #1956)
  • Update .gitattributes for Web Projects (#1935)
  • Add the link for useful .gitignore templates (#1936)
  • Node plumbing updated (#1925) (#1928) (#1931)
  • Use es2015 syntax in mocha tests (#1788)
  • Scope :first-letter selector for print styles (#1904)
  • Add SRI Hash for jQuery (#1904)
  • Update .jshintrc (#1903)
  • Improve accessibility with visuallyhidden content (#1900)
  • Tell users that IE 8 and 9 are outdated (#1747).
  • Removed IE8 Support (upgrades jQuery and normalize.css to latest) (#1524).
  • Fix print styles for Internet Explorer 11 (#1799).
  • Update doc links to https (#1889).
  • Delete crossdomain.xml (#1881).
  • Adds pre-wrap to PRE (#1742).
  • Change license format to SPDX format (#1814).
  • Simplify the Google Analytics snippet using async & defer (#1660).

5.3.0 (January 12, 2016)

  • Update jQuery to v1.12.0.
  • Fetch jQuery from jQuery's CDN instead of Google's (#1737, #1739).
  • Change print color for :first-letter and :first-line pseudo-elements (#1715).

5.2.0 (May 1, 2015)

  • Update jQuery to v1.11.3 (#1699).
  • Deprecate protocol-relative URLs (#1694).
  • Update high resolution media query (#1474).
  • Update Apache Server Configs to v2.14.0.

5.1.0 (April 1, 2015)

  • Update Normalize.css to v3.0.3.
  • Use https:// in the Google Universal Analytics snippet (eee759b).
  • Remove the visibility: hidden declaration from .hidden (#1663).
  • Use <meta http-equiv="x-ua-compatible" content="ie=edge">
    instead of <meta http-equiv="X-UA-Compatible" content="IE=edge"> (#1656).
  • Update Apache Server Configs to v2.13.0.

5.0.0 (February 1, 2015)

  • Update to jQuery 1.11.2.
  • Update Apache Server Configs to v2.11.0.
  • Rename Apple touch icon to apple-touch-icon.png and add <link> in index.html (#1622).
  • Add vertical centering for iframe (#1613).
  • Change the outdated browser prompt classname to browserupgrade (#1608).
  • Update to Normalize.css 3.0.2. (#1050).
  • Update apple-touch-icon-precomposed.png and the "Apple touch icons" related documentation (#1599).
  • Add pseudo-elements to universal selector in print media query (#1585).
  • Update to Modernizr 2.8.3.
  • Remove need to readjust margins in 404.html (#1567).
  • Add /.editorconfig file (#1561, #1564).
  • Add auto to the Google Universal Analytics tracker create method (#1562).
  • Add timeline and timelineEnd to the list of console methods (#1559).
  • Add lang="" to <html> (#1542).
  • Use <!doctype html> instead of <!DOCTYPE html> (#1522).
  • Add /browserconfig.xml file and tile images (#1481).
  • Add Disallow: to robots.txt (#1487).
  • Remove default foreground color from form elements (#1390).
  • Remove default margin from print styles (#1477).
  • Remove image replacement helper class .ir (#1472, #1475).
  • Add vertical centering for svg (#1453).
  • Redesign 404 page (#1443).
  • Remove IE 6/7 hacks from main.css (#1050).
  • Remove IE conditional classes (#1187, #1290).

4.3.0 (September 10, 2013)

  • Use one apple-touch-icon instead of six (#1367).
  • Move font-related declarations from body to html (#1411).
  • Update to Apache Server Configs 1.1.0.
  • Add initial-scale=1 to the viewport meta (#1398).
  • Vertical centering for audio, canvas and video-tags (#1326).
  • Remove Google Chrome Frame related code (#1379, #1396).
  • Update to Google Universal Analytics (#1347).
  • Update to jQuery 1.10.2.
  • Update to Normalize.css 1.1.3.

4.2.0 (April 8, 2013)

  • Remove Google Analytics protocol check (#1319).
  • Update to Normalize.css 1.1.1.
  • Update Apache configurations to include the latest changes in the canonical .htaccess file.
  • Use a protocol relative URL for the 404 template script.
  • Update to jQuery 1.9.1.

4.1.0 (January 21, 2013)

  • Update to Normalize.css 1.1.0.
  • Update to jQuery 1.9.0.

4.0.3 (January 12, 2013)

  • Use 32x32 favicon.ico (#1286).
  • Remove named function expression in plugins.js (#1280).
  • Adjust CSS image-replacement code (#1239).
  • Update HiDPI example media query (#1127).

4.0.2 (December 9, 2012)

  • Update placeholder icons.
  • Update to Normalize.css 1.0.2.
  • Update to jQuery 1.8.3.

4.0.1 (October 20, 2012)

  • Further improvements to console method stubbing (#1206, #1229).
  • Update to jQuery 1.8.2.
  • Update to Modernizr 2.6.2.
  • Minor additions to the documentation.

4.0.0 (August 28, 2012)

  • Improve the Apache compression configuration (#1012, #1173).
  • Add a HiDPI example media query (#1127).
  • Add bundled docs (#1154).
  • Add MIT license (#1139).
  • Update to Normalize.css 1.0.1.
  • Separate Normalize.css from the rest of the CSS (#1160).
  • Improve console.log protection (#1107).
  • Replace hot pink text selection color with a neutral color.
  • Change image replacement technique (#1149).
  • Code format and consistency changes (#1112).
  • Rename CSS file and rename JS files and subdirectories.
  • Update to jQuery 1.8 (#1161).
  • Update to Modernizr 2.6.1 (#1086).
  • Remove uncompressed jQuery (#1153).
  • Remove superfluous inline comments (#1150).

3.0.2 (February 19, 2012)

  • Update to Modernizr 2.5.3.

3.0.1 (February 08, 2012)

  • Update to Modernizr 2.5.2 (includes html5shiv 3.3).

3.0.0 (February 06, 2012)

  • Improvements to .htaccess.
  • Improve 404 design.
  • Simplify JS folder structure.
  • Change html IE class names changed to target ranges rather than specific versions of IE.
  • Update CSS to include latest normalize.css changes and better typographic defaults (#825).
  • Update to Modernizr 2.5 (includes yepnope 1.5 and html5shiv 3.2).
  • Update to jQuery 1.7.1.
  • Revert to async snippet for the Google Analytics script.
  • Remove the ant build script (#826).
  • Remove Respond.js (#816).
  • Remove the demo/ directory (#808).
  • Remove the test/ directory (#808).
  • Remove Google Chrome Frame script for IE6 users; replace with links to Chrome Frame and options for alternative browsers.
  • Remove initial-scale=1 from the viewport meta (#824).
  • Remove defer from all scripts to avoid legacy IE bugs.
  • Remove explicit Site Speed tracking for Google Analytics. It's now enabled by default.

2.0.0 (August 10, 2011)

  • Change starting CSS to be based on normalize.css instead of reset.css (#500).
  • Add Respond.js media query polyfill.
  • Add Google Chrome Frame script prompt for IE6 users.
  • Simplify the html conditional comments for modern browsers and add an oldie class.
  • Update clearfix to use "micro clearfix".
  • Add placeholder CSS MQs for mobile-first approach.
  • Add textarea { resize: vertical; } to only allow vertical resizing.
  • Add img { max-width: 100%; } to the print styles; prevents images being truncated.
  • Add Site Speed tracking for Google Analytics.
  • Update to jQuery 1.6.2 (and use minified by default).
  • Update to Modernizr 2.0 Complete, Production minified (includes yepnope, html5shiv, and Respond.js).
  • Use Modernizr.load() to load the Google Analytics script.
  • Much faster build process.
  • Add build script options for CSSLint, JSLint, JSHint tools.
  • Build script now compresses all images in subfolders.
  • Build script now versions files by SHA hash.
  • Many .htaccess improvements including: disable directory browsing, improved support for all versions of Apache, more robust and extensive HTTP compression rules.
  • Remove handheld.css as it has very poor device support.
  • Remove touch-icon link elements from the HTML and include improved touch-icon support.
  • Remove the cache-busting query parameters from files references in the HTML.
  • Remove IE6 PNGFix.

1.0.0 (March 21, 2011)

  • Rewrite build script to make it more customizable and flexible.
  • Add a humans.txt.
  • Numerous .htaccess improvements (including inline documentation).
  • Move the alternative server configurations to the H5BP server configs repo.
  • Use a protocol-relative url to reference jQuery and prevent mixed content warnings.
  • Optimize the Google Analytics snippet.
  • Use Eric Meyer's recent CSS reset update and the HTML5 Doctor reset.
  • More robust sub/sup CSS styles.
  • Add keyboard .focusable helper class that extends .visuallyhidden.
  • Print styles no longer print hash or JavaScript links.
  • Add a print reset for IE's proprietary filters.
  • Remove IE9-specific conditional class on the html element.
  • Remove margins from lists within nav elements.
  • Remove YUI profiling.