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

build

Browse Source
This commit is contained in:
Stefan Feješ
2018-03-03 11:18:05 +01:00
parent b1d4151f64
commit 488f91d8db
4 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/6c831ee080ce0f905632cb113dfa17d9.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -143,7 +143,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
</code></pre> <h4>Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__grid-centering"> <p class="snippet-demo__grid-centering__child">Centered content.</p> </div> </div> <h4>Explanation</h4> <ol> <li><code>display: grid</code> enables grid.</li> <li><code>justify-content: center</code> centers the child horizontally.</li> <li><code>align-items: center</code> centers the child vertically.</li> </ol> <h4>Browser support</h4> <div> <div class="snippet__browser-support"> 86.6% </div> </div> <p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p> <ul> <li> <a href="https://caniuse.com/#feat=css-grid" target="_blank">https://caniuse.com/#feat=css-grid</a> </li> </ul> </div> <div class="snippet"> <h3 id="hairline-border"><span>Hairline border</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3> <p>Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="hairline-border"&gt;text&lt;/div&gt; </code></pre> <h4>Demo</h4> <div class="snippet-demo"> <div class="snippet-demo__grid-centering"> <p class="snippet-demo__grid-centering__child">Centered content.</p> </div> </div> <h4>Explanation</h4> <ol> <li><code>display: grid</code> enables grid.</li> <li><code>justify-content: center</code> centers the child horizontally.</li> <li><code>align-items: center</code> centers the child vertically.</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> <ul> <li> <a href="https://caniuse.com/#feat=css-grid" target="_blank">https://caniuse.com/#feat=css-grid</a> </li> </ul> </div> <div class="snippet"> <h3 id="hairline-border"><span>Hairline border</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3> <p>Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp.</p> <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="hairline-border"&gt;text&lt;/div&gt;
</code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.hairline-border { </code></pre> <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.hairline-border {
box-shadow: 0 0 0 1px; box-shadow: 0 0 0 1px;
} }

2
index.html
View File

@ -763,7 +763,7 @@ in any specification.</span></p>
86.6% 86.6%
</div> </div>
</div> </div>
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p> <p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul> <ul>
<li> <li>
<a href="https://caniuse.com/#feat=css-grid" target="_blank">https://caniuse.com/#feat=css-grid</a> <a href="https://caniuse.com/#feat=css-grid" target="_blank">https://caniuse.com/#feat=css-grid</a>

2
snippets/grid-centering.md
View File

@ -45,7 +45,7 @@ Horizontally and vertically centers a child element within a parent element usin
#### Browser support #### Browser support
<span class="snippet__support-note">⚠️ Needs prefixes for full support.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-grid * https://caniuse.com/#feat=css-grid