Merge pull request #182 from Daemonite/v4-dev

v4.1.1

Gemfile

@@ -1,7 +1,7 @@
 source 'https://rubygems.org'
 
 group :development, :test do
-  gem 'jekyll', '~> 3.7.0'
+  gem 'jekyll', '~> 3.8.0'
   gem 'jekyll-redirect-from', '~> 0.13.0'
   gem 'jekyll-sitemap', '~> 1.2.0'
   gem 'jekyll-toc', '~> 0.5.1'

Gemfile.lock

@@ -14,7 +14,7 @@ GEM
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.7.3)
+    jekyll (3.8.0)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -56,7 +56,7 @@ GEM
     rouge (3.1.1)
     ruby_dep (1.5.0)
     safe_yaml (1.0.4)
-    sass (3.5.5)
+    sass (3.5.6)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -66,7 +66,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  jekyll (~> 3.7.0)
+  jekyll (~> 3.8.0)
   jekyll-redirect-from (~> 0.13.0)
   jekyll-sitemap (~> 1.2.0)
   jekyll-toc (~> 0.5.1)

README.md

@@ -20,7 +20,6 @@ Because these components will require additional markup (some may require additi
 - [Content](#content)
 - [Documentation](#documentation)
 - [Quick start](#quick-start)
-- [Roadmap](#roadmap)
 
 ## Content
 
@@ -83,17 +82,3 @@ Several quick start options are available:
 - Download the [latest release](https://github.com/Daemonite/material/releases)
 - Install with [bower](https://bower.io/): `bower install daemonite-material`
 - Install with [npm](https://www.npmjs.com/): `npm install daemonite-material`
-
-## Roadmap
-
-### Near-term
-
-Bug fixes and updates alongside Bootstrap 4's continuous releases.
-
-### Mid-term
-
-Add missing support for some Google Material Design components (e.g. snackbars).
-
-### Long-term
-
-Rewrite all JavaScript plugins in ES6 to take advantage of the newest JavaScript enhancements.

_config.yml

@@ -4,6 +4,11 @@ kramdown:
   auto_ids:       true
 markdown:         kramdown
 
+# minify
+compress_html:
+  blanklines:     true
+  clippings:      all
+
 # permalinks
 permalink:        pretty
 
@@ -52,24 +57,24 @@ toc:
 
 # vars
 cdn:
-  bs_css:         "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
-  bs_css_docs:    "https://getbootstrap.com/assets/css/docs.min.css"
-  bs_css_hash:    "sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
-  bs_js:          "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
-  bs_js_docs:     "https://getbootstrap.com/assets/js/docs.min.js"
-  bs_js_hash:     "sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
+  bs_css:         "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
+  bs_css_docs:    "https://getbootstrap.com/docs/4.1/assets/css/docs.min.css"
+  bs_css_hash:    "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
+  bs_js:          "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"
+  bs_js_hash:     "sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
   jquery:         "https://code.jquery.com/jquery-3.3.1.slim.min.js"
   jquery_hash:    "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
   md_font:        "https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700"
   md_icon:        "https://fonts.googleapis.com/icon?family=Material+Icons"
-  popper:         "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
-  popper_hash:    "sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
-current_version:  "4.1.0"
+  popper:         "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
+  popper_hash:    "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
+current_version:  "4.1.1"
 docs_version:     "4.1"
 download:
-  source:         "https://github.com/Daemonite/material/archive/v4.1.0.zip"
-  dist:           "https://github.com/Daemonite/material/releases/download/v4.1.0/material-4.1.0-dist.zip"
+  source:         "https://github.com/Daemonite/material/archive/v4.1.1.zip"
+  dist:           "https://github.com/Daemonite/material/releases/download/v4.1.1/material-4.1.1-dist.zip"
 id:
+  main:           "doc-main-h1"
   navbar:         "doc-navbar"
   navdrawer:      "doc-navdrawer"
 repo:             "https://github.com/Daemonite/material"

_data/breakpoints.yml

@@ -0,0 +1,29 @@
+- breakpoint: xs
+  abbr: ""
+  name: Extra small
+  min-width: 0px
+  container: ""
+
+- breakpoint: sm
+  abbr: -sm
+  name: Small
+  min-width: 576px
+  container: 540px
+
+- breakpoint: md
+  abbr: -md
+  name: Medium
+  min-width: 768px
+  container: 720px
+
+- breakpoint: lg
+  abbr: -lg
+  name: Large
+  min-width: 992px
+  container: 960px
+
+- breakpoint: xl
+  abbr: -xl
+  name: Extra large
+  min-width: 1200px
+  container: 1140px

_data/nav.yml

@@ -71,14 +71,14 @@
     - title: Colours
     - title: Data tables
     - title: Dialogs
+    - title: Elevation and shadows
     - title: Expansion panels
     - title: Icons
     - title: Menu
     - title: Navigation drawer
     - title: Pickers
     - title: Progress
     - title: Selection controls
-    - title: Shadows
     - title: Snackbars
     - title: Steppers
     - title: Tabs

_includes/callout-danger-async-methods.md

@@ -1,8 +1,6 @@
 {% capture callout %}
-#### Asynchronous methods and transitions
+##### Asynchronous methods and transitions
 
 All API methods are **asynchronous** and start a **transition**. They returns to the caller as soon as the transition is started but **before it ends**. In addition, a method call on a **transitioning component will be ignored**.
-
-[See our Javascript documentation for more informations.]({{ site.baseurl }}/getting-started/javascript/#content)
 {% endcapture %}
 {% include callout.html content=callout type="danger" %}

_includes/callout-info-mediaqueries-breakpoints.md

@@ -1,4 +1,4 @@
 {% capture callout %}
 Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
 {% endcapture %}
-{% include callout.html content=callout type="info" %}
+{% include callout.html content=callout type="info" %}

_includes/callout-warning-color-assistive-technologies.md

@@ -1,6 +1,6 @@
 {% capture callout %}
-### Conveying meaning to assistive technologies
+##### Conveying meaning to assistive technologies
 
 Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the `.sr-only` class.
 {% endcapture %}
-{% include callout.html content=callout type="info" %}
+{% include callout.html content=callout type="warning" %}

_includes/footer.html

@@ -1,3 +1,4 @@
+
 <!-- JavaScript -->
 <script crossorigin="anonymous" integrity="{{ site.cdn.jquery_hash }}" src="{{ site.cdn.jquery }}"></script>
 <script crossorigin="anonymous" integrity="{{ site.cdn.popper_hash }}" src="{{ site.cdn.popper }}"></script>
@@ -7,5 +8,5 @@
 <script src="{{ site.baseurl }}/js/material.min.js"></script>
 
 <!-- Additional JavaScript for documentation site -->
-<script src="{{ site.cdn.bs_js_docs }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
 <script src="{{ site.baseurl }}/docs/js/docs.min.js"></script>

_includes/header.html

@@ -1,3 +1,4 @@
+
 <meta charset="utf-8">
 <meta content="initial-scale=1, shrink-to-fit=no, width=device-width" name="viewport">
 <title>{% if page.title %}{{ page.title }} &middot; {% endif %}{{ site.title }}</title>
@@ -11,6 +12,7 @@
 <link href="{{ site.baseurl }}/css/material.min.css" rel="stylesheet">
 
 <!-- Additional CSS for documentation site -->
+<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
 <link href="{{ site.cdn.bs_css_docs }}" rel="stylesheet">
 <link href="{{ site.baseurl }}/docs/css/docs.min.css" rel="stylesheet">
 

_includes/nav-navdrawer.html

@@ -9,50 +9,58 @@
   <div class="navdrawer-content">
     <div class="d-flex flex-column doc-navdrawer-body">
       <div class="navdrawer-header">
-        <a class="h4 mr-2 doc-logo" href="{{ site.baseurl }}/">M</a>
-        <span class="h4 mb-0">{{ site.title }}</span>
+        <a aria-label="Daemonite Material" class="doc-logo" href="{{ site.baseurl }}/">M</a>
+        <span class="navbar-brand">{{ site.title }}</span>
       </div>
 
+      <form class="navdrawer-body mt-2">
+        <div class="floating-label textfield-box">
+          <label for="doc-search">Search</label>
+          <input aria-label="Search" autocomplete="off" data-siteurl="{{ site.url }}" class="form-control doc-search" id="doc-search" type="search">
+        </div>
+        <button class="sr-only" type="submit">Search documentation</button>
+      </form>
+
+      <div class="navdrawer-divider mb-0"></div>
+
       <nav class="navdrawer-nav">
 
         {% assign page_slug = page.url | split: '/' | last %}
 
         {% for group in site.data.nav %}
 
-          {% assign class_collapsed = 'collapsed' %}
-          {% assign class_show = '' %}
-          {% assign group_slug = group.title | slugify %}
+        {% assign class_collapsed = 'collapsed' %}
+        {% assign class_show = '' %}
+        {% assign group_slug = group.title | slugify %}
 
-          {% if group_slug == page.group %}
-            {% assign class_collapsed = '' %}
-            {% assign class_show = 'show' %}
-          {% endif %}
+        {% if group_slug == page.group %}
+          {% assign class_collapsed = '' %}
+          {% assign class_show = 'show' %}
+        {% endif %}
 
-          {% if group.title == 'Components' or group.title == 'Material' %}
+        {% if group.title == 'Components' or group.title == 'Material' %}
 
-            <div class="navdrawer-divider"></div>
+        <div class="navdrawer-divider"></div>
 
-          {% endif %}
+        {% endif %}
 
-          <a class="nav-item nav-link {{ class_collapsed }}" data-toggle="collapse" href="#{{ site.id.navdrawer }}-{{ group_slug | replace: ' ', '-' }}">
-            <strong>{{ group.title }}</strong>
-          </a>
-          <div class="collapse pb-2 {{ class_show }}" id="{{ site.id.navdrawer }}-{{ group_slug | replace: ' ', '-' }}">
+        <a class="nav-item nav-link {{ class_collapsed }}" data-toggle="collapse" href="#{{ site.id.navdrawer }}-{{ group_slug | replace: ' ', '-' }}"><strong>{{ group.title }}</strong></a>
+        <div class="collapse pb-2 {{ class_show }}" id="{{ site.id.navdrawer }}-{{ group_slug | replace: ' ', '-' }}">
 
-            {% for doc in group.pages %}
+          {% for doc in group.pages %}
 
-              {% assign class_active = 'text-black-secondary' %}
-              {% assign doc_slug = doc.title | slugify %}
+          {% assign class_active = 'text-black-secondary' %}
+          {% assign doc_slug = doc.title | slugify %}
 
-              {% if doc_slug == page_slug and group_slug == page.group %}
-                {% assign class_active = 'active' %}
-              {% endif %}
+          {% if doc_slug == page_slug and group_slug == page.group %}
+            {% assign class_active = 'active' %}
+          {% endif %}
 
-              <a class="nav-item nav-link pl-4 py-2 {{ class_active }}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace: '-&- ', '-'  }}/"><span class="font-weight-normal">{{ doc.title }}</span></a>
+          <a class="nav-item nav-link pl-4 py-2 {{ class_active }}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace: '-&- ', '-'  }}/"><span class="font-weight-normal">{{ doc.title }}</span></a>
 
-            {% endfor %}
+          {% endfor %}
 
-          </div>
+        </div>
 
         {% endfor %}
 
@@ -61,12 +69,8 @@
       <div class="mt-auto">
         <div class="navdrawer-divider mt-0"></div>
         <div class="navdrawer-nav">
-          <a class="nav-item nav-link text-black-secondary" href="https://github.com/Daemonite/material" target="_blank">
-            <i class="material-icons mr-3">code</i>Fork me on GitHub
-          </a>
-          <a class="nav-item nav-link text-black-secondary" href="http://www.daemon.com.au/" target="_blank">
-            <i class="material-icons mr-3 text-danger">favorite</i>Made by Daemon
-          </a>
+          <a class="nav-item nav-link text-black-secondary" href="https://github.com/Daemonite/material" target="_blank"><i class="material-icons mr-3">code</i>Fork me on GitHub</a>
+          <a class="nav-item nav-link text-black-secondary" href="http://www.daemon.com.au/" target="_blank"><i class="material-icons mr-3 text-danger">favorite</i>Made by Daemon</a>
         </div>
       </div>
     </div>

_includes/nav-toolbar.html

@@ -1,21 +1,14 @@
-<div class="navbar navbar-dark toolbar-waterfall d-lg-none doc-navbar" id="{{ site.id.navbar }}">
-  <button aria-controls="{{ site.id.navdrawer }}" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler d-lg-none" data-breakpoint="lg" data-target="#{{ site.id.navdrawer }}" data-toggle="navdrawer" data-type="permanent">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <a class="d-lg-none h4 ml-3 mr-auto doc-logo" href="{{ site.baseurl }}/">M</a>
-  <div class="d-lg-none ml-auto">
+
+<header class="navbar navbar-dark d-lg-none fixed-top toolbar-waterfall">
+  <button aria-controls="{{ site.id.navdrawer }}" aria-expanded="false" aria-label="Toggle Navdrawer" class="navbar-toggler mr-3" data-breakpoint="lg" data-target="#{{ site.id.navdrawer }}" data-toggle="navdrawer" data-type="permanent"><span class="navbar-toggler-icon"></span></button>
+  <a aria-label="Daemonite Material" class="mr-auto doc-logo" href="{{ site.baseurl }}/">M</a>
+  <div class="ml-3">
     <div class="dropdown">
-      <button aria-expanded="false" aria-haspopup="true" class="navbar-toggler" data-toggle="dropdown" id="doc-dropdown-follow" type="button">
-        <i class="material-icons mx-auto">more_vert</i>
-      </button>
+      <button aria-expanded="false" aria-haspopup="true" class="navbar-toggler" data-toggle="dropdown" id="doc-dropdown-follow" type="button"><i class="material-icons mx-auto">more_vert</i></button>
       <div aria-labelledby="doc-dropdown-follow" class="dropdown-menu dropdown-menu-right">
-        <a class="dropdown-item" href="https://github.com/Daemonite/material" target="_blank">
-          <i class="material-icons mr-3">code</i>Fork me on GitHub
-        </a>
-        <a class="dropdown-item" href="http://www.daemon.com.au/" target="_blank">
-          <i class="material-icons mr-3 text-danger">favorite</i>Made by Daemon
-        </a>
+        <a class="dropdown-item" href="https://github.com/Daemonite/material" target="_blank"><i class="material-icons mr-3">code</i>Fork me on GitHub</a>
+        <a class="dropdown-item" href="http://www.daemon.com.au/" target="_blank"><i class="material-icons mr-3 text-danger">favorite</i>Made by Daemon</a>
       </div>
     </div>
   </div>
-</div>
+</header>

_includes/page-jumbotron.html

@@ -1,12 +1,19 @@
-<div class="jumbotron jumbotron-fluid mb-5 px-lg-3 text-white doc-jumbotron" id="doc-jumbotron">
+
+<div class="jumbotron jumbotron-fluid mb-5 px-lg-3 doc-jumbotron">
   <div class="container">
+
     {% if page.toc %}
-      <div class="row">
+
+    <div class="row">
+
     {% else %}
-      <div class="row justify-content-center">
+
+    <div class="row justify-content-center">
+
     {% endif %}
+
       <div class="col-xl-9">
-        <h1 class="typography-display-4">{{ page.title }}</h1>
+        <h1 class="typography-display-4" id="{{ site.id.main }}">{{ page.title }}</h1>
         <p class="font-weight-light typography-title">{{ page.description }}</p>
       </div>
     </div>

_includes/skip.html

@@ -0,0 +1,6 @@
+
+<a class="sr-only sr-only-focusable doc-skip" href="#{{ site.id.main }}">
+  <div class="container">
+    <span class="doc-skip-text">Skip to main content</span>
+  </div>
+</a>

_layouts/base.html

@@ -1,9 +1,15 @@
+---
+layout: compress
+---
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
   {% include header.html %}
 </head>
 <body class="doc-body">
+  {% include skip.html %}
+
   {{ content }}
 
   {% include footer.html %}