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

clean up grid-layout.md

Browse Source
This commit is contained in:
atomiks
2018-03-07 18:23:54 +10:00
parent fd2e9f82ca
commit 0b623b7779
5 changed files with 73 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierignore
View File

@ -1,4 +1,4 @@
docs/
.gitignore
dist/
.cache/
.github/

28
docs/3df57813b7ec2de885ea6075ff46ed46.js
View File

File diff suppressed because one or more lines are too long

19
docs/index.html
View File

File diff suppressed because one or more lines are too long

26
index.html
View File

@ -1114,12 +1114,14 @@ in any specification.</span></p>
<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 class="header"&gt;Header&lt;/div&gt;
&lt;div class="sidebar"&gt;Sidebar&lt;/div&gt;
&lt;div class="content"&gt;
Content
&lt;br&gt;
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
&lt;/div&gt;
&lt;div class="box footer"&gt;Footer&lt;/div&gt;
&lt;div class="footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.grid-layout {
@ -1130,6 +1132,11 @@ in any specification.</span></p>
'sidebar header header'
'sidebar content content'
'sidebar footer footer';
color: white;
}
.grid-layout &gt; div {
background: #333;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
@ -1163,14 +1170,11 @@ in any specification.</span></p>
grid-template-columns: repeat(3, 1fr);
grid-template-areas: "sidebar header header" "sidebar content content" "sidebar footer footer";
background-color: #fff;
color: #444;
color: white;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
.snippet-demo__grid-layout>div {
background: #333;
padding: 10px;
font-size: 150%;
}
.snippet-demo__grid-layout__sidebar {
grid-area: sidebar;

56
snippets/grid-layout.md
View File

@ -6,12 +6,14 @@ Basic website layout using `grid`.
```html
<div class="grid-layout">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="box content">Content
<br /> 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!
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">
Content
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="box footer">Footer</div>
<div class="footer">Footer</div>
</div>
```
@ -26,6 +28,11 @@ Basic website layout using `grid`.
'sidebar header header'
'sidebar content content'
'sidebar footer footer';
color: white;
}
.grid-layout > div {
background: #333;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
@ -45,34 +52,31 @@ Basic website layout using `grid`.
<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 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;
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: white;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
.snippet-demo__grid-layout > div {
background: #333;
padding: 10px;
font-size: 150%;
}
.snippet-demo__grid-layout__sidebar {
grid-area: sidebar;