Merge branch 'develop'

.github/ISSUE_TEMPLATE/amend-existing-pattern.md

@@ -0,0 +1,17 @@
+---
+name: Amend existing pattern
+about: This template allows users to propose an amendment to an existing pattern
+
+---
+
+## Pattern to amend
+
+Add pattern name(s) here
+
+## Visual
+
+Provide a screenshot or link to a prototype of your pattern amendment.
+
+## Context
+
+In what context does your amendment solve a problem?

.github/ISSUE_TEMPLATE/propose-new-pattern.md

@@ -0,0 +1,24 @@
+---
+name: Propose new pattern
+about: This template allows users to propose a new pattern
+
+---
+
+A pattern in Vanilla needs to be flexible enough that it can be used across a wide range of scenarios and shouldn't be constrained to a specific number of applications.
+
+## Visual
+
+Provide a screenshot or link to a prototype of your pattern proposal.
+
+## Context
+
+Where and when might this proposed pattern be used?
+
+## State
+
+Does this pattern have state? If so, what are the different states (e.g. accordion with closed/open states)?
+
+## Progressive enhancement
+
+A pattern should be designed small screen first. How does this pattern scale up?
+How will this pattern degrade on less competent browsers?

.github/ISSUE_TEMPLATE/report-a-bug.md

@@ -0,0 +1,35 @@
+---
+name: Report a bug
+about: Create a bug report to help us improve Vanilla
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.npmignore

@@ -1,20 +1,2 @@
-build/
-_config.yml
-CONTRIBUTING.md
-docs/
-examples/
-Gemfile
-Gemfile.lock
-.git/
-.github/
-.gitignore
-gulp/
-gulpfile.js
-index.html
-jekyll/
-_jekyll/
-node_modules/
-.sass-cache/
-.sass-lint.yml
-.spelling
-.travis.yml
+/*
+!/scss

.travis.yml

@@ -14,7 +14,6 @@ before_script:
 script:
   - yarn run test
   - yarn run build-examples
-  - tests/file-size-lint.sh
   - percy snapshot --widths "375,1280" _jekyll/_site/ --baseurl "/vanilla-framework"
   - sass --no-cache --sourcemap=none scss/build.scss build/css/build.css
 notifications:

_jekyll/_layouts/default.html

@@ -16,81 +16,24 @@
 
 {{ content }}
     </body>
+    {% if site.env == 'development' %}
     <script>
-        var VF_ENV = "PRODUCTION";
-        if (VF_ENV === "DEV") {
-            fragmentFromString = function fragmentFromString(strHTML) {
-                var temp = document.createElement('template');
-                temp.innerHTML = strHTML;
-                return temp.content;
-            }
-            class baselineGrid {
-                constructor() {
-                    this.target = document.body,
-                    this.baselineHeight = 8;
-                    this.baselineContainerClassName = "u-baseline-container";
-                    this.baselineRowClassName = "u-baseline";
-                    this.toggleGridClass = "u-hide";
-                    this.showGrid = false;
-                }
-                addBaselineGridToggle() {
-                    var controls = fragmentFromString('<div class="controls"><button id="switch-on" class="p-switch js-baseline-toggle" type="button" role="switch" aria-checked="false" aria-labelledby="switch-on-label"><span>On</span><span>Off</span></button></div>');
-                    this.target.appendChild(controls);
-                }
-                appendBaselineRow(parent) {
-                    var baseline = document.createElement('div');
-                    baseline.classList.add(this.baselineRowClassName);
-                    parent.appendChild(baseline);
-                }
-                baselineCount() {
-                    return Math.floor(document.documentElement.scrollHeight / this.baselineHeight);
-                }
-                create() {
-                    var baselineContainer = document.createElement('div'),
-                        fragment = document.createDocumentFragment(),
-                        documentHeight = document.documentElement.scrollHeight,
-                        baselineCount = this.baselineCount(documentHeight);
-
-                    baselineContainer.classList.add(this.baselineContainerClassName);
-
-                    if (!this.showGrid) {
-                        baselineContainer.classList.add(this.toggleGridClass);
-                    }
-                    for (var i = 0; i < baselineCount; i++) {
-                        this.appendBaselineRow(baselineContainer);
-                    }
-                    fragment.appendChild(baselineContainer);
-                    this.target.appendChild(fragment);
-                    this.baselineContainer = document.querySelector('.u-baseline-container');
-                }
-                initGridToggle(switchBtn) {
-                    var toggle = document.querySelector(switchBtn),
-                        that = this;
+        function fragmentFromString(htmlString) {
+            var temp = document.createElement('template');
+            temp.innerHTML = htmlString;
+            return temp.content;
+        }
 
-                    toggle.addEventListener('click', function (event) {
-                        if (!that.showGrid) {
-                            this.setAttribute('aria-checked', true);
-                            that.baselineContainer.classList.remove(that.toggleGridClass);
-                        } else {
-                            this.setAttribute('aria-checked', false);
-                            that.baselineContainer.classList.add(that.toggleGridClass);
-                        }
-                        that.showGrid = !that.showGrid;
-                    });
-                }
-                update() {
-                    this.baselineContainer.remove();
-                    this.create();
-                }
-            }
+        document.addEventListener('DOMContentLoaded', function() {
+            var body = document.body;
+            var controls = fragmentFromString('<div class="u-baseline-grid__toggle"><label>Toggle baseline grid<input type="checkbox" class="p-switch js-baseline-toggle" /><div class="p-switch__slider"></div></label></div>');
+            body.appendChild(controls);
 
-            var bg = new baselineGrid();
-            document.addEventListener('DOMContentLoaded', () => {
-                bg.create();
-                bg.addBaselineGridToggle();
-                bg.initGridToggle('.p-switch.js-baseline-toggle');
+            var toggle = document.querySelector('.js-baseline-toggle');
+            toggle.addEventListener('click', function (event) {
+                body.classList.toggle('u-baseline-grid');
             });
-            window.addEventListener('resize', () => { bg.update(); });
-        }
+        });
     </script>
+    {% endif %}
 </html>

docs/en/base/typography.md

@@ -52,12 +52,21 @@ where _n_ is the point on the modular scale.
 ### Heading classes
 
 Heading classes can be added to text elements to give them the same visual
-appearance as the base h1-h6 heading elements without sacrificing correct
+appearance as the base `h1`-`h6` heading elements without sacrificing correct
 heading order and semantics.
 
-Heading classes are not tied to elements and can be freely mixed, for example
-you can apply the `p-heading--one` class to an `h3` element if that better
-suits your document style and tree.
+In the following example, each heading is actually a `<p>` element that has been
+modified to look like a particular heading size.
+
+<a href="https://vanilla-framework.github.io/vanilla-framework/examples/patterns/headings/default/"
+    class="js-example">
+    View example of the heading pattern
+</a>
+
+### Mixed heading classes
+
+It is also possible to apply heading classes directly to heading elements if that
+better suits your document style and tree.
 
 <a href="https://vanilla-framework.github.io/vanilla-framework/examples/patterns/headings/mixed/"
     class="js-example">
@@ -118,6 +127,13 @@ descriptions.
 
 <p>This text is <sub>subscripted</sub></p>
 
+### Abbreviation
+
+<a href="https://vanilla-framework.github.io/vanilla-framework/examples/base/abbr/"
+    class="js-example">
+    View example of the abbreviation pattern
+</a>
+
 ### Font weights
 
 If you are using the Ubuntu font, it comes in five weights; thin, light, regular, medium, and bold.