wip #803 examples section in the docs

Gruntfile.js

@@ -73,7 +73,7 @@ module.exports = function (grunt) {
       'dist-css': 'dist/css',
       'dist-js': 'dist/js',
       'docs-dist-js': 'docs/dist/js',
-      'docs-dist-css': 'docs/dist/css',
+      'docs-dist-css': 'docs/dist/css'
     },
 
     eslint: {
@@ -263,6 +263,15 @@ module.exports = function (grunt) {
     },
 
     copy: {
+      'dist-to-docs': {  // for example templates
+        expand: true,
+        cwd: 'dist',
+        src: [
+          'js/*.iife*',
+          'css/*.*'
+        ],
+        dest: 'docs/dist/'
+      },
       'bs-docs-js-vendor': {
         expand: true,
         cwd: '../bootstrap/docs/assets/js/vendor',
@@ -276,9 +285,7 @@ module.exports = function (grunt) {
       'bs-docs-plugins': {
         expand: true,
         cwd: '../bootstrap/docs/_plugins',
-        src: [
-          '**/*', '!bridge.rb'
-        ],
+        src: ['**/*', '!bridge.rb'],
         dest: 'docs/_plugins/'
       },
 
@@ -346,20 +353,6 @@ module.exports = function (grunt) {
           '**/*'
         ],
         dest: 'docs/content/'
-      },
-      'bs-docs-examples': {
-        options: {
-          // //https://regex101.com/r/cZ7aO8/2
-          process: function (content, srcpath) {
-            return content.replace(/(---[\s\S]+?---)([\s\S]+)/mg, referenceDocNotice);
-          }
-        },
-        expand: true,
-        cwd: '../bootstrap/docs/examples',
-        src: [
-          '**/*'
-        ],
-        dest: 'docs/examples/'
       }
     },
 
@@ -608,7 +601,6 @@ module.exports = function (grunt) {
     'copy:bs-docs-getting-started',
     'copy:bs-docs-components',
     'copy:bs-docs-content',
-    'copy:bs-docs-examples',
     'copy:bs-docs-plugins'
   ]);
 

docs/_includes/footer-example.html

@@ -0,0 +1,19 @@
+<script src="{{ site.data.cdn.jquery }}"></script>
+<script src="{{ site.data.cdn.tether }}"></script>
+<script src="{{ site.data.cdn.bootstrap }}"></script>
+
+{% if site.data.minified %}
+  <script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.iife.min.js"></script>
+{% else %}
+  <script src="{{ site.baseurl }}/dist/js/bootstrap-material-design.iife.js"></script>
+{% endif %}
+
+<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
+<script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
+<script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>
+
+<script>
+  $(function() {
+    $('body').bootstrapMaterialDesign()
+  });
+</script>

docs/_includes/header-example.html

@@ -0,0 +1,12 @@
+{% include meta.html %}
+
+<!-- Material Design fonts -->
+<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
+<!-- Material Design for Bootstrap generic -->
+{% if site.data.minified %}
+<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">
+{% else %}
+<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.css" rel="stylesheet">
+{% endif %}

docs/_includes/header.html

@@ -1,17 +1,4 @@
-<meta charset="utf-8">
-<meta http-equiv="X-UA-Compatible" content="IE=edge">
-<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-<meta name="description" content="Material Design for Bootstrap">
-<meta name="keywords" content="Material Design for Bootstrap, Sass">
-<meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors">
-
-<title>
-  {% if page.layout == "home" %}
-    {{ page.title }}
-  {% else %}
-    {{ page.title }} &middot; Bootstrap Material Design
-  {% endif %}
-</title>
+{% include meta.html %}
 
 <!-- Material Design fonts -->
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

docs/_includes/meta.html

@@ -0,0 +1,14 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="description" content="Material Design for Bootstrap">
+<meta name="keywords" content="Material Design for Bootstrap, Sass">
+<meta name="author" content="Federico Zivolo, Kevin Ross, and Bootstrap Material Design contributors">
+
+<title>
+  {% if page.layout == "home" %}
+    {{ page.title }}
+  {% else %}
+    {{ page.title }} &middot; Bootstrap Material Design
+  {% endif %}
+</title>

docs/_layouts/example.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    {% include header-example.html %}
+  </head>
+  <body>
+    {{ content }}
+
+    {% include footer-example.html %}
+  </body>
+</html>

docs/examples/index.md

@@ -3,31 +3,29 @@ layout: simple
 title: Examples
 ---
 
-[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
-
-{% callout info %}
-**Bootstrap Reference Documentation** 
-This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>. 
-It is included here to demonstrate rendering with Material Design for Bootstrap default styling. 
-See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
-{% endcallout %}
-
-
-
-[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
-
 ## Framework
 
 Examples that focus on implementing uses of built-in components provided by Bootstrap.
 
 <div class="row bd-examples">
+
+  <div class="card card-block col-xs-6 col-md-4">
+    <h4 class="card-title">Starter Template</h4>
+    <p class="card-text">Nothing but the basics: compiled CSS and JavaScript.</p>
+    <!--a href="{{ site.baseurl }}/examples/starter-template/" class="card-link"><i class="material-icons">launch</i></a-->
+    <a href="{{ site.baseurl }}/examples/starter-template/" class="btn btn-primary"><i class="material-icons">launch</i> Launch</a>
+  </div>
+
+<!--
   <div class="col-xs-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/starter-template/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/starter-template.jpg" alt="">
-    </a>
       <h4>Starter template</h4>
       <p>Nothing but the basics: compiled CSS and JavaScript.</p>
+    </a>
   </div>
+ -->
+ 
   <div class="col-xs-6 col-md-4">
     <a href="{{ site.baseurl }}/examples/grid/">
       <img class="img-thumbnail" src="{{ site.baseurl }}/examples/screenshots/grid.jpg" alt="">

docs/examples/starter-template/index.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <link rel="icon" href="../../favicon.ico">
-
-    <title>Starter Template for Bootstrap</title>
-
-    <!-- Bootstrap core CSS -->
-    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
-
-    <!-- Custom styles for this template -->
-    <link href="starter-template.css" rel="stylesheet">
-  </head>
-
-  <body>
-
-    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
-      <a class="navbar-brand" href="#">Project name</a>
-      <ul class="nav navbar-nav">
-        <li class="nav-item active">
-          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">About</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Contact</a>
-        </li>
-      </ul>
-    </nav>
-
-    <div class="container">
-
-      <div class="starter-template">
-        <h1>Bootstrap starter template</h1>
-        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
-      </div>
-
-    </div><!-- /.container -->
-
-
-    <!-- Bootstrap core JavaScript
-    ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
-    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js"></script>
-    <script src="../../dist/js/bootstrap.min.js"></script>
-    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
-    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
-  </body>
-</html>

docs/examples/starter-template/index.md

@@ -0,0 +1,12 @@
+---
+layout: example
+title: Starter Template
+group: material-design
+---
+
+<div class="container">
+
+    <h1>Bootstrap starter template</h1>
+    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
+
+</div>

docs/examples/starter-template/starter-template.css

@@ -1,7 +0,0 @@
-body {
-  padding-top: 5rem;
-}
-.starter-template {
-  padding: 3rem 1.5rem;
-  text-align: center;
-}

docs/examples/test/index.md

@@ -0,0 +1,7 @@
+---
+layout: example
+title: Test
+group: material-design
+---
+
+<button type="button" class="btn btn-primary">Primary</button>