customized jekyll plugin to generate package versions for documentation based on the bower and npm files so the docs can't get out of date with the distribution.

Gruntfile.js

@@ -423,7 +423,9 @@ module.exports = function (grunt) {
       },
       pages: {
         options: {
-          remote: 'git@github.com:twbs/derpstrap.git',
+          // FIXME: change this when we are ready!!!
+          //remote: 'git@github.com:FezVrasta/bootstrap-material-design.git',
+          remote: 'git@github.com:rosskevin/bootstrap-material-design.git',
           branch: 'gh-pages'
         }
       }

_config.yml

@@ -30,12 +30,10 @@ gems:
   - jekyll-sitemap
 
 # Custom vars
-current_version:  4.0.0-alpha
+#current_version:  4.0.0-alpha
 repo:             https://github.com/fezvrasta/bootstrap-material-design
 
-download:
+# other variables generated in
-  source:         https://github.com/fezvrasta/bootstrap-material-design/archive/v0.4.1.zip
-  dist:           https://github.com/fezvrasta/bootstrap-material-design/releases/download/v0.4.1/bootstrap-0.4.1-dist.zip
 
 #blog:             http://blog.getbootstrap.com
 #expo:             http://expo.getbootstrap.com
@@ -48,4 +46,11 @@ cdn:
 #  css_hash:       "sha384-XXXXXXXX"
   js:             https://cdn.rawgit.com/fezvrasta/bootstrap-material-design/v4-dev/dist/js/bootstrap-material-design.js
 #  js_hash:        "sha384-XXXXXXXX"
-  jquery:         https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js
+
+  # fonts
+  font_roboto:    http://fonts.googleapis.com/css?family=Roboto:300,400,500,700
+  font_icons:     https://fonts.googleapis.com/icon?family=Material+Icons
+
+  # VERSION is substituted in variables.rb and these are made available as site.data.cdn.*
+  jquery:         https://ajax.googleapis.com/ajax/libs/jquery/VERSION/jquery.min.js
+  bootstrap:      https://cdn.rawgit.com/twbs/bootstrap/VERSION/dist/js/bootstrap.js

docs/_includes/footer.html

@@ -2,29 +2,31 @@
   <div class="container">
     <ul class="bd-footer-links">
       <li><a href="{{ site.repo }}">GitHub</a></li>
-      <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
       <li><a href="{{ site.baseurl }}/examples/">Examples</a></li>
       <li><a href="{{ site.baseurl }}/about/history/">About</a></li>
     </ul>
     <p>
       Designed and built
-      by Federico Zivolo <a href="https://github.com/FezVrasta" target="_blank">@FezVrasta</a>
+      by Federico Zivolo <span class="text-muted">(<a href="https://github.com/FezVrasta" target="_blank">@FezVrasta</a>)</span>
-      and Kevin Ross <a href="https://github.com/rosskevin" target="_blank">@rosskevin</a>.
+      and Kevin Ross <span class="text-muted">(<a href="https://github.com/rosskevin" target="_blank">@rosskevin</a>)</span>.
       Maintained by our core team with the help of <a href="https://github.com/FezVrasta/bootstrap-material-design/graphs/contributors">our contributors</a>.
     </p>
-    <p>Currently v{{ site.current_version }}. Code licensed <a rel="license" href="https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
+    <p>Code licensed <a rel="license" href="https://github.com/FezVrasta/bootstrap-material-design/blob/master/LICENSE" target="_blank">MIT</a>, docs <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a>.</p>
+    <p>Currently v{{ site.data.version }}, a customization of <a href="http://getbootstrap.com" target="_other">Bootstrap v{{ site.data.bootstrap_version }}</a>. </p>
   </div>
 </footer>
 
-<script src="{{ site.cdn.jquery }}"></script>
+
+<script src="{{ site.data.cdn.jquery }}"></script>
 <script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>
+<script src="{{ site.data.cdn.bootstrap }}"></script>
 
 <script src="{{ site.baseurl }}/assets/js/vendor/tether.min.js"></script>
 
 {% if site.github %}
-  <script src="{{ site.baseurl }}/dist/js/bootstrap.min.js"></script>
+  <script src="{{ site.baseurl }}/dist/js/{{ site.data.name }}.min.js"></script>
 {% else %}
-  <script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
+  <script src="{{ site.baseurl }}/dist/js/{{ site.data.name }}.js"></script>
 {% endif %}
 
 {% if site.github %}
