Skip to content
This repository has been archived by the owner on Feb 11, 2019. It is now read-only.

Commit

Permalink
Merge branch 'master' of https://github.com/h5bp/html5-boilerplate in…
Browse files Browse the repository at this point in the history
…to v1.6-dev

* 'master' of https://github.com/h5bp/html5-boilerplate: (34 commits)
  Update content from the `dist` directory [skip ci]
  Update `jQuery` to `v1.12.2`
  Remove SSH set up related code
  Update content from the `dist` directory [skip ci]
  Docs: Remove `Mobile Boilerplate` recommendation
  Update `babel-preset-es2015` to `v6.6.0`
  Update `glob` to `v7.0.3`
  Update `babel-core` to `v6.7.2`
  Update content from the `dist` directory [skip ci]
  Update jQuery to `v1.12.1`
  Simplify analytics snippet using `async` & `defer`
  Doc: Make minor improvements
  Use `https://` where possible
  Update content from the `dist` directory [skip ci]
  Docs: Improve social networks & SEO metadata info
  Update tests to include Node v5
  Update content from the `dist` directory [skip ci]
  Further losslessly optimize `apple-touch-icon.png`
  Update `travis-scripts` to `v2.0.0`
  Update `gulp` to `v3.9.1`
  ...
  • Loading branch information
zackphilipps committed Jun 20, 2016
2 parents 39a6dfb + b5d6e7b commit a03f02d
Show file tree
Hide file tree
Showing 11 changed files with 135 additions and 74 deletions.
27 changes: 27 additions & 0 deletions .gitattributes
@@ -1 +1,28 @@
# Automatically normalize line endings for all text-based files
# https://git-scm.com/docs/gitattributes#_end_of_line_conversion

* text=auto

# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

# For the following file types, normalize line endings to LF on
# checkin and prevent conversion to CRLF when they are checked out
# (this is required in order to prevent newline related issues like,
# for example, after the build script is run)

.* text eol=lf
*.css text eol=lf
*.html text eol=lf
*.js text eol=lf
*.json text eol=lf
*.md text eol=lf
*.sh text eol=lf
*.txt text eol=lf
*.xml text eol=lf

# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

# Exclude the `.htaccess` file from GitHub's language statistics
# https://github.com/github/linguist#using-gitattributes

dist/.htaccess linguist-vendored
6 changes: 0 additions & 6 deletions _assets/js/vendor/jquery-1.11.3.min.js

This file was deleted.

5 changes: 5 additions & 0 deletions _assets/js/vendor/jquery-1.12.2.min.js

Large diffs are not rendered by default.

5 changes: 1 addition & 4 deletions _doc/css.md
Expand Up @@ -14,7 +14,7 @@ HTML5 Boilerplate's CSS includes:
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
or [Modernizr](https://modernizr.com/), and it is ready to use no matter what
your development preferences happen to be.


Expand Down Expand Up @@ -118,9 +118,6 @@ 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

Expand Down
55 changes: 47 additions & 8 deletions _doc/extend.md
Expand Up @@ -121,7 +121,7 @@ Microsoft Ajax Content Delivery Network:

* 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
* https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/
* http://dayofjs.com/videos/22158462/web-browsers_alex-russel


Expand Down Expand Up @@ -248,7 +248,7 @@ values:

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).
Mode](https://blogs.msdn.microsoft.com/ie/2012/01/31/web-sites-and-a-plug-in-free-web/).

### IE Pinned Sites (IE9+)

Expand Down Expand Up @@ -322,7 +322,7 @@ need.

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).
blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/).

