Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://getbootstrap.com">
-    <img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width=72 height=72>
+    <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width=72 height=72>
   </a>
 
   <h3 align="center">Bootstrap</h3>

_config.yml

@@ -1,57 +1,74 @@
 # Dependencies
-markdown:         kramdown
-highlighter:      rouge
+markdown:       kramdown
+highlighter:    rouge
 
 kramdown:
-  auto_ids: true
+  auto_ids:     true
 
 # Permalinks
-permalink:        pretty
+permalink:      pretty
 
 # Server
-source:           .
-destination:      ./_gh_pages
-port:             9001
-baseurl:          ""
-url:              https://getbootstrap.com
-encoding:         UTF-8
-exclude:          [.git, .github, assets/scss/, build, js, node_modules, nuget, scss, vendor, bower.json, composer.json, Gemfile, Gemfile.lock, Gruntfile.js, package.js, package.json, package-lock.json, sache.json]
+source:         "."
+destination:    ./_gh_pages
+port:           9001
+baseurl:        ""
+url:            "https://getbootstrap.com"
+encoding:       UTF-8
+exclude:
+  - .git
+  - .github
+  - assets/scss/
+  - build
+  - js
+  - node_modules
+  - nuget
+  - scss
+  - vendor
+  - bower.json
+  - composer.json
+  - Gemfile
+  - Gemfile.lock
+  - Gruntfile.js
+  - package.js
+  - package.json
+  - package-lock.json
+  - sache.json
 
 plugins:
   - jekyll-redirect-from
   - jekyll-sitemap
   - jekyll-toc
 
 # Social
-title: Bootstrap
-description: The most popular HTML, CSS, and JS library in the world.
-twitter: getbootstrap
-authors: Mark Otto, Jacob Thornton, and Bootstrap contributors
-social_logo_path: /assets/brand/bootstrap-social-logo.png
-social_image_path: /assets/brand/bootstrap-social.png
-
-# Custom vars
-current_version:  4.0.0-beta
-docs_version:     4.0
-repo:             https://github.com/twbs/bootstrap
-slack:            https://bootstrap-slack.herokuapp.com
+title:              Bootstrap
+description:        "The most popular HTML, CSS, and JS library in the world."
+twitter:            getbootstrap
+authors:            "Mark Otto, Jacob Thornton, and Bootstrap contributors"
+social_image_path:  /assets/brand/bootstrap-social.png
+social_logo_path:   /assets/brand/bootstrap-social-logo.png
 
+# Custom variables
+current_version:    4.0.0-beta
+docs_version:       4.0
+repo:               "https://github.com/twbs/bootstrap"
+slack:              "https://bootstrap-slack.herokuapp.com"
 download:
-  source:         https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip
-  dist:           https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta/bootstrap-4.0.0-beta-dist.zip
+  source:           "https://github.com/twbs/bootstrap/archive/v4.0.0-beta.zip"
+  dist:             "https://github.com/twbs/bootstrap/releases/download/v4.0.0-beta/bootstrap-4.0.0-beta-dist.zip"
 
-blog:             https://blog.getbootstrap.com
-expo:             https://expo.getbootstrap.com
-themes:           https://themes.getbootstrap.com
-jobs:             https://jobs.getbootstrap.com
+blog:               "https://blog.getbootstrap.com"
+expo:               "https://expo.getbootstrap.com"
+jobs:               "https://jobs.getbootstrap.com"
+themes:             "https://themes.getbootstrap.com"
 
 cdn:
   # See https://www.srihash.org for info on how to generate the hashes
-  css:            https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
-  css_hash:       "sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
-  js:             https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js
-  js_hash:        "sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
-  jquery:         https://code.jquery.com/jquery-3.2.1.slim.min.js
-  jquery_hash:    "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
-  popper:         https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
-  popper_hash:    "sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
+  css:              "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
+  css_hash:         "sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
+  js:               "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
+  js_hash:          "sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
+  jquery:           "https://code.jquery.com/jquery-3.2.1.slim.min.js"
+  jquery_hash:      "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+  popper:           "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
+  popper_hash:      "sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"

_data/nav.yml

@@ -75,12 +75,12 @@
     # - title: Approach
     - title: Icons
 
+- title: Migration
+
 - title: About
   pages:
     - title: History
     - title: Team
     - title: Brand
     - title: License
     - title: Translations
