Travis build: 95 [cron]

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.24.1",
     "caniuse-db": "^1.0.30000813",

snippets/custom-scrollbar.md

@@ -7,9 +7,9 @@ Customizes the scrollbar style for the document and elements with scrollable ove
 ```html
 <div class="custom-scrollbar">
   <p>
-    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
-    Iure id exercitationem nulla qui repellat laborum vitae, <br>
+    Iure id exercitationem nulla qui repellat laborum vitae, <br />
-    molestias tempora velit natus. Quas, assumenda nisi. <br>
+    molestias tempora velit natus. Quas, assumenda nisi. <br />
     Quisquam enim qui iure, consequatur velit sit?
   </p>
 </div>

snippets/display-table-centering.md

@@ -6,9 +6,7 @@ Vertically and horizontally centers a child element within its parent element us
 
 ```html
 <div class="container">
-  <div class="center">
+  <div class="center"><span>Centered content</span></div>
-    <span>Centered content</span>
-  </div>
 </div>
 ```
 

snippets/fit-image-in-container.md

@@ -5,8 +5,8 @@ Changes the fit and position of an image within its container while preserving i
 #### HTML
 
 ```html
-<img class="image image-contain" src="https://picsum.photos/600/200">
+<img class="image image-contain" src="https://picsum.photos/600/200" />
-<img class="image image-cover" src="https://picsum.photos/600/200">
+<img class="image image-cover" src="https://picsum.photos/600/200" />
 ```
 
 #### CSS

snippets/flexbox-centering.md

@@ -5,9 +5,7 @@ Horizontally and vertically centers a child element within a parent element usin
 #### HTML
 
 ```html
-<div class="flexbox-centering">
+<div class="flexbox-centering"><div class="child">Centered content.</div></div>
-  <div class="child">Centered content.</div>
-</div>
 ```
 
 #### CSS

snippets/grid-centering.md

@@ -5,9 +5,7 @@ Horizontally and vertically centers a child element within a parent element usin
 #### HTML
 
 ```html
-<div class="grid-centering">
+<div class="grid-centering"><div class="child">Centered content.</div></div>
-  <div class="child">Centered content.</div>
-</div>
 ```
 
 #### CSS

snippets/mouse-cursor-gradient-tracking.md

@@ -7,9 +7,7 @@ A hover effect where the gradient follows the mouse cursor.
 #### HTML
 
 ```html
-<button class="mouse-cursor-gradient-tracking">
+<button class="mouse-cursor-gradient-tracking"><span>Hover me</span></button>
-  <span>Hover me</span>
-</button>
 ```
 
 #### CSS

snippets/offscreen.md

@@ -6,8 +6,7 @@ A bulletproof way to completely hide an element visually and positionally in the
 
 ```html
 <a class="button" href="http://pantswebsite.com">
-  Learn More
+  Learn More <span class="offscreen"> about pants</span>
-  <span class="offscreen"> about pants</span>
 </a>
 ```
 

snippets/overflow-scroll-gradient.md

@@ -7,13 +7,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
 ```html
 <div class="overflow-scroll-gradient">
   <div class="overflow-scroll-gradient__scroller">
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
-    Iure id exercitationem nulla qui repellat laborum vitae, <br>
+    Iure id exercitationem nulla qui repellat laborum vitae, <br />
-    molestias tempora velit natus. Quas, assumenda nisi. <br>
+    molestias tempora velit natus. Quas, assumenda nisi. <br />
-    Quisquam enim qui iure, consequatur velit sit? <br>
+    Quisquam enim qui iure, consequatur velit sit? <br />
-    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
-    Iure id exercitationem nulla qui repellat laborum vitae, <br>
+    Iure id exercitationem nulla qui repellat laborum vitae, <br />
-    molestias tempora velit natus. Quas, assumenda nisi. <br>
+    molestias tempora velit natus. Quas, assumenda nisi. <br />
     Quisquam enim qui iure, consequatur velit sit?
   </div>
 </div>

snippets/popout-menu.md

@@ -5,11 +5,7 @@ Reveals an interactive popout menu on hover and focus.
 #### HTML
 
 ```html
-<div class="reference" tabindex="0">
+<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>
-  <div class="popout-menu">
-    Popout menu
-  </div>
-</div>
 ```
 
 #### CSS

snippets/reset-all-styles.md

@@ -7,7 +7,11 @@ Resets all styles to default values with one property. This will not affect `dir
 ```html
 <div class="reset-all-styles">
   <h5>Title</h5>
-  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui
+    repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui
+    iure, consequatur velit sit?
+  </p>
 </div>
 ```
 

snippets/sibling-fade.md

@@ -6,12 +6,8 @@ Fades out the siblings of a hovered item.
 
 ```html
 <div class="sibling-fade">
-  <span>Item 1</span>
+  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
-  <span>Item 2</span>
+  <span>Item 5</span> <span>Item 6</span>
-  <span>Item 3</span>
-  <span>Item 4</span>
-  <span>Item 5</span>
-  <span>Item 6</span>
 </div>
 ```
 

snippets/toggle-switch.md

@@ -5,8 +5,7 @@ Creates a toggle switch with CSS only.
 #### HTML
 
 ```html
-<input type="checkbox" id="toggle" class="offscreen" />
+<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>
-<label for="toggle" class="switch"></label>
 ```
 
 #### CSS

snippets/transform-centering.md

@@ -5,9 +5,7 @@ Vertically and horizontally centers a child element within its parent element us
 #### HTML
 
 ```html
-<div class="parent">
+<div class="parent"><div class="child">Centered content</div></div>
-  <div class="child">Centered content</div>
-</div>
 ```
 
 #### CSS

src/js/deps/utils.js

@@ -30,8 +30,8 @@ export const createEventHub = () => ({
 window.EventHub = createEventHub()
 
 /*
-* Make iOS behave normally.
+ * Make iOS behave normally.
-*/
+ */
 if (/iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream) {
   document.body.style.cursor = 'pointer'
 }
@@ -41,11 +41,11 @@ if (/Mac/.test(navigator.platform)) {
 }
 
 /*
-* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
+ * A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
-* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
+ * (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.
-* UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
+ * UPDATE: It appears the applied fix doesn't work when the font is in italics. New fix has been added.
-* Must be applied to all browsers for now.
+ * Must be applied to all browsers for now.
-*/
+ */
 ;(() => {
   const ua = navigator.userAgent