Merge pull request #2141 from h5bp/coliff-patch-1

Add docs update PRs to CHANGELOG

CHANGELOG.md

@@ -1,4 +1,24 @@
-### 7.0.0 (February 8, 2018)
+### 7.2.0 (June 4, 2019)
+
+* Remove `defer` from Google Analytics snippet ([#2132](https://github.com/h5bp/html5-boilerplate/pull/2132))
+* Update jQuery to v3.4.1 ([#2126](https://github.com/h5bp/html5-boilerplate/pull/2126))
+* Update Apache Server Configs to 3.2.1 ([#2128](https://github.com/h5bp/html5-boilerplate/pull/2128))
+* Update main.css to v2.0.0 ([#2135](https://github.com/h5bp/html5-boilerplate/pull/2135))
+* Docs updates ([#2122](https://github.com/h5bp/html5-boilerplate/pull/2122)), ([#2125](https://github.com/h5bp/html5-boilerplate/pull/2125)), ([#2134](https://github.com/h5bp/html5-boilerplate/pull/2134)), ([#2137](https://github.com/h5bp/html5-boilerplate/pull/2137)), ([#2138](https://github.com/h5bp/html5-boilerplate/pull/2138))
+
+### 7.1.0 (March 18, 2019)
+
+* Update Modernizr to 3.7.1 ([#2121](https://github.com/h5bp/html5-boilerplate/pull/2121))
+* Update Analytics docs and snippet ([#2118](https://github.com/h5bp/html5-boilerplate/pull/2118))
+* Minor docs updates ([#2115](https://github.com/h5bp/html5-boilerplate/pull/2115))
+* Minor devdeps updates ([#2114](https://github.com/h5bp/html5-boilerplate/pull/2114))
+* More succinct way of writing the IE conditional statement ([#2113](https://github.com/h5bp/html5-boilerplate/pull/2113))
+
+### 7.0.1 (February 11, 2019)
+
+* Bumps main.css to current version ([#2112](https://github.com/h5bp/html5-boilerplate/pull/2112))
+
+### 7.0.0 (February 8, 2019)
 
 * Drop support for IE9/IE10 (usage of these versions is tiny and Microsoft officially ended support back in 2016. ([#2074](https://github.com/h5bp/html5-boilerplate/pull/2074))
 * Move the CSS to a separate repo ([#2066](https://github.com/h5bp/html5-boilerplate/pull/2066))

README.md

@@ -1,7 +1,10 @@
 # [HTML5 Boilerplate](https://html5boilerplate.com/)
 
+[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/h5bp/html5-boilerplate/blob/master/LICENSE.txt)
 [![Build Status](https://travis-ci.org/h5bp/html5-boilerplate.svg)](https://travis-ci.org/h5bp/html5-boilerplate)
 [![devDependency Status](https://david-dm.org/h5bp/html5-boilerplate/dev-status.svg)](https://david-dm.org/h5bp/html5-boilerplate#info=devDependencies)
+[![NPM Downloads](https://img.shields.io/npm/dt/html5-boilerplate.svg)](https://www.npmjs.com/package/html5-boilerplate)
+[![github-stars-image](https://img.shields.io/github/stars/h5bp/html5-boilerplate.svg?label=github%20stars)](https://github.com/h5bp/html5-boilerplate)
 
 HTML5 Boilerplate is a professional front-end template for building
 fast, robust, and adaptable web apps or sites.

dist/.htaccess

@@ -1,4 +1,4 @@
-# Apache Server Configs v3.1.0 | MIT License
+# Apache Server Configs v3.2.1 | MIT License
 # https://github.com/h5bp/server-configs-apache
 
 # (!) Using `.htaccess` files slows down Apache, therefore, if you have
@@ -126,17 +126,7 @@ Options -MultiViews
 # https://msdn.microsoft.com/en-us/library/ff955275.aspx
 
 <IfModule mod_headers.c>
-
-    Header set X-UA-Compatible "IE=edge"
-
-    # `mod_headers` cannot match based on the content-type, however,
-    # the `X-UA-Compatible` response header should be sent only for
-    # HTML documents and not for the other resources.
-
-    <FilesMatch "\.(appcache|atom|bbaw|bmp|br|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|gz|htc|ic[os]|jpe?g|m?js|json(ld)?|m4[av]|manifest|map|markdown|md|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|wasm|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-        Header unset X-UA-Compatible
-    </FilesMatch>
-
+    Header set X-UA-Compatible "IE=edge" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
 </IfModule>
 
 # ######################################################################
@@ -160,8 +150,9 @@ Options -MultiViews
     AddType application/json                            json map topojson
     AddType application/ld+json                         jsonld
     AddType application/rss+xml                         rss
-    AddType application/vnd.geo+json                    geojson
-    AddType application/xml                             rdf xml
+    AddType application/geo+json                        geojson
+    AddType application/rdf+xml                         rdf
+    AddType application/xml                             xml
 
 
   # JavaScript
@@ -248,26 +239,24 @@ AddDefaultCharset utf-8
 # https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset
 
 <IfModule mod_mime.c>
-    AddCharset utf-8 .atom \
+    AddCharset utf-8 .appcache \
                      .bbaw \
                      .css \
-                     .geojson \
+                     .htc \
                      .ics \
                      .js \
                      .json \
-                     .jsonld \
                      .manifest \
+                     .map \
                      .markdown \
                      .md \
                      .mjs \
-                     .rdf \
-                     .rss \
                      .topojson \
                      .vtt \
-                     .webapp \
+                     .vcard \
+                     .vcf \
                      .webmanifest \
-                     .xloc \
-                     .xml
+                     .xloc
 </IfModule>
 
 # ######################################################################
@@ -462,17 +451,7 @@ AddDefaultCharset utf-8
 # https://www.owasp.org/index.php/Clickjacking
 
 # <IfModule mod_headers.c>
-
-#     Header set X-Frame-Options "DENY"
-
-#     # `mod_headers` cannot match based on the content-type, however,
-#     # the `X-Frame-Options` response header should be sent only for
-#     # HTML documents and not for the other resources.
-
-#     <FilesMatch "\.(appcache|atom|bbaw|bmp|br|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|gz|htc|ic[os]|jpe?g|m?js|json(ld)?|m4[av]|manifest|map|markdown|md|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|wasm|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-#         Header unset X-Frame-Options
-#     </FilesMatch>
-
+#     Header set X-Frame-Options "DENY" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
 # </IfModule>
 
 # ----------------------------------------------------------------------
@@ -485,30 +464,68 @@ AddDefaultCharset utf-8
 # This can be done by setting a `Content Security Policy` which
 # whitelists trusted sources of content for your website.
 #
-# The example header below allows ONLY scripts that are loaded from
-# the current website's origin (no inline scripts, no CDN, etc).
-# That almost certainly won't work as-is for your website!
+# There is no policy that fits all websites, you will have to modify
+# the `Content-Security-Policy` directives in the example below depending
+# on your needs.
 #
-# To make things easier, you can use an online CSP header generator
-# such as: https://www.cspisawesome.com/.
+# The example policy below aims to:
 #
+#  (1) Restrict all fetches by default to the origin of the current website
+#      by setting the `default-src` directive to `'self'` - which acts as a
+#      fallback to all "Fetch directives" (https://developer.mozilla.org/en-US/docs/Glossary/Fetch_directive).
+#
+#      This is convenient as you do not have to specify all Fetch directives
+#      that apply to your site, for example:
+#      `connect-src 'self'; font-src 'self'; script-src 'self'; style-src 'self'`, etc.
+#
+#      This restriction also means that you must explicitly define from
+#      which site(s) your website is allowed to load resources from.
+#
+#  (2) The `<base>` element is not allowed on the website. This is to
+#      prevent attackers from changing the locations of resources loaded
+#      from relative URLs.
+#
+#      If you want to use the `<base>` element, then `base-uri 'self'`
+#      can be used instead.
+#
+#  (3) Form submissions are only allowed from the current website by
+#      setting: `form-action 'self'`.
+#
+#  (4) Prevents all websites (including your own) from embedding your
+#      webpages within e.g. the `<iframe>` or `<object>` element by
+#      setting `frame-ancestors 'none'`.
+#
+#	   The `frame-ancestors` directive helps avoid "Clickjacking" attacks
+#      and is similar to the `X-Frame-Options` header.
+#
+#      Browsers that support the CSP header will ignore `X-Frame-Options`
+#      if `frame-ancestors` is also specified.
+#
+#  (5) Forces the browser to treat all the resources that are served over
+#      HTTP as if they were loaded securely over HTTPS by setting the
+#      `upgrade-insecure-requests` directive.
+#
+#      Please note that `upgrade-insecure-requests` does not ensure
+#      HTTPS for the top-level navigation. If you want to force the
+#      website itself to be loaded over HTTPS you must include the
+#      `Strict-Transport-Security` header.
+#
+# To make your CSP implementation easier, you can use an online CSP header
+# generator such as:
+# https://report-uri.com/home/generate/
+#
+# It is encouraged that you validate your CSP header using a CSP validator
+# such as:
+# https://csp-evaluator.withgoogle.com
+#
+# https://csp.withgoogle.com/docs/
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
-# https://www.w3.org/TR/CSP3/
-# https://content-security-policy.com/
 # https://www.html5rocks.com/en/tutorials/security/content-security-policy/
+# https://www.w3.org/TR/CSP/
 
 # <IfModule mod_headers.c>
-
-#     Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
-
-#     # `mod_headers` cannot match based on the content-type, however,
-#     # the `Content-Security-Policy` response header should be sent
-#     # only for HTML documents and not for the other resources.
-
-#     <FilesMatch "\.(appcache|atom|bbaw|bmp|br|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|gz|htc|ic[os]|jpe?g|m?js|json(ld)?|m4[av]|manifest|map|markdown|md|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|wasm|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-#         Header unset Content-Security-Policy
-#     </FilesMatch>
-
+#     #                                   (1)                 (2)              (3)                 (4)                     (5)
+#     Header set Content-Security-Policy "default-src 'self'; base-uri 'none'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
 # </IfModule>
 
 # ----------------------------------------------------------------------
@@ -679,18 +696,8 @@ AddDefaultCharset utf-8
 # https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29
 
 # <IfModule mod_headers.c>
-
 #     #                           (1)    (2)
-#     Header set X-XSS-Protection "1; mode=block"
-
-#     # `mod_headers` cannot match based on the content-type, however,
-#     # the `X-XSS-Protection` response header should be sent only for
-#     # HTML documents and not for the other resources.
-
-#     <FilesMatch "\.(appcache|atom|bbaw|bmp|br|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|gz|htc|ic[os]|jpe?g|m?js|json(ld)?|m4[av]|manifest|map|markdown|md|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|wasm|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-#         Header unset X-XSS-Protection
-#     </FilesMatch>
-
+#     Header set X-XSS-Protection "1; mode=block" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
 # </IfModule>
 
 # ----------------------------------------------------------------------
@@ -711,23 +718,12 @@ AddDefaultCharset utf-8
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy
 
 # <IfModule mod_headers.c>
-
 #     # no-referrer-when-downgrade (default)
 #     # This should be the user agent's default behavior if no policy is
 #     # specified.The origin is sent as referrer to a-priori as-much-secure
 #     # destination (HTTPS->HTTPS), but isn't sent to a less secure destination
 #     # (HTTPS->HTTP).
-
-#     Header set Referrer-Policy "no-referrer-when-downgrade"
-
-#     # `mod_headers` cannot match based on the content-type, however,
-#     # the `Referrer-Policy` response header should be sent
-#     # only for HTML documents and not for the other resources.
-
-#     <FilesMatch "\.(appcache|atom|bbaw|bmp|br|crx|css|cur|eot|f4[abpv]|flv|geojson|gif|gz|htc|ic[os]|jpe?g|m?js|json(ld)?|m4[av]|manifest|map|markdown|md|mp4|oex|og[agv]|opus|otf|pdf|png|rdf|rss|safariextz|svgz?|swf|topojson|tt[cf]|txt|vcard|vcf|vtt|wasm|webapp|web[mp]|webmanifest|woff2?|xloc|xml|xpi)$">
-#         Header unset Referrer-Policy
-#     </FilesMatch>
-
+#     Header set Referrer-Policy "no-referrer-when-downgrade" "expr=%{CONTENT_TYPE} =~ m#text/html#i"
 # </IfModule>
 
 # ----------------------------------------------------------------------
@@ -775,6 +771,7 @@ AddDefaultCharset utf-8
 
 <IfModule mod_headers.c>
     Header unset X-Powered-By
+    Header always unset X-Powered-By
 </IfModule>
 
 # ----------------------------------------------------------------------
@@ -839,7 +836,7 @@ ServerSignature Off
                                       "application/rdf+xml" \
                                       "application/rss+xml" \
                                       "application/schema+json" \
-                                      "application/vnd.geo+json" \
+                                      "application/geo+json" \
                                       "application/vnd.ms-fontobject" \
                                       "application/wasm" \
                                       "application/x-font-ttf" \
@@ -847,15 +844,12 @@ ServerSignature Off
                                       "application/x-web-app-manifest+json" \
                                       "application/xhtml+xml" \
                                       "application/xml" \
-                                      "font/collection" \
                                       "font/eot" \
                                       "font/opentype" \
                                       "font/otf" \
-                                      "font/ttf" \
                                       "image/bmp" \
                                       "image/svg+xml" \
                                       "image/vnd.microsoft.icon" \
-                                      "image/x-icon" \
                                       "text/cache-manifest" \
                                       "text/calendar" \
                                       "text/css" \
@@ -1082,7 +1076,7 @@ FileETag None
     ExpiresByType application/json                      "access plus 0 seconds"
     ExpiresByType application/ld+json                   "access plus 0 seconds"
     ExpiresByType application/schema+json               "access plus 0 seconds"
-    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
+    ExpiresByType application/geo+json                  "access plus 0 seconds"
     ExpiresByType application/xml                       "access plus 0 seconds"
     ExpiresByType text/calendar                         "access plus 0 seconds"
     ExpiresByType text/xml                              "access plus 0 seconds"
@@ -1221,3 +1215,4 @@ FileETag None
 #     RewriteCond %{REQUEST_FILENAME} !-f
 #     RewriteRule ^(.+)\.(\w+)\.(bmp|css|cur|gif|ico|jpe?g|m?js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
 # </IfModule>
+

dist/css/main.css

@@ -1,21 +1,20 @@
-/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
+/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */
 
-/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
 /*
  * 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;
+html {
+  color: #222;
+  font-size: 1em;
+  line-height: 1.4;
 }
 
 /*
@@ -29,13 +28,13 @@
  */
 
 ::-moz-selection {
-    background: #b3d4fc;
-    text-shadow: none;
+  background: #b3d4fc;
+  text-shadow: none;
 }
 
 ::selection {
-    background: #b3d4fc;
-    text-shadow: none;
+  background: #b3d4fc;
+  text-shadow: none;
 }
 
 /*
@@ -43,12 +42,12 @@
  */
 
 hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #ccc;
-    margin: 1em 0;
-    padding: 0;
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0;
 }
 
 /*
@@ -63,7 +62,7 @@ iframe,
 img,
 svg,
 video {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 /*
@@ -71,9 +70,9 @@ video {
  */
 
 fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
+  border: 0;
+  margin: 0;
+  padding: 0;
 }
 
 /*
@@ -81,7 +80,7 @@ fieldset {
  */
 
 textarea {
-    resize: vertical;
+  resize: vertical;
 }
 
 /* ==========================================================================
@@ -89,35 +88,17 @@ textarea {
    ========================================================================== */
 
 .browserupgrade {
-    margin: 0.2em 0;
-    background: #ccc;
-    color: #000;
-    padding: 0.2em 0;
+  margin: 0.2em 0;
+  background: #ccc;
+  color: #000;
+  padding: 0.2em 0;
 }
 
-
-
-
- /* ==========================================================================
+/* ==========================================================================
    Author's custom styles
    ========================================================================== */
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- /* ==========================================================================
+/* ==========================================================================
    Helper classes
    ========================================================================== */
 
@@ -125,7 +106,7 @@ textarea {
  * Hide visually and from screen readers
  */
 
- .hidden {
+.hidden {
   display: none !important;
 }
 
@@ -138,33 +119,34 @@ textarea {
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */
 
-.visuallyhidden {
+.sr-only {
   border: 0;
-  clip: rect(0 0 0 0);
+  clip: rect(0, 0, 0, 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
+  white-space: nowrap;
   width: 1px;
-  white-space: nowrap; /* 1 */
+  /* 1 */
 }
 
 /*
-* Extends the .visuallyhidden class to allow the element
+* Extends the .sr-only 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 {
+.sr-only.focusable:active,
+.sr-only.focusable:focus {
   clip: auto;
   height: auto;
   margin: 0;
   overflow: visible;
   position: static;
-  width: auto;
   white-space: inherit;
+  width: auto;
 }
 
 /*
@@ -189,107 +171,96 @@ textarea {
 
 .clearfix:before,
 .clearfix:after {
-  content: " "; /* 1 */
-  display: table; /* 2 */
+  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 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 */
+  (-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:
    https://www.phpied.com/delay-loading-your-print-css/
    ========================================================================== */
 
-   @media print {
-    *,
-    *:before,
-    *:after {
-        background: transparent !important;
-        color: #000 !important; /* Black prints faster */
-        -webkit-box-shadow: none !important;
-        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) ")";
-    }
-
-    /*
+@media print {
+  *,
+  *:before,
+  *:after {
+    background: transparent !important;
+    color: #000 !important;
+    /* Black prints faster */
+    -webkit-box-shadow: none !important;
+    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 {
-        white-space: pre-wrap !important;
-    }
-    pre,
-    blockquote {
-        border: 1px solid #999;
-        page-break-inside: avoid;
-    }
-
-    /*
+  a[href^="#"]:after,
+  a[href^="javascript:"]:after {
+    content: "";
+  }
+  pre {
+    white-space: pre-wrap !important;
+  }
+  pre,
+  blockquote {
+    border: 1px solid #999;
+    page-break-inside: avoid;
+  }
+  /*
      * Printing Tables:
-     * http://css-discuss.incutio.com/wiki/Printing_Tables
+     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
      */
-
-    thead {
-        display: table-header-group;
-    }
-
-    tr,
-    img {
-        page-break-inside: avoid;
-    }
-
-    p,
-    h2,
-    h3 {
-        orphans: 3;
-        widows: 3;
-    }
-
-    h2,
-    h3 {
-        page-break-after: avoid;
-    }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
 }
 
-

dist/doc/css.md

@@ -6,10 +6,7 @@ table of contents](TOC.md)
 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)
+* [main.css](#maincss)
 
 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/),

dist/doc/html.md

@@ -61,7 +61,7 @@ MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_m
 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, shrink-to-fit=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 ```
 
 If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
@@ -80,7 +80,7 @@ control over the UI of a saved site or web app on a mobile device.
 It's linked to from the HTML as follows:
 
 ```html
-        <link rel="manifest" href="site.webmanifest">
+<link rel="manifest" href="site.webmanifest">
 ```
 Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage. 
 You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
@@ -128,10 +128,10 @@ using a 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="js/vendor/modernizr-3.6.0.min.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
+    <script src="js/vendor/modernizr-3.7.1.min.js"></script>
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
     <script src="js/plugins.js"></script>
     <script src="js/main.js"></script>
 </body>
@@ -165,7 +165,7 @@ 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.
+being able to serve jQuery to users in China.
 
 While the jQuery CDN is a strong default solution your site or application may
 require a different configuration. Testing your site with services like
@@ -177,22 +177,29 @@ 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.
+included.
+
+We use `analytics.js` rather than the newer `gtag.js` as 
+[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
+
+The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
+
+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
+- [Introduction to
   Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
-* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
+- [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
 
-**N.B.** The Google Universal Analytics snippet is included by default mainly
+**N.B.** The Google 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!
+and use whatever suits your needs best.
+
+

dist/index.html

@@ -18,24 +18,24 @@
 </head>
 
 <body>
-  <!--[if lte IE 9]>
+  <!--[if IE]>
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
   <![endif]-->
 
   <!-- Add your site or application content here -->
   <p>Hello world! This is HTML5 Boilerplate.</p>
-  <script src="js/vendor/modernizr-3.6.0.min.js"></script>
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
+  <script src="js/vendor/modernizr-3.7.1.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+  <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
 
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
   <script>
     window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
   </script>
-  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+  <script src="https://www.google-analytics.com/analytics.js" async></script>
 </body>
 
 </html>

package.json

@@ -1,27 +1,27 @@
 {
   "devDependencies": {
-    "apache-server-configs": "^3.1.0",
+    "apache-server-configs": "^3.2.1",
     "archiver": "^3.0.0",
     "babel-core": "^6.26.3",
     "babel-preset-env": "^1.7.0",
     "babel-register": "^6.26.0",
-    "del": "^3.0.0",
-    "eslint": "^5.13.0",
+    "del": "^4.1.1",
+    "eslint": "^5.16.0",
     "eslint-config-recommended": "^4.0.0",
-    "eslint-plugin-mocha": "^5.2.1",
-    "glob": "^7.1.3",
+    "eslint-plugin-mocha": "^5.3.0",
+    "glob": "^7.1.4",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "^6.0.0",
+    "gulp-autoprefixer": "^6.1.0",
     "gulp-eslint": "^5.0.0",
     "gulp-header": "^2.0.7",
     "gulp-jscs": "^4.1.0",
-    "gulp-load-plugins": "^1.5.0",
+    "gulp-load-plugins": "^1.6.0",
     "gulp-rename": "^1.4.0",
     "gulp-replace": "^1.0.0",
-    "jquery": "3.3.1",
-    "main.css": "1.0.0",
+    "jquery": "3.4.1",
+    "main.css": "2.0.0",
     "mocha": "^5.2.0",
-    "modernizr": "3.6.0",
+    "modernizr": "3.7.1",
     "normalize.css": "8.0.1",
     "run-sequence": "^2.2.1",
     "ssri": "^6.0.1",
@@ -51,7 +51,7 @@
     "build": "gulp build",
     "test": "gulp archive && mocha --require babel-core/register --reporter spec --timeout 5000"
   },
-  "version": "6.1.0",
+  "version": "7.2.0",
   "description": "A professional front-end template for building fast, robust, and adaptable web apps or sites.",
   "files": [
     "CHANGELOG.md",

src/doc/css.md

@@ -6,10 +6,7 @@ table of contents](TOC.md)
 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)
+* [main.css](#maincss)
 
 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/),

src/doc/html.md

@@ -61,7 +61,7 @@ MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_m
 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, shrink-to-fit=no">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 ```
 
 If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
@@ -80,7 +80,7 @@ control over the UI of a saved site or web app on a mobile device.
 It's linked to from the HTML as follows:
 
 ```html
-        <link rel="manifest" href="site.webmanifest">
+<link rel="manifest" href="site.webmanifest">
 ```
 Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage. 
 You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
@@ -128,10 +128,10 @@ using a 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="js/vendor/modernizr-3.6.0.min.js"></script>
-    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
+    <script src="js/vendor/modernizr-3.7.1.min.js"></script>
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
     <script src="js/plugins.js"></script>
     <script src="js/main.js"></script>
 </body>
@@ -165,7 +165,7 @@ 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.
+being able to serve jQuery to users in China.
 
 While the jQuery CDN is a strong default solution your site or application may
 require a different configuration. Testing your site with services like
@@ -177,22 +177,29 @@ 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.
+included.
+
+We use `analytics.js` rather than the newer `gtag.js` as 
+[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
+
+The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
+
+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
+- [Introduction to
   Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
-* [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
+- [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
 
-**N.B.** The Google Universal Analytics snippet is included by default mainly
+**N.B.** The Google 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!
+and use whatever suits your needs best.
+
+

src/index.html

@@ -18,7 +18,7 @@
 </head>
 
 <body>
-  <!--[if lte IE 9]>
+  <!--[if IE]>
     <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
   <![endif]-->
 
@@ -33,9 +33,9 @@
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
   <script>
     window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
-    ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview')
+    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
   </script>
-  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+  <script src="https://www.google-analytics.com/analytics.js" async></script>
 </body>
 
 </html>