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

Merge pull request #68 from atomiks/grid-layout

Browse Source 
build & parcel script
This commit is contained in:
Stefan Feješ
2018-03-06 18:01:15 +01:00
committed by GitHub
parent b2fb454476 69222a1a83
commit 9b899613b9
6 changed files with 216 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/51a402ced656eeea80dcb3b08a0ac425.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

9
docs/6c831ee080ce0f905632cb113dfa17d9.css Normal file
View File

File diff suppressed because one or more lines are too long

30
docs/6c831ee080ce0f905632cb113dfa17d9.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
docs/e4fdfce991c164037b4cd78667aa2afd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

79
docs/index.html
View File

File diff suppressed because one or more lines are too long

147
index.html
View File

@ -26,6 +26,7 @@
<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="#truncate-text"><span>Truncate text</span></a>
</section>
<section data-type="visual" class="sidebar__section">
@ -196,7 +197,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.3%
94.8%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -243,7 +244,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
98.4%
98.2%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -285,7 +286,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.5%
95.0%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -471,7 +472,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
88.0%
87.3%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span></p>
@ -516,7 +517,7 @@
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
84.9%
84.6%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support and is not actually
@ -574,7 +575,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
88.0%
87.2%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -611,7 +612,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.2%
86.3%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
@ -675,7 +676,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.3%
94.8%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@ -766,7 +767,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
91.7%
91.0%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
@ -860,7 +861,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
88.0%
87.2%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -903,7 +904,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
98.1%
97.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -953,7 +954,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
98.1%
97.8%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1001,7 +1002,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
98.1%
97.8%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
@ -1049,7 +1050,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
91.5%
90.7%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Uses non-standard properties.</span></p>
@ -1097,7 +1098,105 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
87.6%
86.6%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=css-grid" target="_blank">https://caniuse.com/#feat=css-grid</a>
</li>
</ul>
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="grid-layout"><span>Grid layout</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
<p>Basic website layout using <code>grid</code>.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="grid-layout"&gt;
&lt;div class="box header"&gt;Header&lt;/div&gt;
&lt;div class="box sidebar"&gt;Sidebar&lt;/div&gt;
&lt;div class="box content"&gt;Content
&lt;br /&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti modi sed accusamus vero laborum? Ut ducimus doloremque perspiciatis labore velit, nostrum, molestias animi, nulla odit illum voluptas est explicabo non!
&lt;/div&gt;
&lt;div class="box footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.grid-layout {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"sidebar header header"
"sidebar content content"
"sidebar footer footer";
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
</code></pre>
<h4>Demo</h4>
<div class="snippet-demo">
<div class="snippet-demo__grid-layout">
<div class="box snippet-demo__grid-layout__header">Header</div>
<div class="box snippet-demo__grid-layout__sidebar">Sidebar</div>
<div class="box snippet-demo__grid-layout__content">Content
<br> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box snippet-demo__grid-layout__footer">Footer</div>
</div>
</div>
<style>
.snippet-demo__grid-layout {
margin: 1em;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "sidebar header header" "sidebar content content" "sidebar footer footer";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
.snippet-demo__grid-layout__sidebar {
grid-area: sidebar;
}
.snippet-demo__grid-layout__content {
grid-area: content;
}
.snippet-demo__grid-layout__header {
grid-area: header;
}
.snippet-demo__grid-layout__footer {
grid-area: footer;
}
</style>
<h4>Explanation</h4>
<ol>
<li><code>display: grid</code> enables grid.</li>
<li><code>grid-gap: 10px</code> defines spacing between the elements.</li>
<li><code>grid-template-columns: repeat(3, 1fr)</code> defines 3 columns of the same size.</li>
<li><code>grid-template-areas</code> defines the names of grid areas.</li>
<li><code>grid-area: sidebar</code> makes the element use the area with the name <code>sidebar</code>.</li>
</ol>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
86.6%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1165,7 +1264,7 @@ in any specification.</span></p>
<h4>Browser Support</h4>
<div>
<div class="snippet__browser-support">
95.5%
95.0%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Needs alternate syntax and JavaScript user agent checking for full support.</span></p>
@ -1258,7 +1357,7 @@ in any specification.</span></p>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.4%
94.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1381,7 +1480,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
88.0%
87.2%
</div>
</div>
<p></p>
@ -1478,7 +1577,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.4%
94.8%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1621,7 +1720,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.4%
94.8%
</div>
</div>
<p><span class="snippet__support-note">⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).</span></p>
@ -1665,7 +1764,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
88.3%
87.5%
</div>
</div>
<p><span class="snippet__support-note">⚠️ MS Edge status is under consideration.</span></p>
@ -1729,7 +1828,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
98.3%
98.0%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1794,7 +1893,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
95.4%
94.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
@ -1964,7 +2063,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
98.4%
98.1%
</div>
</div>
<p><span class="snippet__support-note">⚠️ Only works for single line elements.</span></p>