From: Maxious Date: Sat, 29 Sep 2012 13:05:38 +0000 Subject: add html boilerplate X-Git-Url: https://maxious.lambdacomplex.org/git/?p=tools.git&a=commitdiff&h=682a81523591905d35523ea99531c4d1b40941b7 --- add html boilerplate --- --- /dev/null +++ b/.gitattributes @@ -1,1 +1,1 @@ - +* text=auto --- /dev/null +++ b/.gitignore @@ -1,1 +1,3 @@ +# Include your project-specific ignores in this file +# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files --- /dev/null +++ b/.htaccess @@ -1,1 +1,541 @@ - +# Apache configuration file +# httpd.apache.org/docs/2.2/mod/quickreference.html + +# Note .htaccess files are an overhead, this logic should be in your Apache +# config if possible: httpd.apache.org/docs/2.2/howto/htaccess.html + +# Techniques in here adapted from all over, including: +# Kroc Camen: camendesign.com/.htaccess +# perishablepress.com/press/2006/01/10/stupid-htaccess-tricks/ +# Sample .htaccess file of CMS MODx: modxcms.com + + +# ---------------------------------------------------------------------- +# Better website experience for IE users +# ---------------------------------------------------------------------- + +# Force the latest IE version, in various cases when it may fall back to IE7 mode +# github.com/rails/rails/commit/123eb25#commitcomment-118920 +# Use ChromeFrame if it's installed for a better experience for the poor IE folk + + + Header set X-UA-Compatible "IE=Edge,chrome=1" + # mod_headers can't match by content-type, but we don't want to send this header on *everything*... + + Header unset X-UA-Compatible + + + + +# ---------------------------------------------------------------------- +# Cross-domain AJAX requests +# ---------------------------------------------------------------------- + +# Serve cross-domain Ajax requests, disabled by default. +# enable-cors.org +# code.google.com/p/html5security/wiki/CrossOriginRequestSecurity + +# +# Header set Access-Control-Allow-Origin "*" +# + + +# ---------------------------------------------------------------------- +# CORS-enabled images (@crossorigin) +# ---------------------------------------------------------------------- + +# Send CORS headers if browsers request them; enabled by default for images. +# developer.mozilla.org/en/CORS_Enabled_Image +# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html +# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ +# wiki.mozilla.org/Security/Reviews/crossoriginAttribute + + + + # mod_headers, y u no match by Content-Type?! + + SetEnvIf Origin ":" IS_CORS + Header set Access-Control-Allow-Origin "*" env=IS_CORS + + + + + +# ---------------------------------------------------------------------- +# Webfont access +# ---------------------------------------------------------------------- + +# Allow access from all domains for webfonts. +# Alternatively you could only whitelist your +# subdomains like "subdomain.example.com". + + + + Header set Access-Control-Allow-Origin "*" + + + + +# ---------------------------------------------------------------------- +# Proper MIME type for all files +# ---------------------------------------------------------------------- + +# JavaScript +# Normalize to standard type (it's sniffed in IE anyways) +# tools.ietf.org/html/rfc4329#section-7.2 +AddType application/javascript js jsonp +AddType application/json json + +# Audio +AddType audio/ogg oga ogg +AddType audio/mp4 m4a f4a f4b + +# Video +AddType video/ogg ogv +AddType video/mp4 mp4 m4v f4v f4p +AddType video/webm webm +AddType video/x-flv flv + +# SVG +# Required for svg webfonts on iPad +# twitter.com/FontSquirrel/status/14855840545 +AddType image/svg+xml svg svgz +AddEncoding gzip svgz + +# Webfonts +AddType application/vnd.ms-fontobject eot +AddType application/x-font-ttf ttf ttc +AddType font/opentype otf +AddType application/x-font-woff woff + +# Assorted types +AddType image/x-icon ico +AddType image/webp webp +AddType text/cache-manifest appcache manifest +AddType text/x-component htc +AddType application/xml rss atom xml rdf +AddType application/x-chrome-extension crx +AddType application/x-opera-extension oex +AddType application/x-xpinstall xpi +AddType application/octet-stream safariextz +AddType application/x-web-app-manifest+json webapp +AddType text/x-vcard vcf +AddType application/x-shockwave-flash swf +AddType text/vtt vtt + + +# ---------------------------------------------------------------------- +# Allow concatenation from within specific js and css files +# ---------------------------------------------------------------------- + +# e.g. Inside of script.combined.js you could have +# +# +# and they would be included into this single file. + +# This is not in use in the boilerplate as it stands. You may +# choose to use this technique if you do not have a build process. + +# +# Options +Includes +# AddOutputFilterByType INCLUDES application/javascript application/json +# SetOutputFilter INCLUDES +# + +# +# Options +Includes +# AddOutputFilterByType INCLUDES text/css +# SetOutputFilter INCLUDES +# + + +# ---------------------------------------------------------------------- +# Gzip compression +# ---------------------------------------------------------------------- + + + + # Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/ + + + SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding + RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding + + + + # Compress all output labeled with one of the following MIME-types + + AddOutputFilterByType DEFLATE application/atom+xml \ + application/javascript \ + application/json \ + application/rss+xml \ + application/vnd.ms-fontobject \ + application/x-font-ttf \ + application/xhtml+xml \ + application/xml \ + font/opentype \ + image/svg+xml \ + image/x-icon \ + text/css \ + text/html \ + text/plain \ + text/x-component \ + text/xml + + + + + +# ---------------------------------------------------------------------- +# Expires headers (for better cache control) +# ---------------------------------------------------------------------- + +# These are pretty far-future expires headers. +# They assume you control versioning with filename-based cache busting +# Additionally, consider that outdated proxies may miscache +# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/ + +# If you don't use filenames to version, lower the CSS and JS to something like +# "access plus 1 week". + + + ExpiresActive on + +# Perhaps better to whitelist expires rules? Perhaps. + ExpiresDefault "access plus 1 month" + +# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5) + ExpiresByType text/cache-manifest "access plus 0 seconds" + +# Your document html + ExpiresByType text/html "access plus 0 seconds" + +# Data + ExpiresByType text/xml "access plus 0 seconds" + ExpiresByType application/xml "access plus 0 seconds" + ExpiresByType application/json "access plus 0 seconds" + +# Feed + ExpiresByType application/rss+xml "access plus 1 hour" + ExpiresByType application/atom+xml "access plus 1 hour" + +# Favicon (cannot be renamed) + ExpiresByType image/x-icon "access plus 1 week" + +# Media: images, video, audio + ExpiresByType image/gif "access plus 1 month" + ExpiresByType image/png "access plus 1 month" + ExpiresByType image/jpeg "access plus 1 month" + ExpiresByType video/ogg "access plus 1 month" + ExpiresByType audio/ogg "access plus 1 month" + ExpiresByType video/mp4 "access plus 1 month" + ExpiresByType video/webm "access plus 1 month" + +# HTC files (css3pie) + ExpiresByType text/x-component "access plus 1 month" + +# Webfonts + ExpiresByType application/x-font-ttf "access plus 1 month" + ExpiresByType font/opentype "access plus 1 month" + ExpiresByType application/x-font-woff "access plus 1 month" + ExpiresByType image/svg+xml "access plus 1 month" + ExpiresByType application/vnd.ms-fontobject "access plus 1 month" + +# CSS and JavaScript + ExpiresByType text/css "access plus 1 year" + ExpiresByType application/javascript "access plus 1 year" + + + + +# ---------------------------------------------------------------------- +# Prevent mobile network providers from modifying your site +# ---------------------------------------------------------------------- + +# The following header prevents modification of your code over 3G on some +# European providers. +# This is the official 'bypass' suggested by O2 in the UK. + +# +# Header set Cache-Control "no-transform" +# + + +# ---------------------------------------------------------------------- +# ETag removal +# ---------------------------------------------------------------------- + +# FileETag None is not enough for every server. + + Header unset ETag + + +# Since we're sending far-future expires, we don't need ETags for +# static content. +# developer.yahoo.com/performance/rules.html#etags +FileETag None + + +# ---------------------------------------------------------------------- +# Stop screen flicker in IE on CSS rollovers +# ---------------------------------------------------------------------- + +# The following directives stop screen flicker in IE on CSS rollovers - in +# combination with the "ExpiresByType" rules for images (see above). + +# BrowserMatch "MSIE" brokenvary=1 +# BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1 +# BrowserMatch "Opera" !brokenvary +# SetEnvIf brokenvary 1 force-no-vary + + +# ---------------------------------------------------------------------- +# Set Keep-Alive Header +# ---------------------------------------------------------------------- + +# Keep-Alive allows the server to send multiple requests through one +# TCP-connection. Be aware of possible disadvantages of this setting. Turn on +# if you serve a lot of static content. + +# +# Header set Connection Keep-Alive +# + + +# ---------------------------------------------------------------------- +# Cookie setting from iframes +# ---------------------------------------------------------------------- + +# Allow cookies to be set from iframes (for IE only) +# If needed, specify a path or regex in the Location directive. + +# +# Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"" +# + + +# ---------------------------------------------------------------------- +# Start rewrite engine +# ---------------------------------------------------------------------- + +# Turning on the rewrite engine is necessary for the following rules and +# features. FollowSymLinks must be enabled for this to work. + +# Some cloud hosting services require RewriteBase to be set: goo.gl/HOcPN +# If using the h5bp in a subdirectory, use `RewriteBase /foo` instead where +# 'foo' is your directory. + +# If your web host doesn't allow the FollowSymlinks option, you may need to +# comment it out and use `Options +SymLinksOfOwnerMatch`, but be aware of the +# performance impact: http://goo.gl/Mluzd + + + Options +FollowSymlinks +# Options +SymLinksIfOwnerMatch + RewriteEngine On +# RewriteBase / + + + +# ---------------------------------------------------------------------- +# Suppress or force the "www." at the beginning of URLs +# ---------------------------------------------------------------------- + +# The same content should never be available under two different URLs - +# especially not with and without "www." at the beginning, since this can cause +# SEO problems (duplicate content). That's why you should choose one of the +# alternatives and redirect the other one. + +# By default option 1 (no "www.") is activated. +# no-www.org/faq.php?q=class_b + +# If you'd prefer to use option 2, just comment out all option 1 lines +# and uncomment option 2. + +# IMPORTANT: NEVER USE BOTH RULES AT THE SAME TIME! + +# ---------------------------------------------------------------------- + +# Option 1: +# Rewrite "www.example.com -> example.com". + + + RewriteCond %{HTTPS} !=on + RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] + RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L] + + +# ---------------------------------------------------------------------- + +# Option 2: +# Rewrite "example.com -> www.example.com". +# Be aware that the following rule might not be a good idea if you use "real" +# subdomains for certain parts of your website. + +# +# RewriteCond %{HTTPS} !=on +# RewriteCond %{HTTP_HOST} !^www\..+$ [NC] +# RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L] +# + + +# ---------------------------------------------------------------------- +# Built-in filename-based cache busting +# ---------------------------------------------------------------------- + +# If you're not using the build script to manage your filename version revving, +# you might want to consider enabling this, which will route requests for +# /css/style.20110203.css to /css/style.css + +# To understand why this is important and a better idea than all.css?v1231, +# read: github.com/h5bp/html5-boilerplate/wiki/cachebusting + +# +# RewriteCond %{REQUEST_FILENAME} !-f +# RewriteCond %{REQUEST_FILENAME} !-d +# RewriteRule ^(.+)\.(\d+)\.(js|css|png|jpg|gif)$ $1.$3 [L] +# + + +# ---------------------------------------------------------------------- +# Prevent SSL cert warnings +# ---------------------------------------------------------------------- + +# Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent +# https://www.example.com when your cert only allows https://secure.example.com + +# +# RewriteCond %{SERVER_PORT} !^443 +# RewriteRule ^ https://example-domain-please-change-me.com%{REQUEST_URI} [R=301,L] +# + + +# ---------------------------------------------------------------------- +# Prevent 404 errors for non-existing redirected folders +# ---------------------------------------------------------------------- + +# without -MultiViews, Apache will give a 404 for a rewrite if a folder of the +# same name does not exist. +# webmasterworld.com/apache/3808792.htm + +Options -MultiViews + + +# ---------------------------------------------------------------------- +# Custom 404 page +# ---------------------------------------------------------------------- + +# You can add custom pages to handle 500 or 403 pretty easily, if you like. +# If you are hosting your site in subdirectory, adjust this accordingly +# e.g. ErrorDocument 404 /subdir/404.html +ErrorDocument 404 /404.html + + +# ---------------------------------------------------------------------- +# UTF-8 encoding +# ---------------------------------------------------------------------- + +# Use UTF-8 encoding for anything served text/plain or text/html +AddDefaultCharset utf-8 + +# Force UTF-8 for a number of file formats +AddCharset utf-8 .atom .css .js .json .rss .vtt .xml + + +# ---------------------------------------------------------------------- +# A little more security +# ---------------------------------------------------------------------- + +# To avoid displaying the exact version number of Apache being used, add the +# following to httpd.conf (it will not work in .htaccess): +# ServerTokens Prod + +# "-Indexes" will have Apache block users from browsing folders without a +# default document Usually you should leave this activated, because you +# shouldn't allow everybody to surf through every folder on your server (which +# includes rather private places like CMS system folders). + + Options -Indexes + + +# Block access to "hidden" directories or files whose names begin with a +# period. This includes directories used by version control systems such as +# Subversion or Git. + + RewriteCond %{SCRIPT_FILENAME} -d [OR] + RewriteCond %{SCRIPT_FILENAME} -f + RewriteRule "(^|/)\." - [F] + + +# Block access to backup and source files. These files may be left by some +# text/html editors and pose a great security danger, when anyone can access +# them. + + Order allow,deny + Deny from all + Satisfy All + + +# If your server is not already configured as such, the following directive +# should be uncommented in order to set PHP's register_globals option to OFF. +# This closes a major security hole that is abused by most XSS (cross-site +# scripting) attacks. For more information: http://php.net/register_globals +# +# IF REGISTER_GLOBALS DIRECTIVE CAUSES 500 INTERNAL SERVER ERRORS: +# +# Your server does not allow PHP directives to be set via .htaccess. In that +# case you must make this change in your php.ini file instead. If you are +# using a commercial web host, contact the administrators for assistance in +# doing this. Not all servers allow local php.ini files, and they should +# include all PHP configurations (not just this one), or you will effectively +# reset everything to PHP defaults. Consult www.php.net for more detailed +# information about setting PHP directives. + +# php_flag register_globals Off + +# Rename session cookie to something else, than PHPSESSID +# php_value session.name sid + +# Disable magic quotes (This feature has been DEPRECATED as of PHP 5.3.0 and REMOVED as of PHP 5.4.0.) +# php_flag magic_quotes_gpc Off + +# Do not show you are using PHP +# Note: Move this line to php.ini since it won't work in .htaccess +# php_flag expose_php Off + +# Level of log detail - log all errors +# php_value error_reporting -1 + +# Write errors to log file +# php_flag log_errors On + +# Do not display errors in browser (production - Off, development - On) +# php_flag display_errors Off + +# Do not display startup errors (production - Off, development - On) +# php_flag display_startup_errors Off + +# Format errors in plain text +# Note: Leave this setting 'On' for xdebug's var_dump() output +# php_flag html_errors Off + +# Show multiple occurrence of error +# php_flag ignore_repeated_errors Off + +# Show same errors from different sources +# php_flag ignore_repeated_source Off + +# Size limit for error messages +# php_value log_errors_max_len 1024 + +# Don't precede error with string (doesn't accept empty string, use whitespace if you need) +# php_value error_prepend_string " " + +# Don't prepend to error (doesn't accept empty string, use whitespace if you need) +# php_value error_append_string " " + +# Increase cookie security + + php_value session.cookie_httponly true + + --- /dev/null +++ b/404.html @@ -1,1 +1,158 @@ + + + + + Page Not Found :( + + + +

