restore page headers, use partial and page frontmatter to organize it

docs/_data/nav.yml

@@ -50,25 +50,25 @@
     - title: Carousel
     - title: Utilities
 
-- title: Examples
-  pages:
-    - title: Starter template
-    - title: Grid
-    - title: Jumbotron
-    - title: Narrow jumbotron
-    - title: Navbar
-    - title: Navbar top
-    - title: Navbar top fixed
-    - title: Cover
-    - title: Album
-    - title: Carousel
-    - title: Blog
-    - title: Dashboard
-    - title: Sign-in page
-    - title: Justified nav
-    - title: Sticky footer
-    - title: Sticky footer with navbar
-    - title: Offcanvas
+# - title: Examples
+#   pages:
+#     - title: Starter template
+#     - title: Grid
+#     - title: Jumbotron
+#     - title: Narrow jumbotron
+#     - title: Navbar
+#     - title: Navbar top
+#     - title: Navbar top fixed
+#     - title: Cover
+#     - title: Album
+#     - title: Carousel
+#     - title: Blog
+#     - title: Dashboard
+#     - title: Sign-in page
+#     - title: Justified nav
+#     - title: Sticky footer
+#     - title: Sticky footer with navbar
+#     - title: Offcanvas
 
 # - title: Extend
 #   pages:

docs/_includes/page-headers.html

@@ -0,0 +1,31 @@
+{% if page.group == "getting-started" %}
+  <h1>Getting started</h1>
+  <p class="lead">
+    An overview of Bootstrap, how to download and use, basic templates and examples, and more.
+  </p>
+{% elsif page.group == "layout" %}
+  <h1>Layout</h1>
+  <p class="lead">
+    Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.
+  </p>
+{% elsif page.group == "components" %}
+  <h1>Components</h1>
+  <p class="lead">
+    Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
+  </p>
+{% elsif page.group == "javascript" %}
+  <h1>JavaScript plugins</h1>
+  <p class="lead">
+    Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
+  </p>
+{% elsif page.group == "about" %}
+  <h1>About</h1>
+  <p class="lead">
+    Learn about the project's history, meet the maintaining teams, and find out how to use the Bootstrap brand.
+  </p>
+{% elsif page.group == "migration" %}
+  <h1>Migration</h1>
+  <p class="lead">
+    Guidance on how to upgrade from Bootstrap v3.x to v4.x with emphasis on major changes, what's new, and what's been removed.
+  </p>
+{% endif %}

docs/_layouts/page.html

@@ -2,13 +2,19 @@
 layout: default
 ---
 
+<div class="bd-pageheader">
+  <div class="container">
+    {% include ads.html %}
+    {% include page-headers.html %}
+  </div>
+</div>
+
 <div class="container">
   <div class="row">
     <div class="col-sm-3 col-sm-push-9 bd-sidebar">
       {% include nav-docs.html %}
     </div>
     <div class="col-sm-9 col-sm-pull-3 bd-content">
-      {% include ads.html %}
       <h1 class="bd-title">{{ page.title }}</h1>
       {{ content }}
     </div>

