Merge branch 'master' into codepen
This commit is contained in:
Angelos Chalaris
GitHub
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
152
index.html
152
index.html
@ -24,7 +24,8 @@
|
||||
<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="#evenly-distributed-children"><span>Evenly distributed children</span></a>
|
||||
<a class="sidebar__link" href="#horizontal-and-vertical-centering"><span>Horizontal and vertical centering</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="#truncate-text"><span>Truncate text</span></a>
|
||||
</section>
|
||||
<section data-type="visual" class="sidebar__section">
|
||||
@ -175,7 +176,7 @@
|
||||
99+%
|
||||
</div>
|
||||
</div>
|
||||
<p><span class="snippet__support-note">✅ No caveats.</span></p>
|
||||
<p><span class="snippet__support-note">⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).</span></p>
|
||||
|
||||
<!-- tags: layout -->
|
||||
</div>
|
||||
@ -364,7 +365,8 @@ in any specification.</span></p>
|
||||
86.3%
|
||||
</div>
|
||||
</div>
|
||||
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
|
||||
<p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
|
||||
<span class="snippet__support-note">⚠️ This is not a secure method to prevent users from copying content.</span></p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://caniuse.com/#feat=user-select-none" target="_blank">https://caniuse.com/#feat=user-select-none</a>
|
||||
@ -626,6 +628,54 @@ in any specification.</span></p>
|
||||
|
||||
<!-- tags: layout -->
|
||||
</div>
|
||||
<div class="snippet">
|
||||
<h3 id="flexbox-centering"><span>Flexbox centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
|
||||
<p>Horizontally and vertically centers a child element within a parent element using <code>flexbox</code>.</p>
|
||||
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html"><div class="flexbox-centering">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.flexbox-centering {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</code></pre>
|
||||
<h4>Demo</h4>
|
||||
<div class="snippet-demo">
|
||||
<div class="snippet-demo__flexbox-centering">
|
||||
<p class="snippet-demo__flexbox-centering__child">Centered content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.snippet-demo__flexbox-centering {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<h4>Explanation</h4>
|
||||
<ol>
|
||||
<li><code>display: flex</code> enables flexbox.</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">
|
||||
97.8%
|
||||
</div>
|
||||
</div>
|
||||
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://caniuse.com/#feat=flexbox" target="_blank">https://caniuse.com/#feat=flexbox</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- tags: layout -->
|
||||
</div>
|
||||
<div class="snippet">
|
||||
<h3 id="gradient-text"><span>Gradient text</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
|
||||
<p>Gives text a gradient color.</p>
|
||||
@ -674,6 +724,54 @@ in any specification.</span></p>
|
||||
|
||||
<!-- tags: visual -->
|
||||
</div>
|
||||
<div class="snippet">
|
||||
<h3 id="grid-centering"><span>Grid centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
|
||||
<p>Horizontally and vertically centers a child element within a parent element using <code>grid</code>.</p>
|
||||
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html"><div class="grid-centering">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.grid-centering {
|
||||
display: grid;
|
||||
justify-content: 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>
|
||||
<style>
|
||||
.snippet-demo__grid-centering {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
|
||||
<!-- tags: layout -->
|
||||
</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>
|
||||
@ -747,54 +845,6 @@ in any specification.</span></p>
|
||||
|
||||
<!-- tags: visual -->
|
||||
</div>
|
||||
<div class="snippet">
|
||||
<h3 id="horizontal-and-vertical-centering"><span>Horizontal and vertical centering</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
|
||||
<p>Horizontally and vertically centers a child element within a parent element.</p>
|
||||
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html"><div class="horizontal-and-vertical-centering">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<h4 data-type="CSS">CSS</h4><pre><code class="lang-css">.horizontal-and-vertical-centering {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</code></pre>
|
||||
<h4>Demo</h4>
|
||||
<div class="snippet-demo">
|
||||
<div class="snippet-demo__horizontal-and-vertical-centering">
|
||||
<p class="snippet-demo__horizontal-and-vertical-centering__child">Centered content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.snippet-demo__horizontal-and-vertical-centering {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
<h4>Explanation</h4>
|
||||
<ol>
|
||||
<li><code>display: flex</code> enables flexbox.</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">
|
||||
97.8%
|
||||
</div>
|
||||
</div>
|
||||
<p><span class="snippet__support-note">⚠️ Needs prefixes for full support.</span></p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://caniuse.com/#feat=flexbox" target="_blank">https://caniuse.com/#feat=flexbox</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- tags: layout -->
|
||||
</div>
|
||||
<div class="snippet">
|
||||
<h3 id="hover-underline-animation"><span>Hover underline animation</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
|
||||
<p>Creates an animated underline effect when the text is hovered over.</p>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
### Horizontal and vertical centering
|
||||
### Flexbox centering
|
||||
|
||||
Horizontally and vertically centers a child element within a parent element.
|
||||
Horizontally and vertically centers a child element within a parent element using `flexbox`.
|
||||
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="horizontal-and-vertical-centering">
|
||||
<div class="flexbox-centering">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
```
|
||||
@ -13,7 +13,7 @@ Horizontally and vertically centers a child element within a parent element.
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.horizontal-and-vertical-centering {
|
||||
.flexbox-centering {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -23,13 +23,13 @@ Horizontally and vertically centers a child element within a parent element.
|
||||
#### Demo
|
||||
|
||||
<div class="snippet-demo">
|
||||
<div class="snippet-demo__horizontal-and-vertical-centering">
|
||||
<p class="snippet-demo__horizontal-and-vertical-centering__child">Centered content.</p>
|
||||
<div class="snippet-demo__flexbox-centering">
|
||||
<p class="snippet-demo__flexbox-centering__child">Centered content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.snippet-demo__horizontal-and-vertical-centering {
|
||||
.snippet-demo__flexbox-centering {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
52
snippets/grid-centering.md
Normal file
52
snippets/grid-centering.md
Normal file
@ -0,0 +1,52 @@
|
||||
### Grid centering
|
||||
|
||||
Horizontally and vertically centers a child element within a parent element using `grid`.
|
||||
|
||||
#### HTML
|
||||
|
||||
```html
|
||||
<div class="grid-centering">
|
||||
<div class="child"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### CSS
|
||||
|
||||
```css
|
||||
.grid-centering {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
```
|
||||
|
||||
#### Demo
|
||||
|
||||
<div class="snippet-demo">
|
||||
<div class="snippet-demo__grid-centering">
|
||||
<p class="snippet-demo__grid-centering__child">Centered content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.snippet-demo__grid-centering {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
#### Explanation
|
||||
|
||||
1. `display: grid` enables grid.
|
||||
2. `justify-content: center` centers the child horizontally.
|
||||
3. `align-items: center` centers the child vertically.
|
||||
|
||||
#### Browser support
|
||||
|
||||
<span class="snippet__support-note">✅ No caveats.</span>
|
||||
|
||||
* https://caniuse.com/#feat=css-grid
|
||||
|
||||
<!-- tags: layout -->
|
||||
Reference in New Issue
Block a user