add rimraf for docs directory; build docs

index.html

@@ -30,6 +30,7 @@
           <a class="sidebar__link" href="#flexbox-centering"><span>Flexbox centering</span></a>
           <a class="sidebar__link" href="#grid-centering"><span>Grid centering</span></a>
           <a class="sidebar__link" href="#grid-layout"><span>Grid layout</span></a>
+          <a class="sidebar__link" href="#last-item-will-all-available-height"><span>Last item with all available height</span></a>
           <a class="sidebar__link" href="#transform-centering"><span>Transform Centering</span></a>
           <a class="sidebar__link" href="#truncate-text"><span>Truncate text</span></a>
         </section>
@@ -207,7 +208,7 @@
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.3%
+                93.2%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -254,7 +255,7 @@
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.4%
+                96.2%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -296,7 +297,7 @@
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.5%
+                93.5%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -485,7 +486,7 @@ li::before {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.4%
+                96.2%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -560,7 +561,7 @@ li::before {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                88.0%
+                86.6%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span></p>
@@ -605,7 +606,7 @@ li::before {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                84.9%
+                82.8%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually
@@ -663,7 +664,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                88.0%
+                86.8%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -700,7 +701,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                87.2%
+                86.9%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
@@ -838,7 +839,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.3%
+                93.2%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@@ -917,7 +918,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                91.7%
+                89.9%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@@ -1011,7 +1012,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                88.0%
+                86.8%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1054,7 +1055,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.1%
+                95.8%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1104,7 +1105,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.1%
+                95.7%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@@ -1152,7 +1153,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.1%
+                95.7%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@@ -1200,7 +1201,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                91.5%
+                89.6%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Uses non-standard properties.</span></p>
@@ -1248,7 +1249,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                87.6%
+                87.3%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1350,7 +1351,7 @@ in any specification.</span></p>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                87.6%
+                87.3%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1418,7 +1419,7 @@ in any specification.</span></p>
             <h4>Browser Support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.5%
+                93.4%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span></p>
@@ -1501,7 +1502,7 @@ el.style.setProperty('--max-height', height + 'px')
             <h4>Browser Support</h4>
             <div>
               <div class="snippet__browser-support">
-                88.0%
+                86.8%
               </div>
             </div>
             <p></p>
@@ -1598,7 +1599,7 @@ el.style.setProperty('--max-height', height + 'px')
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.4%
+                93.3%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1613,6 +1614,73 @@ el.style.setProperty('--max-height', height + 'px')
 
             <!-- tags: animation -->
           </div>
+          <div class="snippet">
+            <h3 id="last-item-with-all-available-height"><span>Last item with all available height</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
+            <p>Avoid vertical scrollbar and take advantage of current viewport space. Given the last element with all available space in current viewport, even when resizing window.</p>
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="container"&gt;
+  &lt;div&gt;Div 1&lt;/div&gt;
+  &lt;div&gt;Div 2&lt;/div&gt;
+  &lt;div&gt;Div 3&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">html,
+body {
+  height: 100%;
+  margin: 0;
+}
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.container &gt; div:last-child {
+  background-color: #333;
+  flex: 1;
+}
+</code></pre>
+            <h4>Demo</h4>
+            <div class="snippet-demo">
+              <div class="snippet-demo__last-time-with-all-available-height">
+                <div>Div 1</div>
+                <div>Div 2</div>
+                <div>Div 3</div>
+              </div>
+            </div>
+            <style>
+              .snippet-demo__last-time-with-all-available-height {
+                height: 300px;
+                display: flex;
+                flex-direction: column;
+              }
+              .snippet-demo__last-time-with-all-available-height>div:last-child {
+                background-color: #333;
+                flex-grow: 1;
+                color: white;
+              }
+            </style>
+            <h4>Explanation</h4>
+            <ol>
+              <li><code>height: 100%</code> set the height of container as viewport height</li>
+              <li><code>display: flex</code> enables flexbox.</li>
+              <li><code>flex-direction: column</code> set the direction of flex items' order from top to down</li>
+              <li><code>flex-grow: 1</code> the flexbox will apply remaining available space of container to last child element.</li>
+            </ol>
+            <p>The parent must have a viewport height. <code>flex-grow: 1</code> could be applied to the first or second element, which will have all available space.</p>
+            <h4>Browser support</h4>
+            <div>
+              <div class="snippet__browser-support">
+                95.7%
+              </div>
+            </div>
+            <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
+            <ul>
+              <li>
+                <a href="https://caniuse.com/#feat=flexbox" target="_blank">https://caniuse.com/#feat=flexbox</a>
+              </li>
+            </ul>
+
+            <!-- tags: layout -->
+          </div>
           <div class="snippet">
             <h3 id="mouse-cursor-gradient-tracking"><span>Mouse cursor gradient tracking</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span><span class="tags__tag snippet__tag" data-type="interactivity"><i data-feather="edit-2"></i>interactivity</span></h3>
             <p>A hover effect where the gradient follows the mouse cursor.</p>
@@ -1722,7 +1790,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                88.0%
+                86.8%
               </div>
             </div>
             <p></p>
@@ -1789,7 +1857,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.4%
+                96.2%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -1970,7 +2038,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.4%
+                93.2%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2109,7 +2177,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.4%
+                93.2%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2153,7 +2221,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                88.3%
+                86.7%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span></p>
@@ -2177,10 +2245,10 @@ li:not(:last-child) {
 }
 .shape-separator::after {
   content: '';
-  background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
   position: absolute;
   width: 100%;
-  height: 24px;
+  height: 12px;
   bottom: 0;
 }
 </code></pre>
@@ -2196,10 +2264,10 @@ li:not(:last-child) {
               }
               .snippet-demo__shape-separator::after {
                 content: '';
-                background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
                 position: absolute;
                 width: 100%;
-                height: 24px;
+                height: 12px;
                 bottom: 0;
               }
             </style>
@@ -2207,17 +2275,18 @@ li:not(:last-child) {
             <ol>
               <li><code>position: relative</code> on the element establishes a Cartesian positioning context for pseudo elements.</li>
               <li><code>::after</code> defines a pseudo element.</li>
-              <li><code>background-image: url(...)</code> adds the SVG shape (a 24x24 triangle in base64 format) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated.
+              <li><code>background-image: url(...)</code> adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can
-              </li>
+                use
+                <a href="http://yoksel.github.io/url-encoder/" target="_blank">the URL-encoder for SVG</a>.</li>
               <li><code>position: absolute</code> takes the pseudo element out of the flow of the document and positions it in relation to the parent.</li>
               <li><code>width: 100%</code> ensures the element stretches the entire width of its parent.</li>
-              <li><code>height: 24px</code> is the same height as the shape.</li>
+              <li><code>height: 12px</code> is the same height as the shape.</li>
               <li><code>bottom: 0</code> positions the pseudo element at the bottom of the parent.</li>
             </ol>
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.3%
+                95.9%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2282,7 +2351,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                95.4%
+                93.3%
               </div>
             </div>
             <p><span class="snippet__support-note">✅ No caveats.</span></p>
@@ -2515,7 +2584,7 @@ li:not(:last-child) {
             <h4>Browser support</h4>
             <div>
               <div class="snippet__browser-support">
-                98.4%
+                96.1%
               </div>
             </div>
             <p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p>

package-lock.json

@@ -842,7 +842,7 @@
     },
     "babel-plugin-syntax-jsx": {
       "version": "6.18.0",
-      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
       "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
       "dev": true
     },
@@ -1671,7 +1671,7 @@
     },
     "browserify-rsa": {
       "version": "4.0.1",
-      "resolved": "http://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.0.1.tgz",
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "dev": true,
       "requires": {
@@ -1723,7 +1723,7 @@
     },
     "buffer": {
       "version": "4.9.1",
-      "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "dev": true,
       "requires": {
@@ -2830,7 +2830,7 @@
     },
     "duplexer": {
       "version": "0.1.1",
-      "resolved": "http://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
       "dev": true
     },
@@ -4198,7 +4198,7 @@
     },
     "got": {
       "version": "6.7.1",
-      "resolved": "http://registry.npmjs.org/got/-/got-6.7.1.tgz",
+      "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
       "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=",
       "dev": true,
       "requires": {
@@ -4982,7 +4982,7 @@
     },
     "is-builtin-module": {
       "version": "1.0.0",
-      "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
       "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
       "dev": true,
       "requires": {
@@ -5141,7 +5141,7 @@
     },
     "is-obj": {
       "version": "1.0.1",
-      "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
@@ -5470,7 +5470,7 @@
     },
     "load-json-file": {
       "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
       "requires": {
@@ -5717,7 +5717,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -6443,7 +6443,7 @@
     },
     "os-locale": {
       "version": "1.4.0",
-      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
       "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
       "dev": true,
       "requires": {
@@ -6841,7 +6841,7 @@
     },
     "pause-stream": {
       "version": "0.0.11",
-      "resolved": "http://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
       "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
       "dev": true,
       "requires": {
@@ -7786,7 +7786,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -7831,7 +7831,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
           "dev": true
         }
@@ -9033,7 +9033,7 @@
     },
     "through": {
       "version": "2.3.8",
-      "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
@@ -9702,7 +9702,7 @@
     },
     "wrap-ansi": {
       "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
       "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
       "dev": true,
       "requires": {

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "nodemon -e md,js ./scripts/build.js & parcel index.html",
     "build": "node ./scripts/build.js && npm run prettier && npm run parcel",
-    "parcel": "parcel build index.html -d docs/ --public-url ./",
+    "parcel": "npx rimraf docs && parcel build index.html -d docs/ --public-url ./",
     "prettier": "prettier --write \"**/*.{js,json,md,css,scss}\""
   },
   "author": "atomiks",
@@ -29,7 +29,8 @@
     "parcel-bundler": "^1.9.7",
     "prettier": "^1.10.2",
     "pretty": "^2.0.0",
-    "prismjs": "^1.11.0"
+    "prismjs": "^1.11.0",
+    "rimraf": "^2.6.2"
   },
   "dependencies": {
     "feather-icons": "^4.7.0",

snippets/last-item-will-all-available-height.md

@@ -70,6 +70,6 @@ The parent must have a viewport height. `flex-grow: 1` could be applied to the f
 
 <span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
 
-- https://caniuse.com/#feat=flexbox
+* https://caniuse.com/#feat=flexbox
 
 <!-- tags: layout -->