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.
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.
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:
In general Arial is a better screen font than Helvetica being developed for the screen in the first place. More pressing problem is that Helvetica on Windows does not render well at all and you don't want to ignore the majority of your audience ;) - http://html5boilerplate.com/#comment-67626905
This is very true - Helvetica on Windows looks awful. But can't this be solved by simply using sans-serif as the first font-face? I'm pretty sure that will default to Helvetica on Macs and Arial on Windows. - http://html5boilerplate.com/#comment-67654932
<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-device-width: 480px)" type="text/css" />
(Since the iPhone Thinks It's a Big Boy)
<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
(To Help An Anonymous Quirky Browser So It Won't Think It's Mobile)
<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
<meta name="viewport" content="width = 320" />
(So The iPhone Won't Be Zoomed Out)
Here's A Solution
<link rel="stylesheet" href="standard.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link rel="stylesheet" href="mobile.css" media="handheld, only screen and (max-device-width: 480px)" type="text/css" />
(Option To Override With JS-Powered Switch)
(Save It With A Cookie)
# This issue thread is now closed.
## It was fun, but the conversations have moved elsewhere for now. Thanks
### In appreciation of the funtimes we had, @rmurphey made us a happy word cloud of the thread.
Enjoy.
via labjs or require.
my "boilerplate" load.js file has LABjs inlined in it, and then uses it to load jquery, GA, and one site js file. if it helps, I have an integrated RequireJS+jQuery in one file: http://bit.ly/dAiqEG ;)
also how does this play into the expectation of a build script that concatenates and minifies all script? should script loading be an option?
(basically links to other techniques that are really good, but probably overboard for what should be an empty template without a lot of opinionated architecture.)
You can further improve browser and proxy caching, and thus page performance:
To ensure proxy caching of CSS and JS files, ensure you send the Vary: Accept-Encoding response header as well (not just the Cache-control: public header), if you send them Gzipped.
Send the Last-Modified header, to enable browser to make conditional requests and enable the server to send a (small, fast) 304 response.
Set the Last-Modified date to the last time the resource was changed.
(I have revised this ticket summary after the issue has been fixed for clarity)
Scott jehl was concerned with maximum scale = 1
@riddle posted a few concerns as well.. "No scaling, no text adjustment?"
After discussions with Matt Henry, a front-end dev mobile expert, recently from Yahoo!, now at Viget...
We concluded to drop maximum-scale=1 and leave text-size-adjust commented out by default.
max-scale doesnt let the user zoom in as they please. However it prevents some weird layout shifting when a device is changed from portrait to landscape. It doesn't seem like a good default.
initial-scale remains 1. It's default is 'auto' and I have no understanding why a mobile browser would set it to anything other than 1, but it's explicitly set for now..
Since you are using such far-future expires headers for caching in the .htaccess file should you not be using a format to version your css and javascript files.
Such as the "script.js?v=1.0" or similar example in the .htaccess file
meta name=keywords? I'm no SEO wizard, but I tend to still use this guy in conjunction with meta name=description.
using HTML5 doctype and a html5 shiv script for IE, yet <div id=header>, <div id=footer>.
Why not <header> & <footer>? Although I can understand if you don't want to force people to go server-side to fix FF2.
How is<html lang=en> different from <meta http-equiv="content-language" content="en">? There might be something I'm not aware of here.
In html5, <script type> defaults to text/javascript if not present. So, you can leave it out if you want to live in the future. I don't know if there are any real-world consequences to doing so today.
Remy's html5 enabling script is a little out of date--<dialog> is no longer in the spec, nor is <eventsource>. (There are naturally more new elements in the spec, but I can't imagine you'd try to style a element, for example.)
In script.js small typo:
//common domready code => common domready code
In script.js FOO.config and FOO.strings could use some simple explanatory comments to explain why they're in there.
In reset.css:
dialog can be removed from lines 21 and 36.
Line 32 of the html5 reset stylesheet (body{line-height:1} is essentially getting overwritten by line 109 (yui's body * {line-height:1.22em}, right? Or would there be some meaningful reason to have body at 1 but all of body's descendants at 1.22em? If not, 32 could be removed.
Shouldn't line 121 also include .ie6? i.e., .ie6 img, .ie7 img {-ms-interpol...;}
A few missing ending semi-colons: line 129, 140, 151, 152
If you were crazy like i am, you could change line 144 -> color: #003366 -> color: #36.
Talking to some folks, I come to realize the templates definitely could use some documentation.
I'm going to just keep updating the content of this ticket, if anyone has anything to add, comment.
What is htaccess and what does it do?
What is Modernizr and what does it do?
What do I have to do when I updated my images, css, or js?
If you're not using the apache .htaccess, you're fine. Otherwise.. there is fairly moderate caching on the static assets so users don't redownload them every pageload. As a result, you'll have to increment the ?v=1 to 2 and beyond each time you push the changes live to your host. (This will be addressed automatically in the future with a build script)
What's going on in plugins.js?
** Hypothetically you'd put your jquery plugins inside of the (function($){ ... })(jQuery) block. This is good incase the plugin developers didn't write their plugins well.
Right now on the site http://html5boilerplate.com - the entire htaccess section is pretty ugly looking. This is because there is no "brush" for the syntax highlighter script we're using.
React
Vue.js
Typescript
TensorFlow
Django
Laravel
D3
Facebook
Microsoft
Google
Alibaba
D3
Tencent
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