-
-- title: Migration

_includes/callout-danger-async-methods.md

@@ -1,7 +1,7 @@
 {% callout danger %}
 #### Asynchronous methods and transitions
 
-All API methods are **asynchronous** and start a **transition**. They returns to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
+All API methods are **asynchronous** and start a **transition**. They return to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
 
 [See our JavaScript documentation for more information.]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/)
 {% endcallout %}

_includes/callout-warning-color-assistive-technologies.md

@@ -2,4 +2,4 @@
 #### Conveying meaning to assistive technologies
 
 Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
-{% endcallout %}
+{% endcallout %}

_includes/docs-sidebar.html

@@ -1,37 +1,37 @@
 <form class="bd-search d-flex align-items-center">
   <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
-  <button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
+  <button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
     {% include icons/menu.svg class="" width="30" height="30" %}
   </button>
 </form>
 
 <nav class="collapse bd-links" id="bd-docs-nav">
-  {% assign page_slug = page.url | split: '/' | last %}
-  {% for group in site.data.nav %}
-  {% assign link = group.pages | first %}
-  {% assign link_slug = link.title | slugify %}
-  {% assign group_slug = group.title | slugify %}
-  {% assign active = nil %}
+  {%- assign page_slug = page.url | split: '/' | last -%}
+  {%- for group in site.data.nav -%}
+  {%- assign link = group.pages | first -%}
+  {%- assign link_slug = link.title | slugify -%}
+  {%- assign group_slug = group.title | slugify -%}
+  {%- assign active = nil -%}
 
-  {% if page.group == group_slug %}
-    {% assign active = 'active' %}
-  {% endif %}
+  {%- if page.group == group_slug -%}
+    {%- assign active = 'active' -%}
+  {%- endif -%}
 
-  <div class="bd-toc-item {{ active }}">
+  <div class="bd-toc-item{% unless active == nil %} {{ active }}{% endunless %}">
       <a class="bd-toc-link" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
         {{ group.title }}
       </a>
 
       <ul class="nav bd-sidenav">
-        {% for doc in group.pages %}
-          {% assign doc_slug = doc.title | slugify %}
-          {% assign active = nil %}
+        {%- for doc in group.pages -%}
+          {%- assign doc_slug = doc.title | slugify -%}
+          {%- assign active = nil -%}
 
-          {% if page.group == group_slug and page_slug == doc_slug %}
-            {% assign active = 'active bd-sidenav-active' %}
-          {% endif %}
+          {%- if page.group == group_slug and page_slug == doc_slug -%}
+            {%- assign active = 'active bd-sidenav-active' -%}
+          {%- endif -%}
 
-          <li class="{{ active }}">
+          <li{% unless active == nil %} class="{{ active }}"{% endunless %}>
             <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
               {{ doc.title }}
             </a>
@@ -50,8 +50,8 @@
             {% endunless %}
             {% endcomment %}
           </li>
-        {% endfor %}
+        {%- endfor -%}
       </ul>
     </div>
-  {% endfor %}
+  {%- endfor -%}
 </nav>

_includes/favicons.html

@@ -0,0 +1,9 @@
+<!-- Favicons -->
+<link rel="apple-touch-icon" href="{{ site.baseurl }}/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="{{ site.baseurl }}/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="{{ site.baseurl }}/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="{{ site.baseurl }}/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="{{ site.baseurl }}/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+<meta name="msapplication-config" content="{{ site.baseurl }}/assets/img/favicons/browserconfig.xml">
+<meta name="theme-color" content="#563d7c">

_includes/header.html

@@ -3,15 +3,13 @@
 <meta name="generator" content="Jekyll v{{ jekyll.version }}">
 
 <title>
-  {% if page.title %}
+  {%- if page.title -%}
     {{ page.title }} &middot; {{ site.title }}
-  {% else %}
+  {%- else -%}
     {{ site.title }} &middot; {{ site.description }}
-  {% endif %}
+  {%- endif -%}
 </title>
 
-{% include social.html %}
-
 <!-- Bootstrap core CSS -->
 {% if site.github %}
   <link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -21,13 +19,11 @@
 
 <!-- Documentation extras -->
 {% if page.layout == "docs" %}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