* Create a 144x144 image of your site icon, filling all of the canvas, and
using a transparent background.
Expand All @@ -338,7 +338,7 @@ 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)
* [Tutorial on IEBlog with link to badge XML schema](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/)
* [Available badge values](https://msdn.microsoft.com/en-us/library/ie/br212849.aspx)

```html
Expand All @@ -347,7 +347,7 @@ or one of a predefined list of glyphs.

### Disable link highlighting upon tap in IE10

Similar to [-webkit-tap-highlight-color](http://davidwalsh.name/mobile-highlight-color)
Similar to [-webkit-tap-highlight-color](https://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.

Expand Down Expand Up @@ -473,10 +473,21 @@ 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/).

For a reference of Open Graph's markup and properties, you may check
[Facebook's Open Graph Protocol reference](http://ogp.me/). Finally,
you can validate your markup with the [Facebook Object
Debugger](https://developers.facebook.com/tools/debug/) (needs
registration to Facebook).

```html
<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="http://www.example.com/path/to/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="">
<meta property="og:image" content="http://www.example.com/path/to/image.jpg">
<meta property="og:description" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="article:author" content="">
```

### Twitter Cards
Expand All @@ -486,7 +497,9 @@ 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).
documentation](https://dev.twitter.com/docs/cards), and you can validate
your markup with the [Card validator](https://cards-dev.twitter.com/validator)
(needs registration to Twitter).

```html
<meta name="twitter:card" content="summary">
Expand All @@ -498,6 +511,32 @@ documentation](https://dev.twitter.com/docs/cards).
<meta name="twitter:image" content="http://www.example.com/path/to/image.jpg">
```

### Google+ / Schema.org

Google also provides a snippet specification that serves a similar
purpose to Facebook's Open Graph or Twitter Cards. While it helps you
to control information displayed on Google+, this metadata is a subset
of [schema.org's microdata vocabulary](https://schema.org/), which
covers many other schemas that can describe the content of your pages
to search engines. For this reason, this metadata is more generic for
SEO, notably for Google's search-engine, although this vocabulary is
also used by Microsoft, Pinterest or Yandex.

You can validate your markup with the [Structured Data Testing
Tool](https://developers.google.com/structured-data/testing-tool/).
Also, please note that this markup requires to add attributes to your
top `html` tag.

```html
<html class="no-js" lang="" itemscope itemtype="http://schema.org/Article">
<head>

<link rel="author" href="">
<link rel="publisher" href="">
<meta itemprop="name" content="">
<meta itemprop="description" content="">
<meta itemprop="image" content="">
```

## URLs

Expand Down Expand Up @@ -659,5 +698,5 @@ their UIs with varying colors.
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)
for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)
and [Firefox OS 2.1+](https://twitter.com/ahmednefzaoui/status/492344698493997057).
20 changes: 2 additions & 18 deletions _doc/faq.md
Expand Up @@ -3,8 +3,6 @@ table of contents](TOC.md)

# Frequently asked questions

* [Why don't you automatically load the latest version of jQuery from the Google
CDN?](#why-dont-you-automatically-load-the-latest-version-of-jquery-from-the-google-cdn)
* [Why is the Google Analytics code at the bottom? Google recommends it be
placed in the `<head>`.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head)
* [How can I integrate Bootstrap with HTML5
Expand All @@ -16,20 +14,6 @@ table of contents](TOC.md)

--

### Why don't you automatically load the latest version of jQuery from the Google CDN?

The [file](https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js) to which
the Google [CDN](https://en.wikipedia.org/wiki/Content_delivery_network) points
to is [no longer updated and will stay locked at version `1.11.1` in order to
prevent inadvertent web
breakage](http://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/).

In general, version updating should be an intentional decision! You shouldn't
include a URL that will always point to the latest version, as that version:

* may not be compatible with the existing plugins/code on the site
* will have a very short cache time compare to the specific version,
which means that users won't get the benefits of long-term caching

### Why is the Google Analytics code at the bottom? Google recommends it be placed in the `<head>`.

Expand All @@ -39,11 +23,11 @@ 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?
### How can I integrate [Bootstrap](https://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/).
[Bootstrap](https://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).
Expand Down
53 changes: 34 additions & 19 deletions _doc/html.md
Expand Up @@ -13,15 +13,15 @@ By default, HTML5 Boilerplate provides two `html` pages:
## `index.html`


### The `no-js` class
### 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
## Language Attribute

Please consider specifying the language of your content by adding the `lang`
attribute to `<html>` as in this example:
Expand Down Expand Up @@ -95,10 +95,21 @@ 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.
enabling [Enterprise Mode](https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/) throughout your company.


## Mobile viewport
## Meta Description

The `description` meta tag provides a short description of the page.
In some situations this description is used as a part of the snippet
shown in the search results.

```html
<meta name="description" content="This is a description">
```


## 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
Expand All @@ -123,7 +134,7 @@ of these docs.

HTML5 Boilerplate uses a custom build of Modernizr.

[Modernizr](http://modernizr.com) is a JavaScript library which adds classes to
[Modernizr](https://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
Expand All @@ -137,7 +148,7 @@ 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?
## 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
Expand All @@ -164,7 +175,7 @@ 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 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
Expand All @@ -176,29 +187,33 @@ 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.

### Google CDN for jQuery
### jQuery CDN for jQuery

The Google CDN version of the jQuery JavaScript library is referenced towards
the bottom of the page using a protocol-independent path (read more about this
in the [FAQ](faq.md)). A local fallback of jQuery is included for rare instances
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 Google CDN version is chosen over other [potential candidates (like the
jQuery CDN](https://jquery.com/download/#using-jquery-with-a-cdn)) because
it's fast in absolute terms and it has the best overall
[penetration](http://httparchive.org/trends.php#perGlibs) which increases the
odds of having a copy of the library in your user's browser cache.

While the Google CDN is a strong default solution your site or application may
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
Expand Down
2 changes: 1 addition & 1 deletion _doc/js.md
Expand Up @@ -34,4 +34,4 @@ 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/).
build](https://www.modernizr.com/download/).
21 changes: 12 additions & 9 deletions _doc/misc.md
Expand Up @@ -61,13 +61,14 @@ project](http://editorconfig.org/).

## Server Configuration

H5BP includes a [`.htaccess`](#htaccess) file for the Apache HTTP server. 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).
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 an [Apache HTTP server
configuration file](https://github.com/h5bp/server-configs-apache).
The `.htaccess` file is mostly used for:

* Rewriting URLs
Expand Down Expand Up @@ -104,8 +105,10 @@ In the repo the `.htaccess` is used for:
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
https://httpd.apache.org/docs/current/howto/htaccess.html.
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).
Expand Down
Binary file modified _root/apple-touch-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 6 additions & 9 deletions index.html
Expand Up @@ -24,21 +24,18 @@
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.2.min.js"><\/script>')</script>
<!-- FOR DEVELOPMENT -->
<script src="js/concat/main.js"></script>
<!-- FOR PRODUCTION -->
<!-- <script src="js/compiled/main.min.js"></script> -->

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>

0 comments on commit a03f02d

Please sign in to comment.