docs/about/brand.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Brand guidelines
+group: about
 ---
 
 Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](http://mailchimp.com/about/brand-assets/).

docs/about/history.md

@@ -1,10 +1,11 @@
 ---
 layout: page
 title: History
+group: about
 ---
 
 Originally created by a designer and a developer at Twitter, Bootstrap has become one of the most popular front-end frameworks and open source projects in the world.
 
 Bootstrap was created at Twitter in mid-2010 by [@mdo](https://twitter.com/mdo) and [@fat](https://twitter.com/fat). Prior to being an open-sourced framework, Bootstrap was known as _Twitter Blueprint_. A few months into development, Twitter held its [first Hack Week](https://blog.twitter.com/2010/hack-week) and the project exploded as developers of all skill levels jumped in without any external guidance. It served as the style guide for internal tools development at the company for over a year before its public release, and continues to do so today.
 
-Originally [released](https://blog.twitter.com/2011/bootstrap-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.
+Originally [released](https://blog.twitter.com/2011/bootstrap-twitter) on [<time datetime="2011-08-19 11:25">Friday, August 19, 2011</time>](https://twitter.com/mdo/statuses/104620039650557952), we've since had over [twenty releases](https://github.com/twbs/bootstrap/releases), including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.

docs/about/license.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: License FAQs
+group: about
 ---
 
 Bootstrap is released under the MIT license and is copyright {{ site.time | date: "%Y" }} Twitter. Boiled down to smaller chunks, it can be described with the following conditions.

docs/about/team.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Team
+group: about
 ---
 
 Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.

docs/about/translations.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Translations
+group: about
 ---
 
 Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.

docs/assets/css/docs.min.css

@@ -5,7 +5,7 @@
  * details, see http://creativecommons.org/licenses/by/3.0/.
  */
 .bd-docs {
-  padding-top: 5rem; }
+  padding-top: 3.65rem; }
 
 .bd-container {
   position: relative;
@@ -41,7 +41,26 @@
     .bd-container > table td:first-child > code {
       white-space: nowrap; }
 
-.bd-content > h2 {
+.bd-pageheader {
+  margin-bottom: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  color: #cdbfe3;
+  background-color: #563d7c; }
+  .bd-pageheader h1 {
+    font-size: 4rem;
+    font-weight: normal;
+    color: #fff; }
+  .bd-pageheader p {
+    font-size: 1.5rem; }
+  @media (min-width: 34em) {
+    .bd-pageheader {
+      padding-top: 4rem;
+      padding-bottom: 4rem; }
+      .bd-pageheader .carbonad {
+        float: right; } }
+
+.bd-content > h2:not(:first-child) {
   margin-top: 3rem; }
 
 .bd-content > h3 {
@@ -53,9 +72,9 @@
 
 @media (min-width: 34em) {
   .bd-title {
-    font-size: 4rem; }
+    font-size: 3rem; }
     .bd-title + p {
-      font-size: 1.5rem;
+      font-size: 1.25rem;
       font-weight: 300; } }
 
 #markdown-toc > li:first-child {

docs/assets/scss/_layout.scss

@@ -1,6 +1,6 @@
 
 .bd-docs {
-  padding-top: 5rem;
+  padding-top: 3.65rem;
 }
 
 // Custom container
@@ -59,12 +59,39 @@
 }
 
 
+.bd-pageheader {
+  margin-bottom: 3rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  color: $bd-purple-light;
+  background-color: $bd-purple;
+
+  h1 {
+    font-size: 4rem;
+    font-weight: normal;
+    color: #fff;
+  }
+
+  p {
+    font-size: 1.5rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+
+    .carbonad {
+      float: right;
+    }
+  }
+}
+
 //
 // Docs sections
 //
 
 .bd-content {
-  > h2 {
+  > h2:not(:first-child) {
     margin-top: 3rem;
   }
 
@@ -80,10 +107,10 @@
 
 .bd-title {
   @include media-breakpoint-up(sm) {
-    font-size: 4rem;
+    font-size: 3rem;
 
     + p {
-      font-size: 1.5rem;
+      font-size: 1.25rem;
       font-weight: 300;
     }
   }

docs/components/alerts.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Alerts
+group: components
 ---
 
 Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

docs/components/breadcrumb.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Breadcrumb
+group: components
 ---
 
 Indicate the current page's location within a navigational hierarchy.

docs/components/button-dropdown.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Button dropdown
+group: components
 ---
 
 Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup.

docs/components/button-group.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Button group
+group: components
 ---
 
 Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with [our buttons plugin](../javascript/#buttons).

docs/components/buttons.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Buttons
+group: components
 ---
 
 Buttons are used to execute actions in forms, dialogs, and more. Use any of the available button classes to quickly create a styled button.

docs/components/card.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Cards
+group: components
 ---
 
 A **card** is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

docs/components/carousel.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Carousel
+group: components
 ---
 
 A slideshow component for cycling through elements—images or slides of text—like a carousel. **Nested carousels are not supported.**

docs/components/code.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Code
+group: components
 ---
 
 Styles for inline code snippets and longer, multiline blocks of code.

docs/components/collapse.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Collapse
+group: components
 ---
 
 Flexible plugin that utilizes a handful of classes for easy toggle behavior.

docs/components/dropdowns.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Dropdowns
+group: components
 ---
 
 Toggleable, contextual menu for displaying lists of links. Made interactive with the included dropdown JavaScript plugin.

docs/components/forms.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Forms
+group: components
 ---
 
 Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

docs/components/images.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Images
+group: components
 ---
 
 Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.

docs/components/input-group.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Input group
+group: components
 ---
 
 Easily extend form controls by adding text, buttons, or button groups on either side of textual `<input>`s.

docs/components/jumbotron.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Jumbotron
+group: components
 ---
 
 A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

docs/components/label.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Labels
+group: components
 ---
 
 Small and adaptive tag for adding context to just about any content.

docs/components/list-group.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: List group
+group: components
 ---
 
 List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

docs/components/modal.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Modal
+group: components
 ---
 
 Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

docs/components/navbar.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Navbar
+group: components
 ---
 
 The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.

docs/components/navs.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Navs
+group: components
 ---
 
 Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.

docs/components/pagination.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Pagination
+group: components
 ---
 
 Provide pagination links for your site or app with the multi-page pagination component, or the simpler [pager alternative](#pagination-pager).

docs/components/popovers.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Popovers
+group: components
 ---
 
 Add small overlays of content, like those found in iOS, to any element for housing secondary information.

docs/components/progress.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Progress
+group: components
 ---
 
 Stylize the HTML5 `<progress>` element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.

docs/components/reboot.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Reboot
+group: components
 ---
 
 Part of Bootstrap's job is to provide an elegant, consistent, and simple baseline to build upon. We use Reboot, a collection of element-specific CSS changes in a single file, to kickstart that.

docs/components/scrollspy.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Srollspy
+group: components
 ---
 
 ## Contents

docs/components/tables.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Tables
+group: components
 ---
 
 Due to the widespread use of tables across third-party widgets like calendars and date pickers, we've designed our tables to be **opt-in**. Just add the base class `.table` to any `<table>`.

docs/components/tooltips.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Tooltips
+group: components
 ---
 
 Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use CSS3 for animations, and data-attributes for local title storage.

docs/components/typography.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Typography
+group: components
 ---
 
 Bootstrap includes simple and easily customized typography for headings, body text, lists, and more. For even more control, check out the [textual utility classes](/components/utilities/).

docs/components/utilities.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Utility classes
+group: components
 ---
 
 Bootstrap includes dozens of utilities—classes with a single purpose. They're designed to reduce the frequency of highly repetitive declarations in your CSS down while allowing for quick and easy development.

docs/getting-started/accessibility.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Accessibility
+group: getting-started
 ---
 
 Bootstrap follows common web standards and—with minimal extra effort—can be used to create sites that are accessible to those using <abbr title="Assistive Technology" class="initialism">AT</abbr>.

docs/getting-started/community.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Community
+group: getting-started
 ---
 
 Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

docs/getting-started/compiling.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Compiling
+group: getting-started
 ---
 
 Bootstrap uses [Grunt](http://gruntjs.com) for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

docs/getting-started/contents.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Contents
+group: getting-started
 ---
 
 Bootstrap can come in one of two forms, as precompiled or source code. Learn more about each form's contents and structure below.

docs/getting-started/customize.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Customize CSS
+group: getting-started
 ---
 
 New to Bootstrap 4, variable-based customization is a way for folks to quickly enable or disable global styles across all of Bootstrap's CSS. Simply update a variable's value and recompile using our Gruntfile.

docs/getting-started/download.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Download
+group: getting-started
 ---
 
 Bootstrap is available for download via ZIP file in two flavors: precompiled CSS and Javascript, and the complete source code with documentation.

docs/getting-started/flexbox.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Flexbox
+group: getting-started
 ---
 
 Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.

docs/getting-started/javascript.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: JavaScript
+group: getting-started
 ---
 
 Bootstrap includes a handful of JavaScript to help bring some of our components to life. Learn more about how to include it, our data and programmatic API options, and more.
@@ -103,4 +104,3 @@ Bootstrap's plugins don't fall back particularly gracefully when JavaScript is d
 For simple transition effects, include `transition.js` once alongside the other JS files. If you're using the compiled (or minified) `bootstrap.js`, there is no need to include this—it's already there.
 
 Transition.js is a basic helper for `transitionEnd` events as well as a CSS transition emulator. It's used by the other plugins to check for CSS transition support and to catch hanging transitions.
-

docs/getting-started/overview.md

@@ -1,9 +1,10 @@
 ---
 layout: page
-title: Getting started
+title: Start using Bootstrap
+group: getting-started
 ---
 
-Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcdn.com), graciously provided by the [MaxCDN](http://www.maxcdn.com/) folks.
+Quickly add Bootstrap to your project via the Bootstrap CDN, graciously provided by the MaxCDN folks.
 
 ## Include CSS and JS
 

docs/getting-started/support.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Supported platforms
+group: getting-started
 ---
 
 Bootstrap is built to work best with the latest techniques. As such, older desktop and mobile browsers may display differently, but should remain fully functional.

docs/getting-started/template.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Basic template
+group: getting-started
 ---
 
 Start with this basic HTML template, or modify [these examples](../examples/). We hope you'll customize our templates and examples, adapting them to suit your needs.

docs/getting-started/third-party-support.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Third party support
+group: getting-started
 ---
 
 While we don't officially support any third party plugins or add-ons, we do offer some useful advice to help avoid potential issues in your projects.

docs/layout/containers.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Containers
+group: layout
 ---
 
 Bootstrap requires a containing element to wrap site contents and house our grid system. Choose from the fixed or fluid width variation.

docs/layout/grid.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Grid system
+group: layout
 ---
 
 Bootstrap includes a powerful mobile-first grid system for building layouts of all shapes and sizes based on a 12 column layout.

docs/layout/media-queries.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Media queries
+group: layout
 ---
 
 Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components.

docs/layout/media.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Media
+group: layout
 ---
 
 Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.

docs/layout/responsive-utilities.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Responsive utilities
+group: layout
 ---
 
 For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

docs/layout/scaffolding.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Scaffolding
+group: layout
 ---
 
 The scaffolding of Bootstrap refers to our general approach to building the project. It outlines the basic document requirements and project dependencies.

docs/migration.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Migrating to v4
+group: migration
 ---
 
 Bootstrap 4 is a major rewrite of almost the entire project. The most notable changes are summarized immediately below, followed by more specific class and behavioral changes to relevant components.