@@ -57,7 +59,11 @@ SimpleJekyllSearch.init({
 Holder.addTheme('gray', {
   background: '#777',
   foreground: 'rgba(255,255,255,.75)',
-  font: 'Helvetica',
+  font: 'Roboto',
   fontweight: 'normal'
 })
 </script>
+<script>
+  $.bootstrapMaterialDesign()
+</script>
+

docs/_includes/header.html

@@ -13,8 +13,8 @@
   {% endif %}
 </title>
 
-<!-- Bootstrap core CSS -->
+<!-- Material Design for Bootstrap CSS (includes a compiled/customized version of Bootstrap) -->
-<link href="{{ site.baseurl }}/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">
 
 <!-- Documentation extras -->
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">

docs/_includes/nav-home.html

@@ -3,7 +3,7 @@
   <nav class="nav navbar-nav pull-right">
     <div class="nav-item dropdown">
       <a class="nav-item nav-link dropdown-toggle" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        v{{ site.current_version }}
+        v{{ site.data.version }}
       </a>
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
         <a class="dropdown-item" href="#">v4.0.0-alpha</a>

docs/_plugins/bridge.rb

@@ -1,10 +1,11 @@
+require 'json'
 require 'yaml'
 
 module Bridge
   class Generator < Jekyll::Generator
     def generate(site)
-      path = File.join(site.source, "../grunt/configBridge.json")
+      config_bridge_json = File.join(site.source, '../grunt/configBridge.json')
-      site.data["configBridge"] = YAML.load_file(path)
+      site.data['configBridge'] = YAML.load_file(config_bridge_json)
     end
   end
 end

docs/_plugins/variables.rb

@@ -0,0 +1,53 @@
+require 'json'
+require 'yaml'
+
+module Variables
+  class Generator < Jekyll::Generator
+    safe true
+
+    def generate(site)
+      metadata_files = {
+        'bower' => '../bower.json',
+        'package' => '../package.json',
+        'bower_jquery' => '../bower_components/jquery/bower.json'
+      }
+
+      metadata_files.each do |metadata, path|
+        contents = JSON.parse(File.read(File.join(site.source, path)))
+        site.data[metadata] = contents
+      end
+
+      # some quick access to common variables (instead of diving into package and bower)
+      name = site.data['package']['name']
+      version = site.data['package']['version']
+      bootstrap_version = site.data['bower']['dependencies']['bootstrap']
+      jquery_version = site.data['bower_jquery']['version']
+
+      site.data['name'] = name
+      site.data['version'] = version
+      site.data['bootstrap_version'] = bootstrap_version
+      site.data['jquery_version'] = jquery_version
+
+
+      # fabricate the archive and release links based on the site.repo and version
+      jekyll_config = Jekyll.configuration({})
+      repo = jekyll_config['repo']
+      site.data['download'] = {
+        'source' => "#{repo}/archive/v#{version}.zip",
+        'dist' => "#{repo}/releases/download/v#{version}/#{name}-#{version}-dist.zip"
+      }
+
+      site.data['cdn'] = {
+        'jquery' => jekyll_config['cdn']['jquery'].gsub(/VERSION/, jquery_version),
+        'bootstrap' => jekyll_config['cdn']['bootstrap'].gsub(/VERSION/, bootstrap_version)
+      }
+
+      #
+      puts "\n---------------------"
+      # puts site.data[:package]['version']
+      # puts site.data.to_yaml
+      puts repo
+      puts version
+    end
+  end
+end

docs/examples/index.md

@@ -3,7 +3,7 @@ layout: simple
 title: Examples
 ---
 
-[Download the Bootstrap source code]({{ site.download.source }}) to snag these examples.
+[Download the Bootstrap source code]({{ site.data.download.source }}) to snag these examples.
 
 ## Framework
 

docs/getting-started/download.md

@@ -4,7 +4,7 @@ title: Download
 group: getting-started
 ---
 
-**Material Design for Bootstrap v{{ site.current_version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
+**Material Design for Bootstrap v{{ site.data.version}}** is available for download in several ways, including some of your favorite package managers. Choose from the options below to snag just what you need.
 
 <div class="row m-t-md">
   <div class="col-sm-6">
@@ -13,7 +13,7 @@ group: getting-started
 Download just the compiled and minified CSS and JavaScript. Doesn't include any documentation or original source files.
 
 {% comment %}
-<a href="{{ site.download.dist }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Material Design for Bootstrap</a>
+<a href="{{ site.data.download.dist }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download compiled');">Download Material Design for Bootstrap</a>
 {% endcomment %}
 <span class="text-muted">Coming soon!</span>
 {% endmarkdown %}
@@ -23,7 +23,7 @@ Download just the compiled and minified CSS and JavaScript. Doesn't include any
 ### Source files
 Download everything: source Sass, JavaScript, and documentation files. **Requires a Sass compiler, [Autoprefixer](https://github.com/postcss/autoprefixer), and [some setup]({{ site.baseurl }}/getting-started/build-tools/#tooling-setup).**
 
-<a href="{{ site.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
+<a href="{{ site.data.download.source }}" class="btn btn-bs btn-outline" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
 {% endmarkdown %}
   </div>
 </div>
@@ -40,13 +40,13 @@ Pull in Material Design for Bootstrap's **source files** into nearly any project
 
 Install and manage Material Design for Bootstrap's Sass and JavaScript using [Bower](http://bower.io).
 
-{% highlight bash %}$ bower install bootstrap-material-design#v{{ site.current_version }}{% endhighlight %}
+{% highlight bash %}$ bower install bootstrap-material-design#v{{ site.data.version }}{% endhighlight %}
 
 ### npm
 
 Install Material Design for Bootstrap in your Node powered apps with [the npm package](https://www.npmjs.org/package/bootstrap):
 
-{% highlight bash %}$ npm install bootstrap@{{ site.current_version }}{% endhighlight %}
+{% highlight bash %}$ npm install bootstrap@{{ site.data.version }}{% endhighlight %}
 
 `require('bootstrap-material-design')` will load all of Material Design for Bootstrap's jQuery plugins onto the jQuery object. The `bootstrap` module itself does not export anything. You can manually load Material Design for Bootstrap's jQuery plugins individually by loading the `/js/*.js` files under the package's top-level directory.
 
@@ -58,7 +58,7 @@ Material Design for Material Design for Bootstrap's `package.json` contains some
 ### Meteor
 
 {% highlight bash %}
-$ meteor add FezVrasta/bootstrap-material-design@={{ site.current_version }}
+$ meteor add FezVrasta/bootstrap-material-design@={{ site.data.version }}
 {% endhighlight %}
 
 ### Composer

docs/getting-started/introduction.md

@@ -21,17 +21,26 @@ Looking to quickly add Material Design for Bootstrap to your project? Use the Ma
 provided for free by the folks at MaxCDN. Using a package manager or need to download the source files? 
 [Head to the downloads page.]({{ site.baseurl }}/getting-started/download)
 
-Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
+Copy-paste the font and stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
 
 {% highlight html %}
+<!-- Material Design fonts -->
+<link rel="stylesheet" href="{{ site.cdn.font_roboto }}">
+<link rel="stylesheet" href="{{ site.cdn.font_icons }}">
+
+<!-- Material Design for Bootstrap -->
 <link rel="stylesheet" href="{{ site.cdn.css }}">
 {% endhighlight %}
 
-Add our JavaScript plugins and jQuery near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
+Add jQuery, Bootstrap, and our Javascript plugins near the end of your pages, right before the closing `</body>` tag. Be sure to place jQuery first as our code depends on it.
 
 {% highlight html %}
-<script src="{{ site.cdn.jquery }}"></script>
+<script src="{{ site.data.cdn.jquery }}"></script>
+<script src="{{ site.data.cdn.bootstrap }}"></script>
 <script src="{{ site.cdn.js }}"></script>
+<script>
+  $.bootstrapMaterialDesign()
+</script>
 {% endhighlight %}
 
 And that's it—you're on your way to a fully Material Design for Bootstrapped site. If you're at all unsure about the general page structure, keep reading for an example page template.
@@ -56,18 +65,22 @@ Put it all together and your pages should look like this:
     <meta http-equiv="x-ua-compatible" content="ie=edge">
 
     <!-- Material Design fonts -->
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
+    <link rel="stylesheet" href="{{ site.cdn.font_roboto }}">
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="{{ site.cdn.font_icons }}">
     
-    <!-- Material Design for Bootstrap CSS -->
+    <!-- Material Design for Bootstrap -->
-    <link rel="stylesheet" href="{{ site.cdn.css }}" integrity="{{ site.cdn.css_hash }}" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ site.cdn.css }}">
   </head>
   <body>
     <h1>Hello, world!</h1>
 
-    <!-- jQuery first, then Material Design for Bootstrap JS. -->
+    <!-- jQuery first, then Bootstrap and Material Design for Bootstrap JS. -->
-    <script src="{{ site.cdn.jquery }}"></script>
+    <script src="{{ site.data.cdn.jquery }}"></script>
-    <script src="{{ site.cdn.js }}" integrity="{{ site.cdn.js_hash }}" crossorigin="anonymous"></script>
+    <script src="{{ site.data.cdn.bootstrap }}"></script>
+    <script src="{{ site.cdn.js }}"></script>
+    <script>
+      $.bootstrapMaterialDesign()
+    </script>
   </body>
 </html>
 {% endhighlight %}

docs/getting-started/javascript.md

@@ -17,7 +17,7 @@ Plugins can be included individually (using Bootstrap's individual `*.js` files)
 
 ## Dependencies
 
-Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.current_version }}/bower.json) to see which versions of jQuery are supported.
+Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included **before** the plugin files). [Consult our `bower.json`]({{ site.repo }}/blob/v{{ site.data.version }}/bower.json) to see which versions of jQuery are supported.
 
 ## Data attributes
 
@@ -86,7 +86,7 @@ $('#myModal').on('show.bs.modal', function (e) {
 The version of each of Bootstrap's jQuery plugins can be accessed via the `VERSION` property of the plugin's constructor. For example, for the tooltip plugin:
 
 {% highlight js %}
-$.fn.tooltip.Constructor.VERSION // => "{{ site.current_version }}"
+$.fn.tooltip.Constructor.VERSION // => "{{ site.data.version }}"
 {% endhighlight %}
 
 ## No special fallbacks when JavaScript is disabled

docs/index.html

@@ -5,12 +5,12 @@ title: Material Design for Bootstrap, the world's most popular mobile-first and
 
 <main class="bd-masthead" id="content" role="main">
   <div class="container">
-    <span class="bd-booticon outline">BMD</span>
+    <span class="bd-booticon outline">MDB</span>
     <p class="lead">Material Design for Bootstrap, the world's most popular mobile-first and responsive front-end framework.</p>
     <p class="lead">
-      <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download</a>
+      <a href="{{ site.baseurl }}/getting-started/download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.data.version }}');">Download</a>
     </p>
-    <p class="version">Currently v{{ site.current_version }}</p>
+    <p class="version">Currently v{{ site.data.version }}</p>
     {% include ads.html %}
   </div>
 </main>

docs/migration.md

@@ -4,7 +4,8 @@ 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.
+Material Design for 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.
 
 {% callout info %}
 **Heads up!** This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we'd love pull requests to help keep it up to date.
@@ -12,7 +13,7 @@ Bootstrap 4 is a major rewrite of almost the entire project. The most notable ch
 
 ## Summary
 
-Here are the big ticket items you'll want to be aware of when moving from v3 to v4.
+Here are the big ticket items you'll want to be aware of when moving from MDB v3 to v4.
 
 ### Browser support
 
@@ -39,7 +40,7 @@ Here are the big ticket items you'll want to be aware of when moving from v3 to
 - Refactored nearly all components to use more unnested classes instead of children selectors.
 
 ### Misc
-- Non-responsive usage of Bootstrap is no longer supported.
+- Non-responsive usage of Material Design for Bootstrap is no longer supported.
 - Dropped the online Customizer in favor of more extensive setup documentation and customized builds.
 
 ## By component
@@ -48,7 +49,7 @@ This list highlights key changes by component between v3.x.x and v4.0.0.
 
 ### Reboot
 
-New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border` change, moving from `rem` to `em` units on many elements, link styles, and many form element resets.
+New to Material Design for Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the `box-sizing: border` change, moving from `rem` to `em` units on many elements, link styles, and many form element resets.
 
 ### Typography
 
@@ -137,7 +138,7 @@ Our documentation received an upgrade across the board as well. Here's the low d
   - `callout.rb` is a similar fork of that, but designed for our special docs callouts.
 - All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
 - Pages have been reorganized for simpler content and a more approachable hierarchy.
-- We moved from regular CSS to SCSS to take full advantage of Bootstrap's variables, mixins, and more.
+- We moved from regular CSS to SCSS to take full advantage of Material Design for Bootstrap's variables, mixins, and more.
 
 ## What's new
 

js/src/old/ripples.js

@@ -304,17 +304,17 @@
   //    });
   //  }
   //};
-
+  //
-
+  //
-  /**
+  ///**
-   * Create the jquery plugin function
+  // * Create the jquery plugin function
-   */
+  // */
-  $.fn.ripples = function(options) {
+  //$.fn.ripples = function(options) {
-    return this.each(function() {
+  //  return this.each(function() {
-      if(!$.data(this, "plugin_" + ripples)) {
+  //    if(!$.data(this, "plugin_" + ripples)) {
-        $.data(this, "plugin_" + ripples, new Ripples(this, options));
+  //      $.data(this, "plugin_" + ripples, new Ripples(this, options));
-      }
+  //    }
-    });
+  //  });
-  };
+  //};
 
 })(jQuery, window, document);

package.json

@@ -102,5 +102,3 @@
     }
   }
 }
-
-