new homepage, new assets, clean out old stuff

_includes/footer.html

@@ -1,5 +1,5 @@
 <footer class="bd-footer text-muted">
-  <div class="container">
+  <div class="container-fluid p-3 p-md-5">
     <ul class="bd-footer-links">
       <li><a href="{{ site.repo }}">GitHub</a></li>
       <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>

_layouts/simple.html

@@ -2,16 +2,11 @@
 layout: default
 ---
 
-<div class="bd-pageheader text-center text-sm-left">
+<div class="container my-5">
-  <div class="container">
+  <main class="bd-content" role="main">
-    <h1>{{ page.title }}</h1>
+    <h1 class="bd-title" id="content">{{ page.title }}</h1>
-    <p class="lead">
+    <p class="bd-lead">{{ page.description }}</p>
-      Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
-    </p>
     {% include ads.html %}
-  </div>
+    {{ content }}
-</div>
+  </main>
-
-<div class="container bd-content">
-  {{ content }}
 </div>

assets/scss/_ads.scss

@@ -5,38 +5,26 @@
 //
 
 #carbonads {
+  position: static;
   display: block;
+  max-width: 400px;
   padding: 15px 15px 15px 160px;
-  margin: 50px -15px 0;
+  margin: 2rem 0;
   overflow: hidden;
   font-size: 13px;
-  line-height: 1.5;
+  line-height: 1.4;
   text-align: left;
-  border: solid #866ab3;
+  background-color: rgba(0,0,0,.05);
-  border-width: 1px 0 0;
 
   a {
-    color: #fff;
+    color: #333;
     text-decoration: none;
   }
 
   @include media-breakpoint-up(sm) {
     max-width: 330px;
-    margin: 50px auto 0;
-    border-width: 1px;
     border-radius: 4px;
   }
-
-  @include media-breakpoint-up(lg) {
-    position: absolute;
-    top: 0;
-    right: 15px;
-    margin-top: 0;
-
-    .bd-masthead & {
-      position: static;
-    }
-  }
 }
 
 .carbon-img {
@@ -46,24 +34,5 @@
 
 .carbon-poweredby {
   display: block;
-  color: #cdbfe3 !important;
+  color: #777 !important;
-}
-
-.bd-content {
-  #carbonads {
-    position: static;
-    max-width: 400px;
-    margin: 2rem 0;
-    line-height: 1.4;
-    background-color: #f5f5f5;
-    border: 0;
-
-    a {
-      color: #333;
-    }
-
-    .carbon-poweredby {
-      color: #777 !important;
-    }
-  }
 }

assets/scss/_content.scss

@@ -105,3 +105,6 @@
     font-size: 1.5rem;
   }
 }
+
+.bd-text-purple { color: $bd-purple; }
+.bd-text-purple-bright { color: $bd-purple-bright; }

assets/scss/_featurettes.scss

