├── .gitignore ├── bower.json ├── component.json ├── package.json ├── composer.json ├── LICENSE.md ├── README.md └── css └── main.css /.gitignore: -------------------------------------------------------------------------------- 1 | components 2 | composer.lock 3 | vendor 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html5boilerplate", 3 | "version": "4.1.0", 4 | "description": "HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.", 5 | "homepage": "http://html5boilerplate.com/", 6 | "keywords": [ 7 | "html5", 8 | "css3" 9 | ], 10 | "main": "css/main.css" 11 | } 12 | -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html5-boilerplate", 3 | "repo": "components/html5-boilerplate", 4 | "version": "4.1.0", 5 | "description": "HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.", 6 | "homepage": "http://html5boilerplate.com/", 7 | "keywords": [ 8 | "html5", 9 | "css3" 10 | ], 11 | "styles": [ 12 | "css/main.css" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "html5-boilerplate", 3 | "version": "4.1.0", 4 | "description": "HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/component/html5-boilerplate.git" 8 | }, 9 | "author": { 10 | "name": "HTML5 Boilerplate", 11 | "url": "http://html5boilerplate.com/" 12 | }, 13 | "license": "MIT" 14 | } 15 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "components/html5-boilerplate", 3 | "description": "HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.", 4 | "keywords": [ 5 | "html5", 6 | "css3" 7 | ], 8 | "type": "component", 9 | "homepage": "http://html5boilerplate.com", 10 | "license": "MIT", 11 | "require": { 12 | "components/jquery": ">=1.10.2,<1.11-dev", 13 | "components/modernizr": ">=2.6.2", 14 | "components/normalize.css": "1.*" 15 | }, 16 | "extra": { 17 | "component": { 18 | "styles": [ 19 | "css/main.css" 20 | ] 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) HTML5 Boilerplate 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [HTML5 Boilerplate](http://html5boilerplate.com) 2 | 3 | HTML5 Boilerplate is a professional front-end template for building fast, 4 | robust, and adaptable web apps or sites. 5 | 6 | This project is the product of many years of iterative development and combined 7 | community knowledge. It does not impose a specific development philosophy or 8 | framework, so you're free to architect your code in the way that you want. 9 | 10 | * Source: [https://github.com/h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate) 11 | * Homepage: [http://html5boilerplate.com](http://html5boilerplate.com) 12 | * Twitter: [@h5bp](http://twitter.com/h5bp) 13 | 14 | 15 | ## Quick start 16 | 17 | Choose one of the following options: 18 | 19 | 1. Download the latest stable release from 20 | [html5boilerplate.com](http://html5boilerplate.com/) or a custom build from 21 | [Initializr](http://www.initializr.com). 22 | 2. Clone the git repo — `git clone 23 | https://github.com/h5bp/html5-boilerplate.git` - and checkout the tagged 24 | release you'd like to use. 25 | 26 | 27 | ## Features 28 | 29 | * HTML5 ready. Use the new elements with confidence. 30 | * Cross-browser compatible (Chrome, Opera, Safari, Firefox 3.6+, IE6+). 31 | * Designed with progressive enhancement in mind. 32 | * Includes [Normalize.css](http://necolas.github.com/normalize.css/) for CSS 33 | normalizations and common bug fixes. 34 | * The latest [jQuery](http://jquery.com/) via CDN, with a local fallback. 35 | * The latest [Modernizr](http://modernizr.com/) build for feature detection. 36 | * IE-specific classes for easier cross-browser control. 37 | * Placeholder CSS Media Queries. 38 | * Useful CSS helpers. 39 | * Default print CSS, performance optimized. 40 | * Protection against any stray `console.log` causing JavaScript errors in 41 | IE6/7. 42 | * An optimized Google Analytics snippet. 43 | * Apache server caching, compression, and other configuration defaults for 44 | Grade-A performance. 45 | * Cross-domain Ajax and Flash. 46 | * "Delete-key friendly." Easy to strip out parts you don't need. 47 | * Extensive inline and accompanying documentation. 48 | 49 | 50 | ## Documentation 51 | 52 | Take a look at the [documentation table of contents](doc/TOC.md). This 53 | documentation is bundled with the project, which makes it readily available for 54 | offline reading and provides a useful starting point for any documentation you 55 | want to write about your project. 56 | 57 | 58 | ## Contributing 59 | 60 | Anyone and everyone is welcome to [contribute](CONTRIBUTING.md). Hundreds of 61 | developers have helped make the HTML5 Boilerplate what it is today. 62 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ 2 | 3 | /* 4 | * What follows is the result of much research on cross-browser styling. 5 | * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, 6 | * Kroc Camen, and the H5BP dev community and team. 7 | */ 8 | 9 | /* ========================================================================== 10 | Base styles: opinionated defaults 11 | ========================================================================== */ 12 | 13 | html, 14 | button, 15 | input, 16 | select, 17 | textarea { 18 | color: #222; 19 | } 20 | 21 | html { 22 | font-size: 1em; 23 | line-height: 1.4; 24 | } 25 | 26 | /* 27 | * Remove text-shadow in selection highlight: h5bp.com/i 28 | * These selection rule sets have to be separate. 29 | * Customize the background color to match your design. 30 | */ 31 | 32 | ::-moz-selection { 33 | background: #b3d4fc; 34 | text-shadow: none; 35 | } 36 | 37 | ::selection { 38 | background: #b3d4fc; 39 | text-shadow: none; 40 | } 41 | 42 | /* 43 | * A better looking default horizontal rule 44 | */ 45 | 46 | hr { 47 | display: block; 48 | height: 1px; 49 | border: 0; 50 | border-top: 1px solid #ccc; 51 | margin: 1em 0; 52 | padding: 0; 53 | } 54 | 55 | /* 56 | * Remove the gap between images, videos, audio and canvas and the bottom of 57 | * their containers: h5bp.com/i/440 58 | */ 59 | 60 | audio, 61 | canvas, 62 | img, 63 | video { 64 | vertical-align: middle; 65 | } 66 | 67 | /* 68 | * Remove default fieldset styles. 69 | */ 70 | 71 | fieldset { 72 | border: 0; 73 | margin: 0; 74 | padding: 0; 75 | } 76 | 77 | /* 78 | * Allow only vertical resizing of textareas. 79 | */ 80 | 81 | textarea { 82 | resize: vertical; 83 | } 84 | 85 | /* ========================================================================== 86 | Browse Happy prompt 87 | ========================================================================== */ 88 | 89 | .browsehappy { 90 | margin: 0.2em 0; 91 | background: #ccc; 92 | color: #000; 93 | padding: 0.2em 0; 94 | } 95 | 96 | /* ========================================================================== 97 | Author's custom styles 98 | ========================================================================== */ 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | /* ========================================================================== 117 | Helper classes 118 | ========================================================================== */ 119 | 120 | /* 121 | * Image replacement 122 | */ 123 | 124 | .ir { 125 | background-color: transparent; 126 | border: 0; 127 | overflow: hidden; 128 | /* IE 6/7 fallback */ 129 | *text-indent: -9999px; 130 | } 131 | 132 | .ir:before { 133 | content: ""; 134 | display: block; 135 | width: 0; 136 | height: 150%; 137 | } 138 | 139 | /* 140 | * Hide from both screenreaders and browsers: h5bp.com/u 141 | */ 142 | 143 | .hidden { 144 | display: none !important; 145 | visibility: hidden; 146 | } 147 | 148 | /* 149 | * Hide only visually, but have it available for screenreaders: h5bp.com/v 150 | */ 151 | 152 | .visuallyhidden { 153 | border: 0; 154 | clip: rect(0 0 0 0); 155 | height: 1px; 156 | margin: -1px; 157 | overflow: hidden; 158 | padding: 0; 159 | position: absolute; 160 | width: 1px; 161 | } 162 | 163 | /* 164 | * Extends the .visuallyhidden class to allow the element to be focusable 165 | * when navigated to via the keyboard: h5bp.com/p 166 | */ 167 | 168 | .visuallyhidden.focusable:active, 169 | .visuallyhidden.focusable:focus { 170 | clip: auto; 171 | height: auto; 172 | margin: 0; 173 | overflow: visible; 174 | position: static; 175 | width: auto; 176 | } 177 | 178 | /* 179 | * Hide visually and from screenreaders, but maintain layout 180 | */ 181 | 182 | .invisible { 183 | visibility: hidden; 184 | } 185 | 186 | /* 187 | * Clearfix: contain floats 188 | * 189 | * For modern browsers 190 | * 1. The space content is one way to avoid an Opera bug when the 191 | * `contenteditable` attribute is included anywhere else in the document. 192 | * Otherwise it causes space to appear at the top and bottom of elements 193 | * that receive the `clearfix` class. 194 | * 2. The use of `table` rather than `block` is only necessary if using 195 | * `:before` to contain the top-margins of child elements. 196 | */ 197 | 198 | .clearfix:before, 199 | .clearfix:after { 200 | content: " "; /* 1 */ 201 | display: table; /* 2 */ 202 | } 203 | 204 | .clearfix:after { 205 | clear: both; 206 | } 207 | 208 | /* 209 | * For IE 6/7 only 210 | * Include this rule to trigger hasLayout and contain floats. 211 | */ 212 | 213 | .clearfix { 214 | *zoom: 1; 215 | } 216 | 217 | /* ========================================================================== 218 | EXAMPLE Media Queries for Responsive Design. 219 | These examples override the primary ('mobile first') styles. 220 | Modify as content requires. 221 | ========================================================================== */ 222 | 223 | @media only screen and (min-width: 35em) { 224 | /* Style adjustments for viewports that meet the condition */ 225 | } 226 | 227 | @media print, 228 | (-o-min-device-pixel-ratio: 5/4), 229 | (-webkit-min-device-pixel-ratio: 1.25), 230 | (min-resolution: 120dpi) { 231 | /* Style adjustments for high resolution devices */ 232 | } 233 | 234 | /* ========================================================================== 235 | Print styles. 236 | Inlined to avoid required HTTP connection: h5bp.com/r 237 | ========================================================================== */ 238 | 239 | @media print { 240 | * { 241 | background: transparent !important; 242 | color: #000 !important; /* Black prints faster: h5bp.com/s */ 243 | box-shadow: none !important; 244 | text-shadow: none !important; 245 | } 246 | 247 | a, 248 | a:visited { 249 | text-decoration: underline; 250 | } 251 | 252 | a[href]:after { 253 | content: " (" attr(href) ")"; 254 | } 255 | 256 | abbr[title]:after { 257 | content: " (" attr(title) ")"; 258 | } 259 | 260 | /* 261 | * Don't show links for images, or javascript/internal links 262 | */ 263 | 264 | .ir a:after, 265 | a[href^="javascript:"]:after, 266 | a[href^="#"]:after { 267 | content: ""; 268 | } 269 | 270 | pre, 271 | blockquote { 272 | border: 1px solid #999; 273 | page-break-inside: avoid; 274 | } 275 | 276 | thead { 277 | display: table-header-group; /* h5bp.com/t */ 278 | } 279 | 280 | tr, 281 | img { 282 | page-break-inside: avoid; 283 | } 284 | 285 | img { 286 | max-width: 100% !important; 287 | } 288 | 289 | @page { 290 | margin: 0.5cm; 291 | } 292 | 293 | p, 294 | h2, 295 | h3 { 296 | orphans: 3; 297 | widows: 3; 298 | } 299 | 300 | h2, 301 | h3 { 302 | page-break-after: avoid; 303 | } 304 | } 305 | --------------------------------------------------------------------------------