andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rebuild docs

Browse Source
This commit is contained in:
atomiks
2018-10-01 14:16:34 +10:00
parent d319ad55de
commit 6cbf726778
6 changed files with 1126 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
docs/index.html
View File

File diff suppressed because one or more lines are too long

2
docs/js.d66849d3.css → docs/js.128c4fe6.css
View File

File diff suppressed because one or more lines are too long

2
docs/js.ffc6b513.js → docs/js.82fb0ae8.js
View File

@ -31,4 +31,4 @@ var o,n=arguments[3],t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterat
},{"../deps/utils":"Xw/u"}],"mahc":[function(require,module,exports) {
"use strict";require("focus-visible"),require("normalize.css"),require("prismjs");var e=require("feather-icons"),r=l(e);require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var s=require("./components/Sidebar"),i=l(s),o=require("./components/BackToTopButton"),u=l(o),n=require("./components/Tag"),c=l(n),p=require("./components/Snippet"),t=l(p),q=require("./components/CodepenCopy"),a=l(q);function l(e){return e&&e.__esModule?e:{default:e}}r.default.replace();
},{"focus-visible":"PHYi","normalize.css":"9KIJ","prismjs":"HxJM","feather-icons":"2Os9","../css/deps/prism.css":"9KIJ","../css/index.scss":"9KIJ","./deps/polyfills":"C1Ar","./components/Sidebar":"bnBP","./components/BackToTopButton":"/f8x","./components/Tag":"uI+q","./components/Snippet":"7KYq","./components/CodepenCopy":"JXhB"}]},{},["mahc"], null)
//# sourceMappingURL=js.ffc6b513.map
//# sourceMappingURL=js.82fb0ae8.map

2
docs/js.ffc6b513.map → docs/js.82fb0ae8.map
View File

File diff suppressed because one or more lines are too long

80
index.html
View File

@ -25,13 +25,13 @@
<a class="sidebar__link" href="#box-sizing-reset"><span>Box-sizing reset</span></a>
<a class="sidebar__link" href="#clearfix"><span>Clearfix</span></a>
<a class="sidebar__link" href="#constant-width-to-height-ratio"><span>Constant width to height ratio</span></a>
<a class="sidebar__link" href="#display-table-centering"><span>Display Table Centering</span></a>
<a class="sidebar__link" href="#display-table-centering"><span>Display table centering</span></a>
<a class="sidebar__link" href="#evenly-distributed-children"><span>Evenly distributed children</span></a>
<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="#last-item-with-remaining-available-height"><span>Last item with remaining 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>
<section data-type="visual" class="sidebar__section">
@ -208,7 +208,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.2%
95.3%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -255,7 +255,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
96.2%
98.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -297,7 +297,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.5%
95.5%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -486,7 +486,7 @@ li::before {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
96.2%
98.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -561,7 +561,7 @@ li::before {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.6%
88.0%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span></p>
@ -606,7 +606,7 @@ li::before {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
82.8%
84.9%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually
@ -664,7 +664,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.8%
88.0%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -701,7 +701,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.9%
87.2%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
@ -715,8 +715,8 @@ in any specification.</span></p>
<!-- tags: interactivity -->
</div>
<div class="snippet">
<h3 id="display-table-centering"><span>Display Table Centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Vertically and horitonally centers a child element within its parent element using <code>display: table</code> (as an alternative to <code>flexbox</code>).</p>
<h3 id="display-table-centering"><span>Display table centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Vertically and horizontally centers a child element within its parent element using <code>display: table</code> (as an alternative to <code>flexbox</code>).</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="container"&gt;
&lt;div class="center"&gt;
&lt;span&gt;Centered content&lt;/span&gt;
@ -839,7 +839,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.2%
95.3%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@ -918,7 +918,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
89.9%
91.7%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@ -1012,7 +1012,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.8%
88.0%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1055,7 +1055,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.8%
98.1%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1105,7 +1105,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.7%
98.1%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1153,7 +1153,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.7%
98.1%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1201,7 +1201,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
89.6%
91.5%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Uses non-standard properties.</span></p>
@ -1249,7 +1249,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.3%
87.6%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1351,7 +1351,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.3%
87.6%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1419,7 +1419,7 @@ in any specification.</span></p>
<h4>Browser Support</h4>
<div>
<div class="snippet__browser-support">
93.4%
95.5%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span></p>
@ -1502,7 +1502,7 @@ el.style.setProperty('--max-height', height + 'px')
<h4>Browser Support</h4>
<div>
<div class="snippet__browser-support">
86.8%
88.0%
</div>
</div>
<p></p>
@ -1599,7 +1599,7 @@ el.style.setProperty('--max-height', height + 'px')
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.3%
95.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1615,8 +1615,8 @@ 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>
<h3 id="last-item-with-remaining-available-height"><span>Last item with remaining available height</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the 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;
@ -1660,16 +1660,16 @@ body {
</style>
<h4>Explanation</h4>
<ol>
<li><code>height: 100%</code> set the height of container as viewport height</li>
<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-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%
98.1%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1790,7 +1790,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.8%
88.0%
</div>
</div>
<p></p>
@ -1857,7 +1857,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
96.2%
98.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -2038,7 +2038,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.2%
95.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -2177,7 +2177,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.2%
95.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -2221,7 +2221,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.7%
88.3%
</div>
</div>
<p><span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span></p>
@ -2286,7 +2286,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.9%
98.3%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -2351,7 +2351,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
93.3%
95.4%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -2409,8 +2409,8 @@ li:not(:last-child) {
<!-- tags: visual -->
</div>
<div class="snippet">
<h3 id="transform-centering"><span>Transform Centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Vertically and horitonally centers a child element within its parent element using <code>position: absolute</code> and <code>transform: translate()</code> (as an alternative to <code>flexbox</code> or <code>display: table</code>). Similar
<h3 id="transform-centering"><span>Transform centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Vertically and horizontally centers a child element within its parent element using <code>position: absolute</code> and <code>transform: translate()</code> (as an alternative to <code>flexbox</code> or <code>display: table</code>). Similar
to <code>flexbox</code>, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="parent"&gt;
&lt;div class="child"&gt;Centered content&lt;/div&gt;
@ -2584,7 +2584,7 @@ li:not(:last-child) {
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
96.1%
98.4%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p>

1578
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff