v4: Update homepage, examples, and general docs styles

- Refreshes the look and feel of the homepage with fresh colors, new content, and simplified styles.
- Updates docs button styles
- Replaces bytesize icons with Bootstrap icons
- Adds themes callout to examples page

site/_includes/icons/circle-square.svg

@@ -0,0 +1,4 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 6a6 6 0 1112 0A6 6 0 010 6z"/>
+  <path d="M12.93 5h1.57a.5.5 0 01.5.5v9a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1.57a6.953 6.953 0 01-1-.22v1.79A1.5 1.5 0 005.5 16h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0014.5 4h-1.79c.097.324.17.658.22 1z"/>
+</svg>

site/_includes/icons/cloud-fill.svg

@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M3.5 13a3.5 3.5 0 11.59-6.95 5.002 5.002 0 119.804 1.98A2.5 2.5 0 0113.5 13h-10z" clip-rule="evenodd"/>
+</svg>

site/_includes/icons/code.svg

@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
+</svg>

site/_includes/icons/download.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Download</title><path d="M9 22c-9 1-8-10 0-9C6 2 23 2 22 10c10-3 10 13 1 12m-12 4l5 4 5-4m-5-10v14"/></svg>

site/_includes/icons/droplet-fill.svg

@@ -0,0 +1,3 @@
+<svg {% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %}{% if include.class %} class="{{ include.class }}"{% endif %} focusable="false" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" d="M8 16a6 6 0 006-6c0-1.655-1.122-2.904-2.432-4.362C10.254 4.176 8.75 2.503 8 0c0 0-6 5.686-6 10a6 6 0 006 6zM6.646 4.646c-.376.377-1.272 1.489-2.093 3.13l.894.448c.78-1.559 1.616-2.58 1.907-2.87l-.708-.708z" clip-rule="evenodd"/>
+</svg>

site/_includes/icons/import.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Import</title><path d="M28 22v8H4v-8M16 4v20m-8-8l8 8 8-8"/></svg>

site/_includes/icons/lightning.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg"{% if include.width %} width="{{ include.width }}"{% endif %}{% if include.height %} height="{{ include.height }}"{% endif %} fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true"{% if include.class %} class="{{ include.class }}"{% endif %} viewBox="0 0 32 32" focusable="false"><title>Lightning</title><path d="M18 13l8-11L8 13l6 6-8 11 18-11z"/></svg>

site/_layouts/simple.html

@@ -7,8 +7,10 @@ layout: default
     <h1 class="bd-title mt-0">{{ page.title | smartify }}</h1>
     <p class="bd-lead">{{ page.description | smartify }}</p>
     {%- if page.title == "Examples" -%}
-    <a href="{{ site.download.source }}" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+    <div class="d-flex flex-column flex-sm-row">
-    <a href="{{ site.download.dist_examples }}" class="btn btn-lg btn-bd-primary mt-3 mt-sm-0 ml-sm-3 ml-md-5" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download Examples</a>
+      <a href="{{ site.download.dist_examples }}" class="btn btn-bd-primary py-2 px-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download Examples');">Download examples</a>
+      <a href="{{ site.download.source }}" class="btn btn-outline-secondary py-2 px-3 mt-3 mt-sm-0 ml-sm-3" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a>
+    </div>
     {%- endif -%}
   </div>
   {% include ads.html %}

site/docs/4.4/assets/scss/_buttons.scss

@@ -4,14 +4,15 @@
 
 .btn-bd-primary {
   font-weight: 600;
-  color: $bd-purple-bright;
+  color: $white;
+  background-color: $bd-purple-bright;
   border-color: $bd-purple-bright;
 
   &:hover,
   &:active {
     color: $white;
-    background-color: $bd-purple-bright;
+    background-color: darken($bd-purple-bright, 10%);
-    border-color: $bd-purple-bright;
+    border-color: darken($bd-purple-bright, 10%);
   }
 
   &:focus {

site/docs/4.4/assets/scss/_content.scss

@@ -107,7 +107,6 @@
 .bd-title {
   margin-top: 1rem;
   margin-bottom: .5rem;
-  font-weight: 300;
   @include font-size(3rem);
 }
 
@@ -122,3 +121,7 @@
 
 .bd-text-purple { color: $bd-purple; }
 .bd-text-purple-bright { color: $bd-purple-bright; }
+
+.bd-bg-purple-bright {
+  background-color: $bd-purple-bright;
+}

site/docs/4.4/assets/scss/_masthead.scss

@@ -3,13 +3,19 @@
 .bd-masthead {
   position: relative;
   padding: 3rem ($grid-gutter-width / 2);
-  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
+  background: linear-gradient(to right bottom, lighten($bd-purple-light, 16%) 50%, #fff 50%);
 
   h1 {
     @include font-size(4rem);
     line-height: 1;
   }
 
+  .lead {
+    @include font-size(1.5rem);
+    font-weight: 400;
+    color: $gray-700;
+  }
+
   .btn {
     padding: .8rem 2rem;
     font-weight: 600;
@@ -37,16 +43,38 @@
   }
 }
 
-.half-rule {
-  width: 6rem;
-  margin: 2.5rem 0;
-}
-
 .masthead-followup {
   .bd-clipboard { display: none; }
 
+  h2 {
+    @include font-size(2.5rem);
+  }
+
   .highlight {
-    padding: .5rem 0;
+    @include border-radius(.5rem);
-    background-color: transparent;
+
+    pre::-webkit-scrollbar {
+      display: none;
+    }
+
+    pre code {
+      display: inline-block;
+      white-space: pre;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 }
+
+.masthead-followup-icon {
+  padding: .75rem;
+  background-image: linear-gradient(to bottom right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .01));
+  @include border-radius(.75rem);
+  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
+}
+
+.masthead-followup-svg {
+  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .125));
+}

site/docs/4.4/assets/scss/_nav.scss

@@ -4,7 +4,7 @@
 
 .bd-navbar {
   min-height: 4rem;
-  background-color: $bd-purple;
+  background-color: $bd-purple-bright;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
 
   @include media-breakpoint-down(md) {
@@ -38,7 +38,7 @@
     .nav-link {
       padding-right: .5rem;
       padding-left: .5rem;
-      color: $bd-purple-light;
+      color: rgba($white, .85);
 
       &.active,
       &:hover {

site/docs/4.4/examples/index.html

@@ -14,7 +14,8 @@ redirect_from: "/examples/"
         <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/{{ example.name | slugify }}/">
           <img class="img-thumbnail mb-3" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png,
                                                   {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}@2x.png 2x"
-                                          src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png" alt="{{ example.name }} screenshot" width="480" height="300">
+                                          src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
+                                          alt="{{ example.name }} screenshot" width="480" height="300">
           <h5 class="mb-1">{{ example.name }}</h5>
         </a>
         <p class="text-muted">{{ example.description }}</p>
@@ -22,3 +23,22 @@ redirect_from: "/examples/"
     {% if forloop.last %}</div>{% endif %}
   {% endfor %}
 {% endfor %}
+
+<hr class="my-5">
+
+<div class="container">
+  <div class="text-center">
+    <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
+      {% include icons/droplet-fill.svg width="32" height="32" %}
+    </div>
+    <h2>Go further with Bootstrap Themes</h2>
+    <p class="col-md-10 mx-auto lead font-weight-normal">
+      Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+    </p>
+    <a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+  </div>
+  <img class="d-block img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png,
+                                              {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
+                                              src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png"
+                                              alt="Bootstrap Themes" width="1151" height="320">
+</div>

site/index.html

@@ -5,24 +5,17 @@ layout: home
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
     <div class="row">
-      <div class="col-6 mx-auto col-md-6 order-md-2">
+      <div class="col-6 mx-auto col-md-4 order-md-2">
         {% include icons/bootstrap-stack.svg width="512" height="430" class="img-fluid mb-3 mb-md-0" %}
       </div>
-      <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
+      <div class="col-md-8 order-md-1 text-center text-md-left pr-md-5">
-        <h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
+        <h1 class="mb-3">Build fast, responsive sites with Bootstrap</h1>
-        <p class="lead">
-          Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
-        </p>
         <p class="lead mb-4">
-          Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
+          Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.
         </p>
-        <div class="row mx-n2">
+        <div class="d-flex flex-column flex-md-row">
-          <div class="col-md px-2">
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary mb-3 mr-md-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
-            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-bd-primary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Get started', 'Get started');">Get started</a>
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
-          </div>
-          <div class="col-md px-2">
-            <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/" class="btn btn-lg btn-outline-secondary w-100 mb-3" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
-          </div>
         </div>
         <p class="text-muted mb-0">
           Currently v{{ site.current_version }}
@@ -33,57 +26,100 @@ layout: home
   </div>
 </main>
 
-<div class="masthead-followup row m-0 border border-white">
+<div class="masthead-followup">
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
+  <div class="container">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
+    <div class="row mb-5 pb-md-4 align-items-center">
-    {% include icons/import.svg width="32" height="32" class="text-primary mb-2" %}
+      <div class="col-md-5">
-    <h3>Installation</h3>
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
-    <p>Include Bootstrap’s source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don’t include documentation, but do include our build system and readme.</p>
+          {% include icons/code.svg width="32" height="32" class="masthead-followup-svg" %}
-
+        </div>
+        <h2>Installation</h2>
+        <p class="lead font-weight-normal">
+          Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor.
+        </p>
+        <p>Package managed installs don’t include documentation, but do include our build system and readme. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
+        <a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
 {% highlight sh %}
+# Via npm
 npm install bootstrap
-{% endhighlight %}
 
-{% highlight sh %}
+# Via gem
 gem install bootstrap -v {{ site.current_ruby_version }}
 {% endhighlight %}
+      </div>
+    </div>
 
-    <hr class="half-rule">
+    <div class="row mb-5 pb-md-4 align-items-center">
-    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/">Read installation docs</a>
+      <div class="col-md-5">
-  </div>
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
-
+          {% include icons/cloud-fill.svg width="32" height="32" class="masthead-followup-svg" %}
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
+        </div>
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
+        <h2>BootstrapCDN</h2>
-    {% include icons/download.svg width="32" height="32" class="text-primary mb-2" %}
+        <p class="lead font-weight-normal">
-    <h3>BootstrapCDN</h3>
+          When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.
-    <p>When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.bootstrapcdn.com/">BootstrapCDN</a>.</p>
+        </p>
-
+        <p>
-<h5>CSS only</h5>
+          See it in action with our simple <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/introduction/#starter-template">starter template</a>, or <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/">browse the examples</a> to jumpstart your next project.
+        </p>
+        <a class="btn btn-lg btn-outline-primary mb-3" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
 {% highlight html %}
+<!-- CSS only -->
 <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
-{% endhighlight %}
 
-<h5>JS, Popper.js, and jQuery</h5>
+<!-- JS, Popper.js, and jQuery -->
-{% highlight html %}
 <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.popper }}" integrity="{{ site.cdn.popper_hash }}" crossorigin="anonymous"></script>
 <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
 {% endhighlight %}
-    <hr class="half-rule">
+      </div>
-    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
+    </div>
-  </div>
 
-  <div class="col-md-4 p-3 p-md-5 bg-light border border-white">
+    <div class="row mb-5 pb-md-4 align-items-center">
-    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
+      <div class="col-md-5">
-    {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2" %}
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
-    <h3>Official Themes</h3>
+          {% include icons/circle-square.svg width="32" height="32" class="masthead-followup-svg" %}
-    <p>
+        </div>
-      Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
+        <h2>Bootstrap Icons</h2>
-    </p>
+        <p class="lead font-weight-normal">
-    <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
+          For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
-                                                {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
+        </p>
-                                        src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="500" height="200">
+        <p>
-    <hr class="half-rule">
+          Bootstrap Icons are designed to work best with Bootstrap components, but they’ll work in any project. They’re SVGs, so they scale quickly and easily, can be implmented in several ways, and can be styled with CSS.
-    <a href="{{ site.themes }}/" class="btn btn-outline-primary">Browse themes</a>
+        </p>
+        <a href="{{ site.icons }}" class="btn btn-lg btn-outline-primary mb-3">Get Bootstrap Icons</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
+        <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png,
+                                                    {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
+                                                    src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png"
+                                                    alt="Bootstrap Icons" width="966" height="600">
+      </div>
+    </div>
+
+    <div class="row mb-5 pb-md-4 align-items-center">
+      <div class="col-md-5">
+        <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
+          {% include icons/droplet-fill.svg width="32" height="32" class="masthead-followup-svg" %}
+        </div>
+        <h2>Official Themes</h2>
+        <p class="lead font-weight-normal">
+          Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>.
+        </p>
+        <p>
+          Themes are built on Bootstrap as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
+        </p>
+        <a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
+      </div>
+      <div class="col-md-7 pl-md-5">
+        <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
+                                                    {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
+                                                    src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png"
+                                                    alt="Bootstrap Themes" width="700" height="500">
+      </div>
+    </div>
   </div>
 </div>