Not found :(

Sorry, but the page you were trying to view does not exist.

It looks like this was the result of either:

a mistyped address
an out-of-date link

+ + +

+ + + --- /dev/null +++ b/CHANGELOG.md @@ -1,1 +1,88 @@ +### HEAD +### 4.0.0 (28 August, 2012) + +* Improve the Apache compression configuration ([#1012](https://github.com/h5bp/html5-boilerplate/issues/1012), [#1173](https://github.com/h5bp/html5-boilerplate/issues/1173)). +* Add a HiDPI example media query ([#1127](https://github.com/h5bp/html5-boilerplate/issues/1127)). +* Add bundled docs ([#1154](https://github.com/h5bp/html5-boilerplate/issues/1154)). +* Add MIT license ([#1139](https://github.com/h5bp/html5-boilerplate/issues/1139)). +* Update to Normalize.css 1.0.1. +* Separate Normalize.css from the rest of the CSS ([#1160](https://github.com/h5bp/html5-boilerplate/issues/1160)). +* Improve `console.log` protection ([#1107](https://github.com/h5bp/html5-boilerplate/issues/1107)). +* Replace hot pink text selection color with a neutral color. +* Change image replacement technique ([#1149](https://github.com/h5bp/html5-boilerplate/issues/1149)). +* Code format and consistency changes ([#1112](https://github.com/h5bp/html5-boilerplate/issues/1112)). +* Rename CSS file and rename JS files and subdirectories. +* Update to jQuery 1.8 ([#1161](https://github.com/h5bp/html5-boilerplate/issues/1161)). +* Update to Modernizr 2.6.1 ([#1086](https://github.com/h5bp/html5-boilerplate/issues/1086)). +* Remove uncompressed jQuery ([#1153](https://github.com/h5bp/html5-boilerplate/issues/1153)). +* Remove superfluous inline comments ([#1150](https://github.com/h5bp/html5-boilerplate/issues/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](https://github.com/h5bp/html5-boilerplate/issues/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](https://github.com/h5bp/html5-boilerplate/issues/826)). +* Remove Respond.js ([#816](https://github.com/h5bp/html5-boilerplate/issues/816)). +* Remove the `demo/` directory ([#808](https://github.com/h5bp/html5-boilerplate/issues/808)). +* Remove the `test/` directory ([#808](https://github.com/h5bp/html5-boilerplate/issues/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](https://github.com/h5bp/html5-boilerplate/issues/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](https://github.com/h5bp/html5-boilerplate/issues/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 paramaters 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. + --- /dev/null +++ b/LICENSE.md @@ -1,1 +1,20 @@ +Copyright (c) HTML5 Boilerplate +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies +of the Software, and to permit persons to whom the Software is furnished to do +so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. + --- /dev/null +++ b/README.md @@ -1,1 +1,64 @@ +# [HTML5 Boilerplate](http://html5boilerplate.com) +HTML5 Boilerplate is a professional front-end template for building fast, +robust, and adaptable web apps or sites. + +This project is the product of many years of iterative development and combined +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. + +* Source: [https://github.com/h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate) +* Homepage: [http://html5boilerplate.com](http://html5boilerplate.com) +* Twitter: [@h5bp](http://twitter.com/h5bp) + + +## Quick start + +Choose one of the following options: + +1. Download the latest stable release from + [html5boilerplate.com](http://html5boilerplate.com/) or a custom build from + [Initializr](http://www.initializr.com). +2. Clone the git repo — `git clone + https://github.com/h5bp/html5-boilerplate.git` - and checkout the tagged + release you'd like to use. + + +## Features + +* HTML5 ready. Use the new elements with confidence. +* Cross-browser compatible (Chrome, Opera, Safari, Firefox 3.6+, IE6+). +* Designed with progressive enhancement in mind. +* Includes [Normalize.css](http://necolas.github.com/normalize.css/) for CSS + normalizations and common bug fixes. +* The latest [jQuery](http://jquery.com/) via CDN, with a local fallback. +* The latest [Modernizr](http://modernizr.com/) build for feature detection. +* IE-specific classes for easier cross-browser control. +* Placeholder CSS Media Queries. +* Useful CSS helpers. +* Default print CSS, performance optimized. +* Protection against any stray `console.log` causing JavaScript errors in + IE6/7. +* An optimized Google Analytics snippet. +* Apache server caching, compression, and other configuration defaults for + Grade-A performance. +* Cross-domain Ajax and Flash. +* "Delete-key friendly." Easy to strip out parts you don't need. +* Extensive inline and accompanying documentation. + + +## Documentation + +Take a look at the [documentation table of +contents](/h5bp/html5-boilerplate/blob/master/doc/README.md). This +documentation is bundled with the project, which makes it readily available for +offline reading and provides a useful starting point for any documentation +you want to write about your project. + + +## Contributing + +Anyone and everyone is welcome to +[contribute](/h5bp/html5-boilerplate/blob/master/doc/contribute.md). Hundreds +of developers have helped make the HTML5 Boilerplate what it is today. + --- /dev/null +++ b/crossdomain.xml @@ -1,1 +1,16 @@ + + + + + + + + + + + --- /dev/null +++ b/css/main.css @@ -1,1 +1,299 @@ - +/* + * HTML5 Boilerplate + * + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html, +button, +input, +select, +textarea { + color: #222; +} + +body { + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: h5bp.com/i + * These selection declarations have to be separate. + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between images and the bottom of their containers: h5bp.com/i/440 + */ + +img { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Chrome Frame prompt + ========================================================================== */ + +.chromeframe { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + + + + + + + + + + + + + + + + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Image replacement + */ + +.ir { + background-color: transparent; + border: 0; + overflow: hidden; + /* IE 6/7 fallback */ + *text-indent: -9999px; +} + +.ir:before { + content: ""; + display: block; + width: 0; + height: 100%; +} + +/* + * Hide from both screenreaders and browsers: h5bp.com/u + */ + +.hidden { + display: none !important; + visibility: hidden; +} + +/* + * Hide only visually, but have it available for screenreaders: h5bp.com/v + */ + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* + * Extends the .visuallyhidden class to allow the element to be focusable + * when navigated to via the keyboard: h5bp.com/p + */ + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +/* + * Hide visually and from screenreaders, but maintain layout + */ + +.invisible { + visibility: hidden; +} + +/* + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ + +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/* + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ + +.clearfix { + *zoom: 1; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + Theses examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min-resolution: 144dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid required HTTP connection: h5bp.com/r + ========================================================================== */ + +@media print { + * { + background: transparent !important; + color: #000 !important; /* Black prints faster: h5bp.com/s */ + box-shadow:none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links for images, or javascript/internal links + */ + + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; /* h5bp.com/t */ + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} + --- /dev/null +++ b/css/normalize.css @@ -1,1 +1,505 @@ - +/*! normalize.css v1.0.1 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/* + * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary { + display: block; +} + +/* + * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. + */ + +audio, +canvas, +video { + display: inline-block; + *display: inline; + *zoom: 1; +} + +/* + * Prevents modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/* + * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, + * and Safari 4. + * Known issue: no IE 6 support. + */ + +[hidden] { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/* + * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using + * `em` units. + * 2. Prevents iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-size: 100%; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ + -ms-text-size-adjust: 100%; /* 2 */ +} + +/* + * Addresses `font-family` inconsistency between `textarea` and other form + * elements. + */ + +html, +button, +input, +select, +textarea { + font-family: sans-serif; +} + +/* + * Addresses margins handled incorrectly in IE 6/7. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/* + * Addresses `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/* + * Improves readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/* + * Addresses font sizes and margins set differently in IE 6/7. + * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, + * and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +h2 { + font-size: 1.5em; + margin: 0.83em 0; +} + +h3 { + font-size: 1.17em; + margin: 1em 0; +} + +h4 { + font-size: 1em; + margin: 1.33em 0; +} + +h5 { + font-size: 0.83em; + margin: 1.67em 0; +} + +h6 { + font-size: 0.75em; + margin: 2.33em 0; +} + +/* + * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/* + * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +blockquote { + margin: 1em 40px; +} + +/* + * Addresses styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/* + * Addresses styling not present in IE 6/7/8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/* + * Addresses margins set differently in IE 6/7. + */ + +p, +pre { + margin: 1em 0; +} + +/* + * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + _font-family: 'courier new', monospace; + font-size: 1em; +} + +/* + * Improves readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; +} + +/* + * Addresses CSS quotes not supported in IE 6/7. + */ + +q { + quotes: none; +} + +/* + * Addresses `quotes` property not supported in Safari 4. + */ + +q:before, +q:after { + content: ''; + content: none; +} + +/* + * Addresses inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/* + * Prevents `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Lists + ========================================================================== */ + +/* + * Addresses margins set differently in IE 6/7. + */ + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +/* + * Addresses paddings set differently in IE 6/7. + */ + +menu, +ol, +ul { + padding: 0 0 0 40px; +} + +/* + * Corrects list images handled incorrectly in IE 7. + */ + +nav ul, +nav ol { + list-style: none; + list-style-image: none; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/* + * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. + * 2. Improves image quality when scaled in IE 7. + */ + +img { + border: 0; /* 1 */ + -ms-interpolation-mode: bicubic; /* 2 */ +} + +/* + * Corrects overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/* + * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/* + * Corrects margin displayed oddly in IE 6/7. + */ + +form { + margin: 0; +} + +/* + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/* + * 1. Corrects color not being inherited in IE 6/7/8/9. + * 2. Corrects text not wrapping in Firefox 3. + * 3. Corrects alignment displayed oddly in IE 6/7. + */ + +legend { + border: 0; /* 1 */ + padding: 0; + white-space: normal; /* 2 */ + *margin-left: -7px; /* 3 */ +} + +/* + * 1. Corrects font size not being inherited in all browsers. + * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, + * and Chrome. + * 3. Improves appearance and consistency in all browsers. + */ + +button, +input, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ + vertical-align: baseline; /* 3 */ + *vertical-align: middle; /* 3 */ +} + +/* + * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/* + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Corrects inability to style clickable `input` types in iOS. + * 3. Improves usability and consistency of cursor style between image-type + * `input` and others. + * 4. Removes inner spacing in IE 7 without affecting normal text inputs. + * Known issue: inner spacing remains in IE 6. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ + *overflow: visible; /* 4 */ +} + +/* + * Re-set default cursor for disabled elements. + */ + +button[disabled], +input[disabled] { + cursor: default; +} + +/* + * 1. Addresses box sizing set to content-box in IE 8/9. + * 2. Removes excess padding in IE 8/9. + * 3. Removes excess padding in IE 7. + * Known issue: excess padding remains in IE 6. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ + *height: 13px; /* 3 */ + *width: 13px; /* 3 */ +} + +/* + * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/* + * Removes inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* + * Removes inner padding and border in Firefox 3+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + * 1. Removes default vertical scrollbar in IE 6/7/8/9. + * 2. Improves readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/* + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + --- /dev/null +++ b/doc/README.md @@ -1,1 +1,39 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) +# HTML5 Boilerplate documentation: + +## Getting started + +* [Usage](usage.md) — Overview of the project contents. +* [FAQ](faq.md) — Frequently asked questions, along with their answers. + +## The core of HTML5 Boilerplate + +* [HTML](html.md) — A guide to the default HTML. +* [CSS](css.md) — A guide to the default CSS. +* [JavaScript](js.md) — A guide to the default JavaScript. +* [.htaccess](htaccess.md) — All about the Apache web server config (also see + our [alternative server configs](https://github.com/h5bp/server-configs)). +* [crossdomain.xml](crossdomain.md) — An introduction to making use of + crossdomain requests. +* [Everything else](misc.md). + +## Development + +* [Contributing to HTML5 Boilerplate](contribute.md) — Guidelines on how to + contribute effectively. +* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further with + the boilerplate. + +## Related projects + +HTML5 Boilerplate has several related projects to help improve the performance +of your site/app in various production environments. + +* [Server configs](https://github.com/h5bp/server-configs) — Configs for + non-Apache servers. +* [Node build script](https://github.com/h5bp/node-build-script) — A + feature-rich [grunt](https://github.com/cowboy/grunt) plugin. +* [Ant build script](https://github.com/h5bp/ant-build-script) — The original + HTML5 Boilerplate build script. + --- /dev/null +++ b/doc/contribute.md @@ -1,1 +1,105 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](README.md) +# Contributing to HTML5 Boilerplate + +♥ HTML5 Boilerplate and want to get involved? Thanks! There are plenty of ways +you can help! + + +## Reporting issues + +A bug is a _demonstrable problem_ that is caused by the code in the +repository. + +Please read the following guidelines before you [report an issue](https://github.com/h5bp/html5-boilerplate/issues/): + +1. **Use the GitHub issue search** — check if the issue has already been + reported. If it has been, please comment on the existing issue. + +2. **Check if the issue has been fixed** — the latest `master` or + development branch may already contain a fix. + +3. **Isolate the demonstrable problem** — make sure that the code in the + project's repository is _definitely_ responsible for the issue. Create a + [reduced test case](http://css-tricks.com/6263-reduced-test-cases/) - an + extremely simple and immediately viewable example of the issue. + +4. **Include a live example** — provide a link to your reduced test case + when appropriate (e.g. if the issue is related to (front-end technologies). + Please use [jsFiddle](http://jsfiddle.net) to host examples. + +Please try to be as detailed as possible in your report too. What is your +environment? What steps will reproduce the issue? What browser(s) and OS +experience the problem? What would you expect to be the outcome? All these +details will help people to assess and fix any potential bugs. + +### Example of a good bug report: + +> Short and descriptive title +> +> A summary of the issue and the browser/OS environment in which it occurs. If +> suitable, include the steps required to reproduce the bug. +> +> 1. This is the first step +> 2. This is the second step +> 3. Further steps, etc. +> +> `` (a link to the reduced test case) +> +> Any other information you want to share that is relevant to the issue being +> reported. This might include the lines of code that you have identified as +> causing the bug, and potential solutions (and your opinions on their +> merits). + +A good bug report shouldn't leave people needing to chase you up to get further +information that is required to assess or fix the bug. + +**[File a bug report](https://github.com/h5bp/html5-boilerplate/issues/)** + + +## Pull requests + +Good pull requests — patches, improvements, new features — are a fantastic +help. They should remain focused in scope and avoid containing unrelated +commits. + +If your contribution involves a significant amount of work or substantial +changes to any part of the project, please open an issue to discuss it first. + +Please follow this process; it's the best way to get your work included in the +project: + +1. [Fork](http://help.github.com/fork-a-repo/) the project. + +2. Clone your fork (`git clone + https://github.com//html5-boilerplate.git`). + +3. Add an `upstream` remote (`git remote add upstream + https://github.com/h5bp/html5-boilerplate.git`). + +4. Get the latest changes from upstream (e.g. `git pull upstream + `). + +5. Create a new topic branch to contain your feature, change, or fix (`git + checkout -b `). + +6. Make sure that your changes adhere to the current coding conventions used + throughout the project - indentation, accurate comments, etc. Please update + any documentation that is relevant to the change you are making. + +7. Commit your changes in logical chunks; use git's [interactive + rebase](https://help.github.com/articles/interactive-rebase) feature to tidy + up your commits before making them public. Please adhere to these [git commit + message + guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) + or your pull request is unlikely be merged into the main project. + +8. Locally merge (or rebase) the upstream branch into your topic branch. + +9. Push your topic branch up to your fork (`git push origin + `). + +10. [Open a Pull Request](http://help.github.com/send-pull-requests/) with a + clear title and description. Please mention which browsers you tested in. + --- /dev/null +++ b/doc/crossdomain.md @@ -1,1 +1,22 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](README.md) +# crossdomain.xml + +A cross-domain policy file is an XML document that grants a web client—such as +Adobe Flash Player, Adobe Reader, etc., permission to handle data across +multiple domains. When a client hosts content from a particular source domain +and that content makes requests directed towards a domain other than its own, +the remote domain would need to host a cross-domain policy file that grants +access to the source domain, allowing the client to continue with the +transaction. Policy files grant read access to data, permit a client to include +custom headers in cross-domain requests, and are also used with sockets to +grant permissions for socket-based connections. + +For full details, check out Adobe's article about the [cross-domain policy file +specification](http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html) + +Read the [Cross-domain policy file +specification](http://learn.adobe.com/wiki/download/attachments/64389123/CrossDomain_PolicyFile_Specification.pdf?version=1) +- (PDF, 129 KB) + --- /dev/null +++ b/doc/css.md @@ -1,1 +1,136 @@ +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](README.md) +# The CSS + +The HTML5 Boilerplate starting CSS includes: + +* [Normalize.css](https://github.com/necolas/normalize.css). +* Useful HTML5 Boilerplate defaults. +* Common helpers. +* Placeholder media queries. +* Print styles. + +This starting CSS does not rely on the presence of conditional classnames, +conditional style sheets, or Modernizr. It is ready to use whatever your +development preferences happen to be. + + +## Normalize.css + +Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains +extensive inline documentation. Please refer to the [Normalize.css +project](http://necolas.github.com/normalize.css/) for more information. + + +## HTML5 Boilerplate defaults + +This project includes a handful of base styles that build upon Normalize.css. +These include: + +* Basic typography settings to provide improved text readability by default. +* Protection against unwanted `text-shadow` during text highlighting. +* Tweaks to default image alignment, fieldsets, and textareas. +* A pretty Chrome Frame prompt. + +You are free to modify or add to these base styles as your project requires. + + +## Common helpers + +#### `.ir` + +Add the `.ir` class to any element you are applying image-replacement to. When +replacing an element's content with an image, make sure to also set a specific +`background-image: url(pathtoimage.png);`, `width`, and `height` so that your +replacement image appears. + +#### `.hidden` + +Add the `.hidden` class to any elements that you want to hide from all +presentations, including screen readers. It could be an element that will be +populated later with JavaScript or an element you will hide with JavaScript. Do +not use this for SEO keyword stuffing. That is just not cool. + +#### `.visuallyhidden` + +Add the `.visuallyhidden` class to hide text from browsers but make it +available for screen readers. You can use this to hide text that is specific to +screen readers but that other users should not see. [About invisible +content](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding +content for +accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility), +[HTML5 Boilerplate +issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/). + +#### `.invisible` + +Add the `.invisible` class to any element you want to hide without affecting +layout. When you use `display: none` an element is effectively removed from the +layout. But in some cases you want the element to simply be invisible while +remaining in the flow and not affecting the positioning of surrounding +content. + +#### `.clearfix` + +Adding `.clearfix` to an element will ensure that it always fully contains its +floated children. There have been many variants of the clearfix hack over the +years, and there are other hacks that can also help you to contain floated +children, but the HTML5 Boilerplate currently uses the [micro +clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). + + +## Media Queries + +The boilerplate makes it easy to get started with a "Mobile First" and +[Responsive Web +Design](http://www.alistapart.com/articles/responsive-web-design/) approach to +development. But it's worth remembering that there are [no silver +bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). + +We include a placeholder Media Queries to build up your mobile styles for wider +viewports and high-resolution displays. It's recommended that you adapt these +Media Queries based on the content of your site rather than mirroring the fixed +dimensions of specific devices. + +If you do not want to take a "Mobile First" approach, you can simply edit or +remove these placeholder Media Queries. One possibility would be to work from +wide viewports down and use `max-width` MQs instead, e.g., `@media only screen +and (max-width: 480px)`. + +Take a look into the [Mobile +Boilerplate](https://github.com/h5bp/mobile-boilerplate) for features that are +useful when developing mobile wep apps. + + +## Print styles + +* Print styles are inlined to [reduce the number of page + requests](http://www.phpied.com/delay-loading-your-print-css/). +* We strip all background colors and change the font color to dark gray and + remove text-shadow. This is meant to help save printer ink. +* Anchors do not need colors to indicate they are linked. They are underlined + to indicate so. +* Anchors and Abbreviations are expanded to indicate where users reading the + printed page can refer to. +* But we do not want to show link text for image replaced elements (given that + they are primarily images). + +### Paged media styles + +* Paged media is supported only in a [few + browsers](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules). +* Paged media support means browsers would know how to interpret instructions + on breaking content into pages and on orphans/widows. +* We use `page-break-inside: avoid;` to prevent an image and table row from + being split into two different pages, so use the same `page-break-inside: + avoid;` for that as well. +* Headings should always appear with the text they are titles for. So, we + ensure headings never appear in a different page than the text they describe + by using `page-break-after: avoid;`. +* We also apply a default margin for the page specified in `cm`. +* We do not want [orphans and + widows](http://en.wikipedia.org/wiki/Widows_and_orphans) to appear on pages + you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal + number of words that every line should contain. + --- /dev/null +++ b/doc/extend.md @@ -1,1 +1,508 @@ - +[HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation +table of contents](README.md) + +# Extend and customise HTML5 Boilerplate + +Here is some useful advice for how you can make your project with HTML5 +Boilerplate even better. We don't want to include it all by default, as not +everything fits with everyone's needs. + + +## DNS prefetching + +In short, DNS Prefetching is a method of informing the browser of domain names +referenced on a site so that the client can resolve the DNS for those hosts, +cache them, and when it comes time to use them, have a faster turn around on +the request. + +### Implicit prefetches + +There is a lot of prefetching done for you automatically by the browser. When +the browser encounters an anchor in your html that does not share the same +domain name as the current location the browser requests, from the client OS, +the IP address for this new domain. The client first checks its cache and +then, lacking a cached copy, makes a request from a DNS server. These requests +happen in the background and are not meant to block the rendering of the +page. + +The goal of this is that when the foreign IP address is finally needed it will +already be in the client cache and will not block the loading of the foreign +content. Less requests result in faster page load times. The perception of this +is increased on a mobile platform where DNS latency can be greater. + +#### Disable implicit prefetching + +```html +