diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..bf94037 Binary files /dev/null and b/.DS_Store differ diff --git a/404.html b/404.html new file mode 100644 index 0000000..8d7925a --- /dev/null +++ b/404.html @@ -0,0 +1,60 @@ + + + + + Page Not Found + + + + +

Page Not Found

+

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

+ + + diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..294e91d --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,19 @@ +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. diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..600738f Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/browserconfig.xml b/browserconfig.xml new file mode 100644 index 0000000..219b759 --- /dev/null +++ b/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/crossdomain.xml b/crossdomain.xml new file mode 100644 index 0000000..818b822 --- /dev/null +++ b/crossdomain.xml @@ -0,0 +1,15 @@ + + + + + + + + + + + diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..92d426d --- /dev/null +++ b/css/main.css @@ -0,0 +1,540 @@ +/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ + +/* + * 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 { + color: #222; + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: + * https://twitter.com/miketaylr/status/12228805301 + * + * These selection rule sets 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 audio, canvas, iframes, + * images, videos and the bottom of their containers: + * https://github.com/h5bp/html5-boilerplate/issues/440 + */ + +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Browser Upgrade Prompt + ========================================================================== */ + +.browserupgrade { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ +#home { + background-color: #28af73; +} + +#title h2 { + font-family: avenir; + font-size: 35px; + text-align: center; + margin-top: 0px; + padding-top: 40px; + color: #d3eade; + margin-bottom:0px; +} + +#title h4 { + color: #ade4cd; + font-weight: 400; + text-align: center; + margin-top: 0px; + font-family: avenir; +} + +#homephoto { + width: 95%; + margin-left: 2.5%; + padding-top: 50px; +} + +#intro { + background-color:#51c1ed; + height: auto; +} + +#intro h4 { + color: white; + font-weight: 400; + text-align: center; + margin-top: 0px; + font-family: avenir; + padding-top: 20px; + font-size: 18px; +} + +.realphoto { + width: 90%; + margin-left: 5%; + padding-bottom: 20px; + margin-right: 5%; } + +.features { + height: auto; + background-color: #25213f; +} + +.maxwidth { + border-bottom: 3px solid #171425; +} + +#homescreen { + width:100%; +} + +h3 { + color: white; + font-weight: 500; + text-align: center; + margin-top: 0px; + font-family: avenir; + padding-top: 10px; + font-size: 40px; + margin-bottom: 0px; +} + +.features h4 { + color: #52a9d9; + font-family: avenir; + text-align: center; + font-weight: 400; + margin-top: 0; + margin-bottom:0px; +} + +.text { + margin-left: 5%; + margin-right: 5%; + +} + +.demo { + width:200px; + margin:auto; + display: block; +} + +.photo2 { + width: 90%; + margin: auto; + display: block; + margin-top: 30px; +} + +footer { + background-color: #28af73; + height: auto; +} + +#authors { + padding-top: 10px; +} + +h5 { + font-size: 15px; + color: black; + margin: 0px; +} + +body { + padding: 0px; +} + +#socialmedia { + padding-top: 10px; +} + +@media only screen and (min-width: 400px) and (max-width: 600px) { + #title h2 { + font-family: avenir; + font-size: 40px; + text-align: center; + margin-top: 0px; + padding-top: 40px; + color: #d3eade; + margin-bottom:0px; +} + +#homephoto { + padding-top: 80px; +} + +} + +@media only screen and (min-width: 601px) and (max-width: 2000px) { + #title h2 { +font-size: 60px; +padding-top: 60px; + } + + #homephoto { + padding-top: 120px; + } + + #title h4 { + font-size: 25px; + } + + .inline { + display: inline; + width: 40%; + float:left; + } + + .realphoto { + width: 100%; + margin:0px; + } + + #homephoto { + margin: 0px; + } + + .middle { + padding-top:180px; + } + + #realphotos { + padding-top: 30px; + } + + #intro h4 { + font-size: 22px; + } + + h3 { + font-size: 50px; + } + + .features h4 { + color: #52a9d9; + font-family: avenir; + text-align: center; + font-weight: 400; + margin-top: 0px; + width: 500px; + margin-bottom: 0px; + margin: auto; + padding-top: 20px; +} +} + +.maxwidth { + width:90%; + margin: auto; +} + +@media only screen and (min-width: 601px) and (max-width: 655px) { + #intro { + height: 480px; + } + +} + +@media only screen and (min-width: 656px) and (max-width: 733px) { + #intro { + height: 530px; + } + +} + +@media only screen and (min-width: 734px) and (max-width: 80000px) { + #intro { + height: 580px; + } + +} + +@media only screen and (min-width: 800px) and (max-width: 2000px) { + .maxwidth { + width: 808px; + margin:auto; + display:block; + } + + .maxwidthh { + width: 808px; + margin:auto; + display:block; + } + + #homephoto { + margin: 0px; + } +} + +@media only screen and (min-width: 0px) and (max-width: 600px) { +#realphotos { + width: 100%;} +} + +@media only screen and (min-width: 500px) and (max-width: 2000px) { + #authors { + float:left; + display:inline; + padding-left: 20px; + } + + #socialmedia { + float: right; + display: inline; + padding-right: 10px; + } + + footer { + height: 92px; + } + + h5 { + text-align:left; + } +} + +#biggertext { + font-size: 20px !important; +} + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Hide visually and from screen readers + */ + +.hidden { + display: none !important; +} + +/* + * Hide only visually, but have it available for screen readers: + * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility + */ + +.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: + * https://www.drupal.org/node/897638 + */ + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +/* + * Hide visually and from screen readers, 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; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These 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 print, + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 1.25dppx), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid the additional HTTP request: + http://www.phpied.com/delay-loading-your-print-css/ + ========================================================================== */ + +@media print { + *, + *:before, + *:after, + *:first-letter, + *:first-line { + background: transparent !important; + color: #000 !important; /* Black prints faster: + http://www.sanbeiji.com/archives/953 */ + 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 that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + /* + * Printing Tables: + * http://css-discuss.incutio.com/wiki/Printing_Tables + */ + + thead { + display: table-header-group; + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +} diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..5e5e3c8 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,424 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS and IE text size adjust after device orientation change, + * without disabling user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability of focused elements when they are also in an + * active/hover state. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `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; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + box-sizing: content-box; /* 2 */ +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7f276fb --- /dev/null +++ b/css/style.css @@ -0,0 +1,88 @@ +html { + font-size: 20px; +} +body { + background-color: #ccc; + text-align: center; +} + +/* Wrapper */ +.icon-button { + background-color: white; + border-radius: 3.6rem; + cursor: pointer; + display: inline-block; + font-size: 2.0rem; + height: 3.6rem; + line-height: 3.6rem; + margin: 0 5px; + position: relative; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 3.6rem; +} + +/* Circle */ +.icon-button span { + border-radius: 0; + display: block; + height: 0; + left: 50%; + margin: 0; + position: absolute; + top: 50%; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + transition: all 0.3s; + width: 0; +} +.icon-button:hover span { + width: 3.6rem; + height: 3.6rem; + border-radius: 3.6rem; + margin: -1.8rem; +} +.twitter span { + background-color: #4099ff; +} +.facebook span { + background-color: #3B5998; +} +.google-plus span { + background-color: #db5a3c; +} + +/* Icons */ +.icon-button i { + background: none; + color: white; + height: 3.6rem; + left: 0; + line-height: 3.6rem; + position: absolute; + top: 0; + -webkit-transition: all 0.3s; + -moz-transition: all 0.3s; + -o-transition: all 0.3s; + transition: all 0.3s; + width: 3.6rem; + z-index: 10; +} +.icon-button .icon-twitter { + color: #4099ff; +} +.icon-button .icon-facebook { + color: #3B5998; +} +.icon-button .icon-google-plus { + color: #db5a3c; +} +.icon-button:hover .icon-twitter, +.icon-button:hover .icon-facebook, +.icon-button:hover .icon-google-plus { + color: white; +} \ No newline at end of file diff --git a/doc/TOC.md b/doc/TOC.md new file mode 100644 index 0000000..483997a --- /dev/null +++ b/doc/TOC.md @@ -0,0 +1,29 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) + +## Getting started + +* [Usage](usage.md) — Overview of the project contents. +* [FAQ](faq.md) — Frequently asked questions along with their answers. + +## HTML5 Boilerplate core + +* [HTML](html.md) — Guide to the default HTML. +* [CSS](css.md) — Guide to the default CSS. +* [JavaScript](js.md) — Guide to the default JavaScript. +* [Everything else](misc.md). + +## Development + +* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further + with the boilerplate. + +## Related projects + +The [H5BP organization](https://github.com/h5bp) maintains several projects +that complement HTML5 Boilerplate, projects that can help you improve different +aspects of your website/web app (e.g.: the performance, security, etc.). + +* [Server Configs](https://github.com/h5bp/server-configs) — Fast and + smart configurations for web servers such as Apache and Nginx. +* [Ant Build Script](https://github.com/h5bp/ant-build-script) — Apache + Ant based build script. diff --git a/doc/css.md b/doc/css.md new file mode 100644 index 0000000..58f6345 --- /dev/null +++ b/doc/css.md @@ -0,0 +1,162 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# The CSS + +HTML5 Boilerplate's CSS includes: + +* [Normalize.css](#normalizecss) +* [Useful defaults](#useful-defaults) +* [Common helpers](#common-helpers) +* [Placeholder media queries](#media-queries) +* [Print styles](#print-styles) + +This starting CSS does not rely on the presence of +[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/), +[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/), +or [Modernizr](http://modernizr.com/), and it is ready to use no matter what +your development preferences happen to be. + + +## Normalize.css + +In order to make browsers render all elements more consistently and in line +with modern standards, we include +[Normalize.css](https://necolas.github.io/normalize.css/) — a modern, HTML5-ready +alternative to CSS resets. + +As opposed to CSS resets, Normalize.css: + +* targets only the styles that need normalizing +* preserves useful browser defaults rather than erasing them +* corrects bugs and common browser inconsistencies +* improves usability with subtle improvements +* doesn't clutter the debugging tools +* has better documentation + +For more information about Normalize.css, please refer to its [project +page](https://necolas.github.com/normalize.css/), as well as this +[blog post](http://nicolasgallagher.com/about-normalize-css/). + + +## Useful defaults + +Several base styles are included that build upon `Normalize.css`. These +styles: + +* provide basic typography settings that improve text readability +* protect against unwanted `text-shadow` during text highlighting +* tweak the default alignment of some elements (e.g.: `img`, `video`, + `fieldset`, `textarea`) +* style the prompt that is displayed to users using an outdated browser + +You are free and even encouraged to modify or add to these base styles as your +project requires. + + +## Common helpers + +Along with the base styles, we also provide some commonly used helper classes. + +#### `.hidden` + +The `hidden` class can be added to any element that you want to hide visually +and from screen readers. It could be an element that will be populated and +displayed later, or an element you will hide with JavaScript. + +#### `.visuallyhidden` + +The `visuallyhidden` class can be added to any element that you want to hide +visually, while still have its content accessible to screen readers. + +See also: + +* [CSS in Action: Invisible Content Just for Screen Reader + Users](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 #194](https://github.com/h5bp/html5-boilerplate/issues/194/). + +#### `.invisible` + +The `invisible` class can be added to any element that you want to hide +visually and from screen readers, but without affecting the layout. + +As opposed to the `hidden` class that effectively removes the element from the +layout, the `invisible` class will simply make the element invisible while +keeping it in the flow and not affecting the positioning of the surrounding +content. + +__N.B.__ Try to stay away from, and don't use the classes specified above for +[keyword stuffing](https://en.wikipedia.org/wiki/Keyword_stuffing) as you will +harm your site's ranking! + +#### `.clearfix` + +The `clearfix` class can be added to any element to ensure that it always fully +contains its floated children. + +Over the years there have been many variants of the clearfix hack, but currently, +we use the [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/). + + +## Media Queries + +HTML5 Boilerplate makes it easy for you to get started with a +[_mobile first_](http://www.lukew.com/presos/preso.asp?26) 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://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/). + +We include placeholder media queries to help you 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 the _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` media queries instead (e.g.: +`@media only screen and (max-width: 480px)`). + +For more features that can help you in your mobile web development, take a look +into our [Mobile Boilerplate](https://github.com/h5bp/mobile-boilerplate). + + +## Print styles + +Lastly, we provide some useful print styles that will optimize the printing +process, as well as make the printed pages easier to read. + +At printing time, these styles will: + +* strip all background colors, change the font color to black, and remove the + `text-shadow` — done in order to [help save printer ink and speed up the + printing process](http://www.sanbeiji.com/archives/953) +* underline and expand links to include the URL — done in order to allow users + to know where to refer to
+ (exceptions to this are: the links that are + [fragment identifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href), + or use the + [`javascript:` pseudo protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void#JavaScript_URIs)) +* expand abbreviations to include the full description — done in order to allow + users to know what the abbreviations stands for +* provide instructions on how browsers should break the content into pages and + on [orphans/widows](https://en.wikipedia.org/wiki/Widows_and_orphans), namely, + we instruct + [supporting browsers](https://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules) + that they should: + + * ensure the table header (``) is [printed on each page spanned by the + table](http://css-discuss.incutio.com/wiki/Printing_Tables) + * prevent block quotations, preformatted text, images and table rows from + being split onto two different pages + * ensure that headings never appear on a different page than the text they + are associated with + * ensure that + [orphans and widows](https://en.wikipedia.org/wiki/Widows_and_orphans) do + [not appear on printed pages](https://css-tricks.com/almanac/properties/o/orphans/) + +The print styles are included along with the other `css` to [avoid the +additional HTTP request](http://www.phpied.com/delay-loading-your-print-css/). +Also, they should always be included last, so that the other styles can be +overwritten. diff --git a/doc/extend.md b/doc/extend.md new file mode 100644 index 0000000..c98e177 --- /dev/null +++ b/doc/extend.md @@ -0,0 +1,663 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.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. + + +* [App Stores](#app-stores) +* [DNS prefetching](#dns-prefetching) +* [Google Universal Analytics](#google-universal-analytics) +* [Internet Explorer](#internet-explorer) +* [Miscellaneous](#miscellaneous) +* [News Feeds](#news-feeds) +* [Search](#search) +* [Social Networks](#social-networks) +* [URLs](#urls) +* [Web Apps](#web-apps) + + +## App Stores + +### Install a Chrome Web Store app + +Users can install a Chrome app directly from your website, as long as +the app and site have been associated via Google's Webmaster Tools. +Read more on [Chrome Web Store's Inline Installation +docs](https://developer.chrome.com/webstore/inline_installation). + +```html + +``` + +### Smart App Banners in iOS 6+ Safari + +Stop bothering everyone with gross modals advertising your entry in the +App Store. Include the following [meta tag](https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html#//apple_ref/doc/uid/TP40002051-CH6-SW2) +will unintrusively allow the user the option to download your iOS app, +or open it with some data about the user's current state on the website. + +```html + +``` + +## 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. Fewer 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 + +``` + +Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still +prefetch any explicit dns-prefetch links. + +**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM +FOREIGN DOMAINS. + +### Explicit prefetches + +Typically the browser only scans the HTML for foreign domains. If you have +resources that are outside of your HTML (a javascript request to a remote +server or a CDN that hosts content that may not be present on every page of +your site, for example) then you can queue up a domain name to be prefetched. + +```html + + +``` + +You can use as many of these as you need, but it's best if they are all +immediately after the [Meta +Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset) +element (which should go right at the top of the `head`), so the browser can +act on them ASAP. + +#### Common Prefetch Links + +Amazon S3: + +```html + +``` + +Google APIs: + +```html + +``` + +Microsoft Ajax Content Delivery Network: + +```html + + +``` + +### Further reading about DNS prefetching + +* https://developer.mozilla.org/en-US/docs/Controlling_DNS_prefetching +* https://dev.chromium.org/developers/design-documents/dns-prefetching +* http://blogs.msdn.com/b/ie/archive/2011/03/17/internet-explorer-9-network-performance-improvements.aspx +* http://dayofjs.com/videos/22158462/web-browsers_alex-russel + + +## Google Universal Analytics + +### More tracking settings + +The [optimized Google Universal Analytics +snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) +included with HTML5 Boilerplate includes something like this: + +```js +ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview'); +``` + +To customize further, see Google's [Advanced +Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced), +[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages), +and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs. + +### Anonymize IP addresses + +In some countries, no personal data may be transferred outside jurisdictions +that do not have similarly strict laws (i.e. from Germany to outside the EU). +Thus a webmaster using the Google Universal Analytics may have to ensure that +no personal (trackable) data is transferred to the US. You can do that with +[the `ga('set', 'anonymizeIp', true);` +parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip) +before sending any events/pageviews. In use it looks like this: + +```js +ga('create', 'UA-XXXXX-X', 'auto'); +ga('set', 'anonymizeIp', true); +ga('send', 'pageview'); +``` + +### Track jQuery AJAX requests in Google Analytics + +An article by @JangoSteve explains how to [track jQuery AJAX requests in Google +Analytics](http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/). + +Add this to `plugins.js`: + +```js +/* + * Log all jQuery AJAX requests to Google Analytics + * See: http://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/ + */ +if (typeof ga !== "undefined" && ga !== null) { + $(document).ajaxSend(function(event, xhr, settings){ + ga('send', 'pageview', settings.url); + }); +} +``` + +### Track JavaScript errors in Google Analytics + +Add this function after `ga` is defined: + +```js +(function(window){ + var undefined, + link = function (href) { + var a = window.document.createElement('a'); + a.href = href; + return a; + }; + window.onerror = function (message, file, line, column) { + var host = link(file).hostname; + ga('send', { + 'hitType': 'event', + 'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', + 'eventAction': message, + 'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(), + 'nonInteraction': 1 + }); + }; +}(window)); +``` + +### Track page scroll + +Add this function after `ga` is defined: + +```js +$(function(){ + var isDuplicateScrollEvent, + scrollTimeStart = new Date, + $window = $(window), + $document = $(document), + scrollPercent; + + $window.scroll(function() { + scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height()); + if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% + isDuplicateScrollEvent = 1; + ga('send', 'event', 'scroll', + 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's' + ); + } + }); +}); +``` + +## Internet Explorer + +### Prompt users to switch to "Desktop Mode" in IE10 Metro + +IE10 does not support plugins, such as Flash, in Metro mode. If +your site requires plugins, you can let users know that via the +`x-ua-compatible` meta element, which will prompt them to switch +to Desktop Mode. + +```html + +``` + +Here's what it looks like alongside H5BP's default `x-ua-compatible` +values: + +```html + +``` + +You can find more information in [Microsoft's IEBlog post about prompting for +plugin use in IE10 Metro +Mode](http://blogs.msdn.com/b/ie/archive/2012/01/31/web-sites-and-a-plug-in-free-web.aspx). + +### IE Pinned Sites (IE9+) + +Enabling your application for pinning will allow IE9 users to add it to their +Windows Taskbar and Start Menu. This comes with a range of new tools that you +can easily configure with the elements below. See more [documentation on IE9 +Pinned Sites](https://msdn.microsoft.com/en-us/library/gg131029.aspx). + +### Name the Pinned Site for Windows + +Without this rule, Windows will use the page title as the name for your +application. + +```html + +``` + +### Give your Pinned Site a tooltip + +You know — a tooltip. A little textbox that appears when the user holds their +mouse over your Pinned Site's icon. + +```html + +``` + +### Set a default page for your Pinned Site + +If the site should go to a specific URL when it is pinned (such as the +homepage), enter it here. One idea is to send it to a special URL so you can +track the number of pinned users, like so: +`http://www.example.com/index.html?pinned=true` + +```html + +``` + +### Recolor IE's controls manually for a Pinned Site + +IE9+ will automatically use the overall color of your Pinned Site's favicon to +shade its browser buttons. UNLESS you give it another color here. Only use +named colors (`red`) or hex colors (`#ff0000`). + +```html + +``` + +### Manually set the window size of a Pinned Site + +If the site should open at a certain window size once pinned, you can specify +the dimensions here. It only supports static pixel dimensions. 800x600 +minimum. + +```html + +``` + +### Jump List "Tasks" for Pinned Sites + +Add Jump List Tasks that will appear when the Pinned Site's icon gets a +right-click. Each Task goes to the specified URL, and gets its own mini icon +(essentially a favicon, a 16x16 .ICO). You can add as many of these as you +need. + +```html + + +``` + +### (Windows 8) High quality visuals for Pinned Sites + +Windows 8 adds the ability for you to provide a PNG tile image and specify the +tile's background color. [Full details on the IE +blog](http://blogs.msdn.com/b/ie/archive/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8.aspx). + +* Create a 144x144 image of your site icon, filling all of the canvas, and + using a transparent background. +* Save this image as a 32-bit PNG and optimize it without reducing + colour-depth. It can be named whatever you want (e.g. `metro-tile.png`). +* To reference the tile and its color, add the HTML `meta` elements described + in the IE Blog post. + +### (Windows 8) Badges for Pinned Sites + +IE10 will poll an XML document for badge information to display on your app's +tile in the Start screen. The user will be able to receive these badge updates +even when your app isn't actively running. The badge's value can be a number, +or one of a predefined list of glyphs. + +* [Tutorial on IEBlog with link to badge XML schema](http://blogs.msdn.com/b/ie/archive/2012/04/03/pinned-sites-in-windows-8.aspx) +* [Available badge values](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx) + +```html + +``` + +### Disable link highlighting upon tap in IE10 + +Similar to [-webkit-tap-highlight-color](http://davidwalsh.name/mobile-highlight-color) +in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its +value is boolean rather than a color. It's all or nothing. + +```html + +``` + +You can read about this useful element and more techniques in +[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) + +## Search + +### Direct search spiders to your sitemap + +[Learn how to make a sitemap](http://www.sitemaps.org/protocol.html) + +```html + +``` + +### Hide pages from search engines + +According to Heather Champ, former community manager at Flickr, you should not +allow search engines to index your "Contact Us" or "Complaints" page if you +value your sanity. This is an HTML-centric way of achieving that. + +```html + +``` + +**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES. + +### Firefox and IE Search Plugins + +Sites with in-site search functionality should be strongly considered for a +browser search plugin. A "search plugin" is an XML file which defines how your +plugin behaves in the browser. [How to make a browser search +plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin). + +```html + +``` + + +## Miscellaneous + +* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills). + +* Use [Microformats](http://microformats.org/wiki/Main_Page) (via + [microdata](http://microformats.org/wiki/microdata)) for optimum search + results + [visibility](http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html). + +* If you're building a web app you may want [native style momentum scrolling in + iOS 5+](http://www.johanbrook.com/articles/native-style-momentum-scrolling-to-arrive-in-ios-5/) + using `-webkit-overflow-scrolling: touch`. + +* If you want to disable the translation prompt in Chrome or block Google + Translate from translating your web page, use [``](https://support.google.com/translate/?hl=en#2641276). + To disable translation for a particular section of the web page, add + [`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276). + +* If you want to disable the automatic detection and formatting of possible + phone numbers in Safari on iOS, use [``](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html/#//apple_ref/doc/uid/TP40008193-SW5). + +* Avoid development/stage websites "leaking" into SERPs (search engine results + page) by [implementing X-Robots-tag + headers](https://github.com/h5bp/html5-boilerplate/issues/804). + +* Screen readers currently have less-than-stellar support for HTML5 but the JS + script [accessifyhtml5.js](https://github.com/yatil/accessifyhtml5.js) can + help increase accessibility by adding ARIA roles to HTML5 elements. + + +## News Feeds + +### RSS + +Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from +scratch](http://www.rssboard.org/rss-specification)? + +```html + +``` + +### Atom + +Atom is similar to RSS, and you might prefer to use it instead of or in +addition to it. [See what Atom's all +about](http://www.atomenabled.org/developers/syndication/). + +```html + +``` + +### Pingbacks + +Your server may be notified when another site links to yours. The href +attribute should contain the location of your pingback service. + +```html + +``` + +* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks +* Step-by-step example case: http://www.hixie.ch/specs/pingback/pingback-1.0#TOC5 +* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/ + + + +## Social Networks + +### Facebook Open Graph data + +You can control the information that Facebook and others display when users +share your site. Below are just the most basic data points you might need. For +specific content types (including "website"), see [Facebook's built-in Open +Graph content +templates](https://developers.facebook.com/docs/opengraph/objects/builtin/). +Take full advantage of Facebook's support for complex data and activity by +following the [Open Graph +tutorial](https://developers.facebook.com/docs/opengraph/tutorial/). + +```html + + + +``` + +### Twitter Cards + +Twitter provides a snippet specification that serves a similar purpose to Open +Graph. In fact, Twitter will use Open Graph when Cards is not available. Note +that, as of this writing, Twitter requires that app developers activate Cards +on a per-domain basis. You can read more about the various snippet formats +and application process in the [official Twitter Cards +documentation](https://dev.twitter.com/docs/cards). + +```html + + + + + + + +``` + + +## URLs + +### Canonical URL + +Signal to search engines and others "Use this URL for this page!" Useful when +parameters after a `#` or `?` is used to control the display state of a page. +`http://www.example.com/cart.html?shopping-cart-open=true` can be indexed as +the cleaner, more accurate `http://www.example.com/cart.html`. + +```html + +``` + +### Official shortlink + +Signal to the world "This is the shortened URL to use this page!" Poorly +supported at this time. Learn more by reading the [article about shortlinks on +the Microformats wiki](http://microformats.org/wiki/rel-shortlink). + +```html + +``` + +### Separate mobile URLs + +If you use separate URLs for desktop and mobile users, you should consider +helping search engine algorithms better understand the configuration on your +web site. + +This can be done by adding the following annotations in your HTML pages: + +* on the desktop page, add the `link rel="alternate"` tag pointing to the + corresponding mobile URL, e.g.: + + `` + +* on the mobile page, add the `link rel="canonical"` tag pointing to the + corresponding desktop URL, e.g.: + + `` + +For more information please see: + +* https://developers.google.com/webmasters/smartphone-sites/details#separateurls +* https://developers.google.com/webmasters/smartphone-sites/feature-phones + + +## Web Apps + +There are a couple of meta tags that provide information about a web app when +added to the Home Screen on iOS: + +* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and +provide the default iOS app view. You can control the color scheme of the +default view by adding `apple-mobile-web-app-status-bar-style`. + + ```html + + +``` + +* You can use `apple-mobile-web-app-title` to add a specific sites name for the +Home Screen icon. This works since iOS 6. + + ```html + +``` + +For further information please read the [official +documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) +on Apple's site. + + +### Apple Touch Icons + +The Apple touch icons can be seen as the favicons of iOS devices. + +The main sizes of the Apple touch icons are: + +* `57×57px` – iPhone with @1x display and iPod Touch +* `72×72px` – iPad and iPad mini with @1x display running iOS ≤ 6 +* `76×76px` – iPad and iPad mini with @1x display running iOS ≥ 7 +* `114×114px` – iPhone with @2x display running iOS ≤ 6 +* `120×120px` – iPhone with @2x and @3x display running iOS ≥ 7 +* `144×144px` – iPad and iPad mini with @2x display running iOS ≤ 6 +* `152×152px` – iPad and iPad mini with @2x display running iOS 7 +* `180×180px` – iPad and iPad mini with @2x display running iOS 8 + +Displays meaning: + +* @1x - non-Retina +* @2x - Retina +* @3x - Retina HD + +More information about the displays of iOS devices can be found +[here](https://en.wikipedia.org/wiki/List_of_iOS_devices#Display). + +In most cases, one `180×180px` touch icon named `apple-touch-icon.png` +and including: + +```html + +``` + +in the `` of the page is enough. If you use art-direction and/or +want to have different content for each device, you can add more touch +icons as written above. + +For a more comprehensive overview, please refer to Mathias' [article on Touch +Icons](https://mathiasbynens.be/notes/touch-icons). + + +### Apple Touch Startup Image + +Apart from that it is possible to add start-up screens for web apps on iOS. This +basically works by defining `apple-touch-startup-image` with an according link +to the image. Since iOS devices have different screen resolutions it is +necessary to add media queries to detect which image to load. Here is an +example for a retina iPhone: + +```html + +``` + +However, it is possible to detect which start-up image to use with JavaScript. +The Mobile Boilerplate provides a useful function for this. Please see +[helpers.js](https://github.com/h5bp/mobile-boilerplate/blob/v4.1.0/js/helper.js#L336-L383) +for the implementation. + + +### Chrome Mobile web apps + +Chrome Mobile has a specific meta tag for making apps [installable to the +homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen) +which tries to be a more generic replacement to Apple's proprietary meta tag: + +```html + +``` + +Same applies to the touch icons: + +```html + +``` + +### Theme Color + +You can add the [`theme-color` meta extension](https://github.com/whatwg/meta-theme-color) +in the `` of your pages to suggest the color that browsers and +OSes should use if they customize the display of individual pages in +their UIs with varying colors. + +```html + +``` + +The `content` attribute extension can take any valid CSS color. + +Currently, the `theme-color` meta extension is supported by [Chrome 39+ +for Android Lollipop](http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android) +and [Firefox OS 2.1+](https://twitter.com/ahmednefzaoui/status/492344698493997057). diff --git a/doc/faq.md b/doc/faq.md new file mode 100644 index 0000000..4a93ca5 --- /dev/null +++ b/doc/faq.md @@ -0,0 +1,46 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Frequently asked questions + +* [Why is the Google Analytics code at the bottom? Google recommends it be + placed in the ``.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head) +* [How can I integrate Bootstrap with HTML5 + Boilerplate?](#how-can-i-integrate-bootstrap-with-html5-boilerplate) +* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is + released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released) +* [Where can I get help with support + questions?](#where-can-i-get-help-with-support-questions) + +-- + + +### Why is the Google Analytics code at the bottom? Google recommends it be placed in the ``. + +The main advantage of placing it in the `` is that you will track the +user's `pageview` even if they leave the page before it has been fully loaded. +However, having the code at the bottom of the page [helps improve +performance](https://stevesouders.com/efws/inline-scripts-bottom.php). + + +### How can I integrate [Bootstrap](http://getbootstrap.com/) with HTML5 Boilerplate? + +One simple way is to use [Initializr](http://www.initializr.com/) and create a +custom build that includes both HTML5 Boilerplate and +[Bootstrap](http://getbootstrap.com/). + +Read more about how [HTML5 Boilerplate and Bootstrap complement each +other](https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa/answer/Nicolas-Gallagher). + + +### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released? + +No, same as you don't normally replace the foundation of a house once it +was built. However, there is nothing stopping you from trying to work in the +latest changes, but you'll have to assess the costs/benefits of doing so. + + +### Where can I get help with support questions? + +Please ask for help on +[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate). diff --git a/doc/html.md b/doc/html.md new file mode 100644 index 0000000..65a4a20 --- /dev/null +++ b/doc/html.md @@ -0,0 +1,227 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# The HTML + +By default, HTML5 Boilerplate provides two `html` pages: + +* [`index.html`](#indexhtml) - a default HTML skeleton that should form the + basis of all pages on your website +* [`404.html`](#404html) - a placeholder 404 error page + + +## `index.html` + + +### The `no-js` class + +The `no-js` class is provided in order to allow you to more easily and +explicitly add custom styles based on whether JavaScript is disabled +(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the +FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/). + + +## Language attribute + +Please consider specifying the language of your content by adding the `lang` +attribute to `` as in this example: + +```html + +``` + +### The order of the `` and `<meta>` tags + +The order in which the `<title>` and the `<meta>` tags are specified is +important because: + +1) the charset declaration (`<meta charset="utf-8">`): + + * must be included completely within the [first 1024 bytes of the + document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset) + + * should be specified as early as possible (before any content that could + be controlled by an attacker, such as a `<title>` element) in order to + avoid a potential [encoding-related security + issue](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7) in + Internet Explorer + +2) the meta tag for compatibility mode + (`<meta http-equiv="x-ua-compatible" content="ie=edge">`): + + * [needs to be included before all other tags except for the `<title>` and + the other `<meta>` + tags](https://msdn.microsoft.com/en-us/library/cc288325.aspx) + + +### `x-ua-compatible` + +Internet Explorer 8/9/10 support [document compatibility +modes](https://msdn.microsoft.com/en-us/library/cc288325.aspx) that affect the +way webpages are interpreted and displayed. Because of this, even if your site's +visitor is using, let's say, Internet Explorer 9, it's possible that IE will not +use the latest rendering engine, and instead, decide to render your page using +the Internet Explorer 5.5 rendering engine. + +Specifying the `x-ua-compatible` meta tag: + +```html +<meta http-equiv="x-ua-compatible" content="ie=edge"> +``` + +or sending the page with the following HTTP response header + +``` +X-UA-Compatible: IE=edge +``` + +will force Internet Explorer 8/9/10 to render the webpage in the highest +available mode in [the various cases when it may +not](https://hsivonen.fi/doctype/#ie8), and therefore, ensure that anyone +browsing your site is treated to the best possible user experience that +browser can offer. + +If possible, we recommend that you remove the `meta` tag and send only the +HTTP response header as the `meta` tag will not always work if your site is +served on a non-standard port, as Internet Explorer's preference option +`Display intranet sites in Compatibility View` is checked by default. + +If you are using Apache as your webserver, including the +[`.htaccess`](https://github.com/h5bp/server-configs-apache) file takes care of +the HTTP header. If you are using a different server, check out our [other +server config](https://github.com/h5bp/server-configs). + +Starting with Internet Explorer 11, [document modes are +deprecated](https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode). +If your business still relies on older web apps and services that were +designed for older versions of Internet Explorer, you might want to consider +enabling [Enterprise Mode](http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx) throughout your company. + + +## Mobile viewport + +There are a few different options that you can use with the [`viewport` meta +tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and +Media Queries - The Complete Idiot's Guide"). You can find out more in [the +Apple developer docs](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html). +HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases. + +```html +<meta name="viewport" content="width=device-width, initial-scale=1"> +``` + +## Favicons and Touch Icon + +The shortcut icons should be put in the root directory of your site. HTML5 +Boilerplate comes with a default set of icons (include favicon and one Apple +Touch Icon) that you can use as a baseline to create your own. + +Please refer to the more detailed description in the [Extend section](extend.md) +of these docs. + +## Modernizr + +HTML5 Boilerplate uses a custom build of Modernizr. + +[Modernizr](http://modernizr.com) is a JavaScript library which adds classes to +the `html` element based on the results of feature test and which ensures that +all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). +This allows you to target parts of your CSS and JavaScript based on the +features supported by a browser. + +In general, in order to keep page load times to a minimum, it's best to call +any JavaScript at the end of the page because if a script is slow to load +from an external server it may cause the whole page to hang. That said, the +Modernizr script *needs* to run *before* the browser begins rendering the page, +so that browsers lacking support for some of the new HTML5 elements are able to +handle them properly. Therefore the Modernizr script is the only JavaScript +file synchronously loaded at the top of the document. + +## What about polyfills? + +If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill) +in your project, you must make sure those load before any other JavaScript. If you're +using some polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/), +just put it before the other scripts in the bottom of the page: + +```html + <script src="https://cdn.polyfill.io/v1/polyfill.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> + <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script> + <script src="js/plugins.js"></script> + <script src="js/main.js"></script> +</body> +``` + +If you like to just include the polyfills yourself, you could include them in +`js/plugins.js`. When you have a bunch of polyfills to load in, you could +also create a `polyfills.js` file in the `js/vendor` directory. Also using +this technique, make sure the polyfills are all loaded before any other +Javascript. + +There are some misconceptions about Modernizr and polyfills. It's important +to understand that Modernizr just handles feature checking, not polyfilling +itself. The only thing Modernizr does regarding polyfills is that the team +maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). + +## The content area + +The central part of the boilerplate template is pretty much empty. This is +intentional, in order to make the boilerplate suitable for both web page and +web app development. + +### Browser Upgrade Prompt + +The main content area of the boilerplate includes a prompt to install an up to +date browser for users of IE 6/7. If you intended to support IE 6/7, then you +should remove the snippet of code. + +### jQuery CDN for jQuery + +The jQuery CDN version of the jQuery JavaScript library is referenced towards +the bottom of the page. A local fallback of jQuery is included for rare instances +when the CDN version might not be available, and to facilitate offline +development. + +The jQuery CDN version was chosen over other potential candidates +([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/)) +because it's fast ([comparable or faster than Google by some +measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90)) +and, (unlike Google's CDN) is available to China's hundreds of millions of internet users. +For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191) +the Google Hosted version over the jQuery CDN because it was available +over HTTPS (the jQuery CDN was not,) and it offered a better chance of +hitting the cache lottery owing to the popularity of the Google CDN. +The first issue is no longer valid and the second is far outweighed by +being able to serve jQuery to Chinese users. + +While the jQuery CDN is a strong default solution your site or application may +require a different configuration. Testing your site with services like +[WebPageTest](https://www.webpagetest.org/) and browser tools like +[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) or +[YSlow](https://developer.yahoo.com/yslow/) will help you examine the real +world performance of your site and can show where you can optimize your specific +site or application. + +### Google Universal Analytics Tracking Code + +Finally, an optimized version of the Google Universal Analytics tracking code is +included. Google recommends that this script be placed at the top of the page. +Factors to consider: if you place this script at the top of the page, you’ll +be able to count users who don’t fully load the page, and you’ll incur the max +number of simultaneous connections of the browser. + +Further information: + +* [Optimizing the Google Universal Analytics + Snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics) +* [Introduction to + Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/) +* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/) + +**N.B.** The Google Universal Analytics snippet is included by default mainly +because Google Analytics is [currently one of the most popular tracking +solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there. +However, its usage isn't set in stone, and you SHOULD consider exploring the +[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software) +and use whatever suits your needs best! diff --git a/doc/js.md b/doc/js.md new file mode 100644 index 0000000..1c30b55 --- /dev/null +++ b/doc/js.md @@ -0,0 +1,37 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# The JavaScript + +Information about the default JavaScript included in the project. + +## main.js + +This file can be used to contain or reference your site/app JavaScript code. +For larger projects, you can make use of a JavaScript module loader, like +[Require.js](http://requirejs.org/), to load any other scripts you need to +run. + +## plugins.js + +This file can be used to contain all your plugins, such as jQuery plugins and +other 3rd party scripts. + +One approach is to put jQuery plugins inside of a `(function($){ ... +})(jQuery);` closure to make sure they're in the jQuery namespace safety +blanket. Read more about [jQuery plugin +authoring](https://learn.jquery.com/plugins/#Getting_Started). + +By default the `plugins.js` file contains a small script to avoid `console` +errors in browsers that lack a `console`. The script will make sure that, if +a console method isn't available, that method will have the value of empty +function, thus, preventing the browser from throwing an error. + + +## vendor + +This directory can be used to contain all 3rd party library code. + +Minified versions of the latest jQuery and Modernizr libraries are included by +default. You may wish to create your own [custom Modernizr +build](http://www.modernizr.com/download/). diff --git a/doc/misc.md b/doc/misc.md new file mode 100644 index 0000000..cf5409a --- /dev/null +++ b/doc/misc.md @@ -0,0 +1,178 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Miscellaneous + +* [.gitignore](#gitignore) +* [.editorconfig](#editorconfig) +* [Server Configuration](#server-configuration) +* [crossdomain.xml](#crossdomainxml) +* [robots.txt](#robotstxt) +* [browserconfig.xml](#browserconfigxml) + +-- + +## .gitignore + +HTML5 Boilerplate includes a basic project-level `.gitignore`. This should +primarily be used to avoid certain project-level files and directories from +being kept under source control. Different development-environments will +benefit from different collections of ignores. + +OS-specific and editor-specific files should be ignored using a "global +ignore" that applies to all repositories on your system. + +For example, add the following to your `~/.gitconfig`, where the `.gitignore` +in your HOME directory contains the files and directories you'd like to +globally ignore: + +```gitignore +[core] + excludesfile = ~/.gitignore +``` + +* More on global ignores: https://help.github.com/articles/ignoring-files +* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore + + +## .editorconfig + +The `.editorconfig` file is provided in order to encourage and help you and +your team define and maintain consistent coding styles between different +editors and IDEs. + +By default, `.editorconfig` includes some basic +[properties](http://editorconfig.org/#supported-properties) that reflect the +coding styles from the files provided by default, but you can easily change +them to better suit your needs. + +In order for your editor/IDE to apply the +[properties](http://editorconfig.org/#supported-properties) from the +`.editorconfig` file, you will need to [install a +plugin]( http://editorconfig.org/#download). + +__N.B.__ If you aren't using the server configurations provided by HTML5 +Boilerplate, we highly encourage you to configure your server to block +access to `.editorconfig` files, as they can disclose sensitive information! + +For more details, please refer to the [EditorConfig +project](http://editorconfig.org/). + + +## Server Configuration + +H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP +server](https://httpd.apache.org/docs/). If you are not using Apache +as your web server, then you are encouraged to download a +[server configuration](https://github.com/h5bp/server-configs) that +corresponds to your web server and environment. + +A `.htaccess` (hypertext access) file is a [Apache HTTP server +configuration file](https://github.com/h5bp/server-configs-apache). +The `.htaccess` file is mostly used for: + +* Rewriting URLs +* Controlling cache +* Authentication +* Server-side includes +* Redirects +* Gzipping + +If you have access to the main server configuration file (usually called +`httpd.conf`), you should add the logic from the `.htaccess` file in, for +example, a <Directory> section in the main configuration file. This is usually +the recommended way, as using .htaccess files slows down Apache! + +To enable Apache modules locally, please see: +https://github.com/h5bp/server-configs-apache/wiki/How-to-enable-Apache-modules. + +In the repo the `.htaccess` is used for: + +* Allowing cross-origin access to web fonts +* CORS header for images when browsers request it +* Enable `404.html` as 404 error document +* Making the website experience better for IE users better +* Media UTF-8 as character encoding for `text/html` and `text/plain` +* Enabling the rewrite URLs engine +* Forcing or removing the `www.` at the begin of a URL +* It blocks access to directories without a default document +* It blocks access to files that can expose sensitive information. +* It reduces MIME type security risks +* It forces compressing (gzipping) +* It tells the browser whether they should request a specific file from the + server or whether they should grab it from the browser's cache + +When using `.htaccess` we recommend reading all inline comments (the rules after +a `#`) in the file once. There is a bunch of optional stuff in it. + +If you want to know more about the `.htaccess` file check out the +[Apache HTTP server docs](https://httpd.apache.org/docs/) or more +specifically the [htaccess +section](https://httpd.apache.org/docs/current/howto/htaccess.html). + +Notice that the original repo for the `.htaccess` file is [this +one](https://github.com/h5bp/server-configs-apache). + + +## crossdomain.xml + +The _cross-domain policy file_ is an XML document that gives a web client — +such as Adobe Flash Player, Adobe Reader, etc. — permission to handle data +across multiple domains, by: + + * granting read access to data + * permitting the client to include custom headers in cross-domain requests + * granting permissions for socket-based connections + +__e.g.__ If 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 in order to grant access +to the source domain and allow the client to continue with the transaction. + +For more in-depth information, please see Adobe's [cross-domain policy file +specification](https://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html). + + +## robots.txt + +The `robots.txt` file is used to give instructions to web robots on what can +be crawled from the website. + +By default, the file provided by this project includes the next two lines: + + * `User-agent: *` - the following rules apply to all web robots + * `Disallow:` - everything on the website is allowed to be crawled + +If you want to disallow certain pages you will need to specify the path in a +`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow +crawling of all content, use `Disallow: /`. + +The `/robots.txt` file is not intended for access control, so don't try to +use it as such. Think of it as a "No Entry" sign, rather than a locked door. +URLs disallowed by the `robots.txt` file might still be indexed without being +crawled, and the content from within the `robots.txt` file can be viewed by +anyone, potentially disclosing the location of your private content! So, if +you want to block access to private content, use proper authentication instead. + +For more information about `robots.txt`, please see: + + * [robotstxt.org](http://www.robotstxt.org/) + * [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt) + + +## browserconfig.xml + +The `browserconfig.xml` file is used to customize the tile displayed when users +pin your site to the Windows 8.1 start screen. In there you can define custom +tile colors, custom images or even [live tiles](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx#CreatingLiveTiles). + +By default, the file points to 2 placeholder tile images: + +* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles. + This image resizes automatically when necessary. +* `tile-wide.png` (558x270px): user for `Wide` tiles. + +Notice that IE11 uses the same images when adding a site to the `favorites`. + +For more in-depth information about the `browserconfig.xml` file, please +see [MSDN](https://msdn.microsoft.com/en-us/library/ie/dn320426.aspx). diff --git a/doc/usage.md b/doc/usage.md new file mode 100644 index 0000000..b8fc360 --- /dev/null +++ b/doc/usage.md @@ -0,0 +1,130 @@ +[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation +table of contents](TOC.md) + +# Usage + +Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app +usually involves the following: + +1. Set up the basic structure of the site. +2. Add some content, style, and functionality. +3. Run your site locally to see how it looks. +4. (Optionally run a build script to automate the optimization of your site - + e.g. [ant build script](https://github.com/h5bp/ant-build-script)) +5. Deploy your site. + + +## Basic structure + +A basic HTML5 Boilerplate site initially looks something like this: + +``` +. +├── css +│ ├── main.css +│ └── normalize.css +├── doc +├── img +├── js +│ ├── main.js +│ ├── plugins.js +│ └── vendor +│ ├── jquery.min.js +│ └── modernizr.min.js +├── .editorconfig +├── .htaccess +├── 404.html +├── apple-touch-icon.png +├── browserconfig.xml +├── index.html +├── humans.txt +├── robots.txt +├── crossdomain.xml +├── favicon.ico +├── tile-wide.png +└── tile.png +``` + +What follows is a general overview of each major part and how to use them. + +### css + +This directory should contain all your project's CSS files. It includes some +initial CSS to help get you started from a solid foundation. [About the +CSS](css.md). + +### doc + +This directory contains all the HTML5 Boilerplate documentation. You can use it +as the location and basis for your own project's documentation. + +### js + +This directory should contain all your project's JS files. Libraries, plugins, +and custom code can all be included here. It includes some initial JS to help +get you started. [About the JavaScript](js.md). + +### .htaccess + +The default web server configs are for Apache. For more information, please +refer to the [Apache Server Configs +repository](https://github.com/h5bp/server-configs-apache). + +Host your site on a server other than Apache? You're likely to find the +corresponding server configs project listed in our [Server Configs +](https://github.com/h5bp/server-configs/blob/master/README.md) repository. + +### 404.html + +A helpful custom 404 to get you started. + +### browserconfig.xml + +This file contains all settings regarding custom tiles for IE11. + +For more info on this topic, please refer to +[MSDN](https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx). + +### .editorconfig + +The `.editorconfig` file is provided in order to encourage and help you and +your team to maintain consistent coding styles between different +editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig). + +### index.html + +This is the default HTML skeleton that should form the basis of all pages on +your site. If you are using a server-side templating framework, then you will +need to integrate this starting HTML with your setup. + +Make sure that you update the URLs for the referenced CSS and JavaScript if you +modify the directory structure at all. + +If you are using Google Universal Analytics, make sure that you edit the +corresponding snippet at the bottom to include your analytics ID. + +### humans.txt + +Edit this file to include the team that worked on your site/app, and the +technology powering it. + +### robots.txt + +Edit this file to include any pages you need hidden from search engines. + +### crossdomain.xml + +A template for working with cross-domain requests. [About +crossdomain.xml](misc.md#crossdomainxml). + +### Icons + +Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple +Touch Icon with your own. + +If you want to use different Apple Touch Icons for different resolutions please +refer to the [according documentation](extend.md#apple-touch-icons). + +You might want to check out Hans' handy [HTML5 Boilerplate Favicon and Apple +Touch Icon +PSD-Template](https://drublic.de/blog/html5-boilerplate-favicons-psd-template/). diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..be74abd Binary files /dev/null and b/favicon.ico differ diff --git a/humans.txt b/humans.txt new file mode 100644 index 0000000..8d2330f --- /dev/null +++ b/humans.txt @@ -0,0 +1,15 @@ +# humanstxt.org/ +# The humans responsible & technology colophon + +# TEAM + + <name> -- <role> -- <twitter> + +# THANKS + + <name> + +# TECHNOLOGY COLOPHON + + CSS3, HTML5 + Apache Server Configs, jQuery, Modernizr, Normalize.css diff --git a/img/.gitignore b/img/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..e401252 --- /dev/null +++ b/index.html @@ -0,0 +1,132 @@ +<!doctype html> +<html class="no-js" lang=""> + <head> + <meta charset="utf-8"> + <meta http-equiv="x-ua-compatible" content="ie=edge"> + <title>Workout Book + + + + + + + + + + + + + + + + + +
+
+
+

Workout Book

+

Fitness Tracking App

+
+
+ +
+
+ +
+
+
+

"I don't really need all those complex fitness-tracking apps out there. What I do need tho is is easily track my workouts"

+
+
+ + +
+
+
+ +
+
+
+

Home

+

Check your status and previous workout stats at a glance. No additional taps, right from the home screen.

+
+ +
+
+ +
+
+
+

Setting Up a Workout

+

Once you've checked your previous workout sets and weight easily start a new workout.

+
+ +
+
+ +
+
+
+

Exercise Screen

+

Right after set is done you have a few minutes to rest. Track Your set in the app with just a few taps.

+
+ +
+
+ +
+
+
+

Workout Plans

+

Choose workout plan or create your own and set it as you like. Name it, choose week day for specific workout, manage exercises, sets and weights.

+
+ + +
+
+ +
+
+
+

Workouts History

+

All your workouts gathered in one place. Each workout has its own color tag, so it's really easy to look over them.

+
+ +
+
+ +