add rimraf for docs directory; build docs

This commit is contained in:
atomiks
2018-09-30 16:43:14 +10:00
parent a92fc2be92
commit 18a37abed6
14 changed files with 218 additions and 124 deletions

View File

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because one or more lines are too long

9
docs/js.d66849d3.css Normal file

File diff suppressed because one or more lines are too long

34
docs/js.ffc6b513.js Normal file

File diff suppressed because one or more lines are too long

1
docs/js.ffc6b513.map Normal file

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -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>
<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
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>

30
package-lock.json generated
View File

@ -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": {

View File

@ -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",

View File

@ -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 -->