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

28
snippets/grid-layout.md
View File

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