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,6 +1,7 @@
 ---
 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.

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.