@@ -1,84 +0,0 @@
-.bd-featurette {
-  padding-top: 3rem;
-  padding-bottom: 3rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  color: #555;
-  text-align: center;
-  background-color: #fff;
-  border-top: 1px solid #eee;
-
-  .highlight {
-    text-align: left;
-  }
-
-  .lead {
-    margin-right: auto;
-    margin-bottom: 2rem;
-    margin-left: auto;
-    font-size: 1rem;
-    text-align: center;
-  }
-}
-
-.bd-featurette-title {
-  margin-bottom: .5rem;
-  font-size: 2rem;
-  font-weight: normal;
-  color: #333;
-  text-align: center;
-}
-
-.half-rule {
-  width: 6rem;
-  margin: 2.5rem auto;
-
-  @include media-breakpoint-up(sm) {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-.bd-featurette h4 {
-  margin-top: 1rem;
-  margin-bottom: .5rem;
-  font-weight: normal;
-  color: #333;
-}
-.bd-featurette-img {
-  display: block;
-  margin-bottom: 1.25rem;
-  color: #333;
-}
-.bd-featurette-img:hover {
-  color: $blue;
-  text-decoration: none;
-}
-.bd-featurette-img img {
-  display: block;
-  margin-bottom: 1rem;
-}
-
-@media (min-width: 480px) {
-  .bd-featurette .img-fluid {
-    margin-top: 2rem;
-  }
-}
-@media (min-width: 768px) {
-  .bd-featurette {
-    padding-top: 6rem;
-    padding-bottom: 6rem;
-  }
-  .bd-featurette-title {
-    font-size: 2.5rem;
-
-    + .lead {
-      font-size: 1.5rem;
-    }
-  }
-  .bd-featurette .lead {
-    max-width: 80%;
-  }
-  .bd-featurette .img-fluid {
-    margin-top: 0;
-  }
-}

assets/scss/_footer.scss

@@ -3,8 +3,6 @@
 //
 
 .bd-footer {
-  padding: 4rem 0;
-  margin-top: 4rem;
   font-size: 85%;
   text-align: center;
   background-color: #f7f7f7;

assets/scss/_masthead.scss

@@ -2,53 +2,28 @@
 
 .bd-masthead {
   position: relative;
-  padding: 3rem ($grid-gutter-width / 2) 2rem;
+  padding: 3rem ($grid-gutter-width / 2);
-  color: $bd-purple-light;
+  // background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
-  text-align: center;
-  background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
-
-  .bd-booticon {
-    margin: 0 auto 2rem;
-    color: $bd-purple-light;
-    border-color: $bd-purple-light;
-  }
 
   h1 {
-    font-weight: 300;
     line-height: 1;
   }
 
-  .lead {
-    margin-right: auto;
-    margin-bottom: 2rem;
-    margin-left: auto;
-    font-size: 1.25rem;
-    color: #fff;
-  }
-
-  .version {
-    margin-top: -1rem;
-    margin-bottom: 2rem;
-  }
-
   .btn {
     width: 100%;
-    padding: 1rem 2rem;
+    padding: .8rem 2rem;
     font-size: 1.25rem;
     font-weight: 500;
   }
 
   .carbonad {
-    margin-bottom: -2rem !important;
+    margin-top: 0 !important;
+    margin-bottom: -3rem !important;
   }
 
   @include media-breakpoint-up(sm) {
-    padding-top: 8rem;
+    padding-top: 5rem;
-    padding-bottom: 2rem;
+    padding-bottom: 5rem;
-
-    .btn {
-      width: auto;
-    }
 
     .carbonad {
       margin-bottom: 0 !important;
@@ -56,29 +31,31 @@
   }
 
   @include media-breakpoint-up(md) {
-    padding-bottom: 4rem;
-
-    .bd-header {
-      margin-bottom: 4rem;
-    }
-
     h1 {
       font-size: 4rem;
     }
 
-    .lead {
-      font-size: 1.5rem;
-    }
-
     .carbonad {
       margin-top: 3rem !important;
     }
   }
+}
 
-  @include media-breakpoint-up(lg) {
+.bd-pretext {
-    .lead {
+  overflow: hidden;
-      width: 85%;
+  resize: none;
-      font-size: 2rem;
+}
-    }
+
+.half-rule {
+  width: 6rem;
+  margin: 2.5rem 0;
+}
+
+.masthead-followup {
+  .bd-clipboard { display: none; }
+
+  .highlight {
+    padding: .5rem 0;
+    background-color: transparent;
   }
 }

assets/scss/_sidebar.scss

@@ -51,7 +51,7 @@
 
 .bd-sidebar {
   order: 0;
-  background-color: #f5f2f9;
+  // background-color: #f5f2f9;
   border-bottom: 1px solid rgba(0,0,0,.1);
 
   @include media-breakpoint-up(md) {

assets/scss/docs.scss

@@ -32,7 +32,6 @@
 @import "variables";
 @import "nav";
 @import "masthead";
-@import "featurettes";
 @import "featured-sites";
 @import "ads";
 @import "content";

docs/4.0/examples/index.md

@@ -1,6 +1,7 @@
 ---
 layout: simple
 title: Examples
+description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
 redirect_from:
   - /examples/
 ---

docs/4.0/extend/icons.md

@@ -17,6 +17,7 @@ We've tested and used these icon sets ourselves.
 ## More options
 While we haven't tried these out, they do look promising and provide multiple formats—including SVG.
 
+- [Bytesize](https://github.com/danklammer/bytesize-icons)
 - [Google Material icons](https://material.io/icons/)
 - [Ionicons](http://ionicons.com/)
 - [Feather](http://colebemis.com/feather/)

docs/4.0/utilities/borders.md

@@ -30,6 +30,7 @@ Change the border color using utilities built on our theme colors.
 {% example html %}
 {% for color in site.data.theme-colors %}
 <span class="border border-{{ color.name }}"></span>{% endfor %}
+<span class="border border-white"></span>
 {% endexample %}
 </div>
 

docs/4.0/utilities/colors.md

@@ -23,6 +23,7 @@ Similar to the contextual text color classes, easily set the background of an el
 {% example html %}
 {% for color in site.data.theme-colors %}
 <div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
+<div class="p-3 mb-2 bg-white text-gray-dark">.bg-white</div>
 {% endexample %}
 
 {% callout info %}

index.html

@@ -4,123 +4,89 @@ layout: home
 
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
-    {% include icons/bootstrap.svg class="mb-3" width="128" height="128" %}
+    <div class="row align-items-center">
-    <p class="lead">Bootstrap is the most popular HTML, CSS, and JS library in the world for building responsive, mobile-first projects on the web.</p>
+      <div class="col-6 mx-auto col-md-6 order-md-2">
-    <p class="lead">
+        <img src="{{ site.baseurl }}/assets/img/bootstrap-stack.png" alt="" class="img-fluid mb-3 mb-md-0">
-      <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-lg btn-bd-yellow" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>
+      </div>
-    </p>
+      <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
-    <p class="version">Currently v{{ site.current_version }}</p>
+        <h1 class="mb-3 bd-text-purple-bright">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.
+        </p>
+        <div class="d-flex flex-column flex-md-row lead mb-3">
+          <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 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/download/" class="btn btn-lg btn-outline-secondary" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
+        </div>
+        <p class="text-muted mb-0">
+          Currently v{{ site.current_version }}
+        </p>
+      </div>
+    </div>
     {% include ads.html %}
   </div>
 </main>
 
-<div class="bd-featurette">
+<div class="masthead-followup row m-0 border border-white">
-  <div class="container">
+  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
-    <h2 class="bd-featurette-title">Easy to get started</h2>
+    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
-    <p class="lead">Quickly include Bootstrap's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap CDN.</p>
+    <svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+      <path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />
+    </svg>
+    <h3>Installation</h3>
+    <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
 
-    <div class="row justify-content-center text-center">
+{% highlight sh %}
-      <div class="col-sm-6 col-md-5 mb-3 pr-md-4">
+npm install bootstrap@{{ site.current_version }}
-        <h4>Managed dependencies</h4>
+{% endhighlight %}
-        <p>Include Bootstrap's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our build system and readme.</p>
+
-        <p>
+{% highlight sh %}
-          <a class="btn btn-bd-purple" href="{{ site.baseurl }}/getting-started/download#package-managers">View install methods</a>
+gem install bootstrap -v 4.0.0.alpha6
-        </p>
+{% endhighlight %}
-      </div>
+
-      <div class="col-sm-6 col-md-5 mb-3 pl-md-4">
+{% highlight sh %}
-        <h4>Bootstrap CDN</h4>
+bower install bootstrap#v{{ site.current_version }}
-        <p>When you only need to include Bootstrap's compiled CSS and JS, you can use the Bootstrap CDN.</p>
+{% endhighlight %}
+    <hr class="half-rule">
+    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download">Read installation docs</a>
+  </div>
+
+  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
+    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
+    <svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+      <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />
+    </svg>
+    <h3>Bootstrap CDN</h3>
+    <p>When you only need to include Bootstrap's compiled CSS or JS, you can use the Bootstrap CDN.</p>
+
+<h5>CSS only</h5>
 {% highlight html %}
 <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
+{% endhighlight %}
+
+<h5>JS, Popper, and jQuery</h5>
+{% 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 %}
-      </div>
+    <hr class="half-rule">
-    </div>
+    <a class="btn btn-outline-primary" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/layout/overview/">Explore the docs</a>
-
-    <hr class="half-rule mx-auto">
-
-    <div class="text-center">
-      <p>
-        <strong>Looking for something else?</strong> Compiled builds of Bootstrap's CSS and JS are also available.
-      </p>
-      <a href="{{ site.baseurl }}/getting-started/download/" class="btn btn-bd-purple">More download options</a>
-    </div>
   </div>
-</div>
 
-<div class="bd-featurette">
+  <div class="col-12 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 -->
-    <h2 class="bd-featurette-title">Designed for everyone, everywhere</h2>
+    <svg class="text-primary mb-2" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-    <p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
+      <path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />
-
+    </svg>
-    <div class="row text-center">
+    <h3>Official Themes</h3>
-      <div class="col-sm-4 mb-3">
+    <p>
-        <img src="{{ site.baseurl }}/assets/img/sass.png" alt="Sass support" class="img-fluid">
+      Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
-        <h4>Preprocessor</h4>
-        <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
-      </div>
-      <div class="col-sm-4 mb-3">
-        <img src="{{ site.baseurl }}/assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
-        <h4>One framework, every device.</h4>
-        <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
-      </div>
-      <div class="col-sm-4 mb-3">
-        <img src="{{ site.baseurl }}/assets/img/components.png" alt="Components" class="img-fluid">
-        <h4>Full of features</h4>
-        <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
-      </div>
-    </div>
-
-    <hr class="half-rule mx-auto">
-
-    <div class="text-center">
-      <p>
-        <strong>Bootstrap is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.
-      </p>
-      <a href="{{ site.repo }}" class="btn btn-bd-purple">View the GitHub project</a>
-    </div>
-  </div>
-</div>
-
-<div class="bd-featurette">
-  <div class="container">
-    <h2 class="bd-featurette-title">Official Bootstrap Themes</h2>
-    <p class="lead">
-      Take Bootstrap to the next level with official premium themes. Each theme is its own toolkit featuring all of Bootstrap, brand new components and plugins, full docs, build tools, and more.
     </p>
-
+    <img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="1024" height="388">
-    <p class="lead">
+    <hr class="half-rule">
-      <a href="{{ site.themes }}" class="btn btn-lg btn-bd-purple">Browse themes</a>
+    <a href="{{ site.themes }}" class="btn btn-outline-primary">Browse themes</a>
-    </p>
-
-    <img class="img-fluid mx-auto" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
-  </div>
-</div>
-
-<div class="bd-featurette">
-  <div class="container">
-    <h2 class="bd-featurette-title">Built with Bootstrap</h2>
-    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="{{ site.baseurl }}/examples/">collection of examples</a> or by exploring some of our favorites.</p>
-
-    <div class="row bd-featured-sites">
-    {% for showcase in site.data.showcase %}
-      <div class="col-6 col-sm-3">
-        <a href="{{ showcase.expo_url }}" target="_blank" rel="noopener" title="{{ showcase.name }}">
-          <img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-fluid">
-        </a>
-      </div>
-    {% endfor %}
-    </div>
-
-    <hr class="half-rule mx-auto">
-
-    <div class="text-center">
-      <p>
-        We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.
-      </p>
-      <a href="{{ site.expo }}" class="btn btn-bd-purple">Explore the Expo</a>
-    </div>
   </div>
 </div>