+<link href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" rel="stylesheet">
 {% endif %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
 
-<!-- Favicons -->
-<link rel="apple-touch-icon" href="{{ site.baseurl }}/apple-touch-icon.png">
-<link rel="icon" href="{{ site.baseurl }}/favicon.ico">
+{% include social.html %}
 
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

_includes/scripts.html

@@ -16,6 +16,7 @@
   <script src="{{ site.baseurl }}/assets/js/vendor/clipboard.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/vendor/holder.min.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/application.js"></script>
+  <script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
 {% endif %}
 
 <script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
@@ -50,5 +51,5 @@
   fg: 'rgba(255,255,255,.75)',
   font: 'Helvetica',
   fontweight: 'normal'
-})
+});
 </script>

_includes/social.html

@@ -1,3 +1,7 @@
+<!-- Meta -->
+<meta name="description" content="{{ site.description }}">
+<meta name="author" content="{{ site.authors }}">
+
 <!-- Twitter -->
 <meta name="twitter:site" content="@{{ site.twitter }}">
 <meta name="twitter:creator" content="@{{ site.twitter }}">
@@ -30,7 +34,3 @@
 <meta property="og:image:type" content="image/png">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
-
-<!-- Meta -->
-<meta name="description" content="{{ site.description }}">
-<meta name="author" content="{{ site.authors }}">

assets/img/favicons/browserconfig.xml

@@ -0,0 +1,11 @@
+---
+---
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="{{ site.baseurl }}/assets/img/favicons/mstile-150x150.png"/>
+            <TileColor>#563d7c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

assets/img/favicons/manifest.json

@@ -0,0 +1,22 @@
+---
+---
+{
+    "name": "Bootstrap",
+    "short_name": "Bootstrap",
+    "icons": [
+        {
+            "src": "{{ site.baseurl }}/assets/img/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "{{ site.baseurl }}/assets/img/favicons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "start_url": "/",
+    "theme_color": "#563d7c",
+    "background_color": "#563d7c",
+    "display": "standalone"
+}

assets/js/src/pwa.js

@@ -0,0 +1,15 @@
+/* eslint no-console:off */
+
+(function setupSW() {
+  'use strict'
+
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function () {
+      navigator.serviceWorker.register('/sw.js').then(function (registration) {
+        console.log('ServiceWorker registration successful with scope: ', registration.scope)
+      }).catch(function (err) {
+        console.log('ServiceWorker registration failed: ', err)
+      })
+    })
+  }
+}())

docs/4.0/layout/overview.md

@@ -162,7 +162,6 @@ Several Bootstrap components utilize `z-index`, the CSS property that helps cont
 We don't encourage customization of these values; should you change one, you likely need to change them all.
 
 ```scss
-$zindex-dropdown-backdrop:  990 !default;
 $zindex-dropdown:          1000 !default;
 $zindex-fixed:             1030 !default;
 $zindex-sticky:            1030 !default;

package.json

@@ -36,7 +36,7 @@
     "js-compile-bundle": "shx cat js/src/util.js js/src/alert.js js/src/button.js js/src/carousel.js js/src/collapse.js js/src/dropdown.js js/src/modal.js js/src/scrollspy.js js/src/tab.js js/src/tooltip.js js/src/popover.js | shx sed \"s/^(import|export).*//\" | babel --filename js/src/bootstrap.js | node build/stamp.js > dist/js/bootstrap.js",
     "js-compile-plugins": "babel js/src/ --out-dir js/dist/ --source-maps",
     "js-minify": "uglifyjs --config-file build/uglifyjs.config.json --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
-    "js-minify-docs": "uglifyjs --config-file build/uglifyjs.config.json --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js",
+    "js-minify-docs": "uglifyjs --config-file build/uglifyjs.config.json --output assets/js/docs.min.js assets/js/vendor/anchor.min.js assets/js/vendor/clipboard.min.js assets/js/vendor/holder.min.js assets/js/src/application.js assets/js/src/pwa.js",
     "js-test": "phantomjs ./node_modules/qunit-phantomjs-runner/runner.js js/tests/index.html 60",
     "js-test-cloud": "ruby -r webrick -e \"s = WEBrick::HTTPServer.new(:Port => 3000, :DocumentRoot => Dir.pwd, :Logger => WEBrick::Log.new('/dev/null'), :AccessLog => []); trap('INT') { s.shutdown }; s.start\" & grunt saucelabs-qunit",
     "docs": "npm-run-all docs-compile docs-lint",

sw.js

@@ -0,0 +1 @@
+// empty for now