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

Autoscoping (#103)

Browse Source 
* Add autoscoping with generated demo

* Remove manual demo from all snippets

* Add JavaScript inside IIFE

* Align mouse-cursor-gradient-tracking.md to demo code

* Match snippets to demo

* Update CONTRIBUTING.md

* Create reusable function for code extraction
This commit is contained in:
atomiks
2018-10-05 09:18:51 +10:00
committed by GitHub
parent 2afb2fe88a
commit 11eff23e47
41 changed files with 107 additions and 1102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
CONTRIBUTING.md
View File

@ -16,17 +16,7 @@ Brief description
#### Demo #### Demo
<!-- You must create a `snippet-demo` parent block and use it as a namespace with BEM syntax. --> <!-- Leave this blank, the build script will generate the demo for you. -->
<div class="snippet-demo">
<some-element class="snippet-demo__snippet-name"></some-element>
</div>
<!-- Add your style rules here. -->
<style>
</style>
#### Explanation #### Explanation

21
scripts/build.js
View File

@ -3,7 +3,8 @@ const path = require('path')
const marked = require('marked') const marked = require('marked')
const pretty = require('pretty') const pretty = require('pretty')
const caniuseDb = require('caniuse-db/data.json') const caniuseDb = require('caniuse-db/data.json')
const { toKebabCase, createElement, template, dom } = require('../utils/utils.js') const sass = require('node-sass')
const { toKebabCase, createElement, template, dom, getCode } = require('../utils/utils.js')
const SNIPPETS_PATH = './snippets' const SNIPPETS_PATH = './snippets'
const TAGS = [ const TAGS = [
@ -69,7 +70,23 @@ TAGS.slice(1).forEach(tag => {
for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) { for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) {
const snippetPath = path.join(SNIPPETS_PATH, snippetFile) const snippetPath = path.join(SNIPPETS_PATH, snippetFile)
const snippetData = fs.readFileSync(snippetPath, 'utf8') const snippetData = fs.readFileSync(snippetPath, 'utf8')
const markdown = marked(snippetData, { renderer })
const html = getCode('html', snippetData).trim()
const css = getCode('css', snippetData)
const scopedCSS = sass.renderSync({
data: `[data-scope="${snippetFile}"] { ${css} }`
})
const js = getCode('js', snippetData)
const demo =
`<div class="snippet-demo" data-scope="${snippetFile}">${html}</div>` +
`<style>${scopedCSS.css.toString()}</style>` +
`${js ? `<script>(function(){${js}})();</script>` : ''}`
const markdown = marked(snippetData, { renderer }).replace(
'<h4>Demo</h4>',
`<h4>Demo</h4>${demo}`
)
const snippetEl = createElement(`<div class="snippet">${markdown}</div>`) const snippetEl = createElement(`<div class="snippet">${markdown}</div>`)
snippetContainer.append(snippetEl) snippetContainer.append(snippetEl)

39
snippets/bouncing-loader.md
View File

@ -47,45 +47,6 @@ Creates a bouncing loader animation.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__bouncing-loader">
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
@keyframes bouncing-loader {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0.1;
transform: translateY(-1rem);
}
}
.snippet-demo__bouncing-loader {
display: flex;
justify-content: center;
}
.snippet-demo__bouncing-loader > div {
width: 1rem;
height: 1rem;
margin: 3rem 0.2rem;
background: #8385aa;
border-radius: 50%;
animation: bouncing-loader 0.6s infinite alternate;
}
.snippet-demo__bouncing-loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.snippet-demo__bouncing-loader > div:nth-child(3) {
animation-delay: 0.4s;
}
</style>
#### Explanation #### Explanation
Note: `1rem` is usually `16px`. Note: `1rem` is usually `16px`.

37
snippets/box-sizing-reset.md
View File

@ -2,38 +2,41 @@
Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`. Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.
#### HTML
```html
<div class="box">border-box</div>
<div class="box content-box">content-box</div>
```
#### CSS #### CSS
```css ```css
html { html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: inherit; box-sizing: inherit;
} }
.box {
display: inline-block;
width: 150px;
height: 150px;
padding: 10px;
background: tomato;
color: white;
border: 10px solid red;
}
.content-box {
box-sizing: content-box;
}
``` ```
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__box-sizing-reset">Demo</div>
</div>
<style>
.snippet-demo__box-sizing-reset {
box-sizing: border-box;
width: 200px;
padding: 1.5em;
color: #7983ff;
font-family: sans-serif;
background-color: white;
border: 5px solid;
}
</style>
#### Explanation #### Explanation
1. `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`. 1. `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`.

13
snippets/circle.md
View File

@ -21,19 +21,6 @@ Creates a circle shape with pure CSS.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__circle"></div>
</div>
<style>
.snippet-demo__circle {
border-radius: 50%;
width: 2rem;
height: 2rem;
background: #333;
}
</style>
#### Explanation #### Explanation
`border-radius: 50%` curves the borders of an element to create a circle. `border-radius: 50%` curves the borders of an element to create a circle.

20
snippets/clearfix.md
View File

@ -30,26 +30,6 @@ Ensures that an element self-clears its children.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__clearfix">
<div class="snippet-demo__floated">float a</div>
<div class="snippet-demo__floated">float b</div>
<div class="snippet-demo__floated">float c</div>
</div>
</div>
<style>
.snippet-demo__clearfix::after {
content: '';
display: block;
clear: both;
}
.snippet-demo__floated {
float: left;
}
</style>
#### Explanation #### Explanation
1. `.clearfix::after` defines a pseudo-element. 1. `.clearfix::after` defines a pseudo-element.

23
snippets/constant-width-to-height-ratio.md
View File

@ -30,29 +30,6 @@ Given an element of variable width, it will ensure its height remains proportion
#### Demo #### Demo
Resize your browser window to see the proportion of the element remain the same.
<div class="snippet-demo">
<div class="snippet-demo__constant-width-to-height-ratio"></div>
</div>
<style>
.snippet-demo__constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.snippet-demo__constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.snippet-demo__constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
</style>
#### Explanation #### Explanation
`padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of `padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of

29
snippets/counter.md
View File

@ -34,35 +34,6 @@ li::before {
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__countable-section">
<ul>
<li>List item</li>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
</div>
</div>
<style>
.snippet-demo__countable-section ul {
counter-reset: counter;
list-style-type: none;
}
.snippet-demo__countable-section li::before {
counter-increment: counter;
content: counters(counter, '.') ' ';
}
</style>
#### Explanation #### Explanation
You can create a ordered list using any type of HTML. You can create a ordered list using any type of HTML.

59
snippets/custom-scrollbar.md
View File

@ -6,74 +6,49 @@ Customizes the scrollbar style for the document and elements with scrollable ove
```html ```html
<div class="custom-scrollbar"> <div class="custom-scrollbar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Quisquam enim qui iure, consequatur velit sit?
</p>
</div> </div>
``` ```
#### CSS #### CSS
```css ```css
/* Document scrollbar */ .custom-scrollbar {
::-webkit-scrollbar { height: 70px;
overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
width: 8px; width: 8px;
} }
::-webkit-scrollbar-track { .custom-scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px; border-radius: 10px;
} }
::-webkit-scrollbar-thumb { .custom-scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px; border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
} }
/* Scrollable element */
.some-element::webkit-scrollbar {
}
``` ```
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__custom-scrollbar">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?
</p>
</div>
</div>
<style>
.snippet-demo__custom-scrollbar {
height: 100px;
overflow: auto;
}
.snippet-demo__custom-scrollbar::-webkit-scrollbar {
width: 8px;
}
.snippet-demo__custom-scrollbar::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
.snippet-demo__custom-scrollbar::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
</style>
#### Explanation #### Explanation
1. `::-webkit-scrollbar` targets the whole scrollbar element. 1. `::-webkit-scrollbar` targets the whole scrollbar element.
2. `::-webkit-scrollbar-track` targets only the scrollbar track. 2. `::-webkit-scrollbar-track` targets only the scrollbar track.
3. `::-webkit-scrollbar-thumb` targets the scrollbar thumb. 3. `::-webkit-scrollbar-thumb` targets the scrollbar thumb.
There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/) There are many other pseudo-elements that you can use to style scrollbars. For more info, visit the [WebKit Blog](https://webkit.org/blog/363/styling-scrollbars/).
#### Browser support #### Browser support

15
snippets/custom-text-selection.md
View File

@ -23,21 +23,6 @@ Changes the styling of text selection.
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__custom-text-selection">Select some of this text.</p>
</div>
<style>
.snippet-demo__custom-text-selection::selection {
background: deeppink;
color: white;
}
.snippet-demo__custom-text-selection::-moz-selection {
background: deeppink;
color: white;
}
</style>
#### Explanation #### Explanation
`::selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element. `::selection` defines a pseudo selector on an element to style text within it when selected. Note that if you don't combine any other selector your style will be applied at document root level, to any selectable element.

29
snippets/custom-variables.md
View File

@ -12,13 +12,14 @@ CSS variables that contain specific values to be reused throughout a document.
```css ```css
:root { :root {
/* Place variables within here to use the variables globally. */
}
.custom-variables {
--some-color: #da7800; --some-color: #da7800;
--some-keyword: italic; --some-keyword: italic;
--some-size: 1.25em; --some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray; --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
}
.custom-variables {
color: var(--some-color); color: var(--some-color);
font-size: var(--some-size); font-size: var(--some-size);
font-style: var(--some-keyword); font-style: var(--some-keyword);
@ -28,28 +29,6 @@ CSS variables that contain specific values to be reused throughout a document.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__custom-variables">
<p>CSS is awesome!</p>
</div>
</div>
<style>
.snippet-demo__custom-variables {
--some-color: #686868;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray , 0 0 0.2em slategray;
}
.snippet-demo__custom-variables p {
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
</style>
#### Explanation #### Explanation
The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document. Variables can also be scoped to a selector if defined within the block. The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document. Variables can also be scoped to a selector if defined within the block.

11
snippets/disable-selection.md
View File

@ -19,17 +19,6 @@ Makes the content unselectable.
#### Demo #### Demo
<div class="snippet-demo">
<p>You can select me.</p>
<p class="snippet-demo__disable-selection">You can't select me!</p>
</div>
<style>
.snippet-demo__disable-selection {
user-select: none;
}
</style>
#### Explanation #### Explanation
`user-select: none` specifies that the text cannot be selected. `user-select: none` specifies that the text cannot be selected.

26
snippets/display-table-centering.md
View File

@ -36,32 +36,6 @@ Vertically and horizontally centers a child element within its parent element us
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__container">
<div class="snippet-demo__center">
<span>Centered content</span>
</div>
</div>
</div>
<style>
.snippet-demo__container {
border: 1px solid #333;
height: 250px;
width: 250px;
}
.snippet-demo__center {
display: table;
height: 100%;
width: 100%;
}
.snippet-demo__center > span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
#### Explanation #### Explanation
1. `display: table` on '.center' allows the element to behave like a `<table>` HTML element. 1. `display: table` on '.center' allows the element to behave like a `<table>` HTML element.

20
snippets/donut-spinner.md
View File

@ -32,26 +32,6 @@ Creates a donut spinner that can be used to indicate the loading of content.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__donut-spinner"></div>
</div>
<style>
@keyframes snippet-demo__donut-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
.snippet-demo__donut-spinner {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 30px;
height: 30px;
animation: snippet-demo__donut-spin 1.2s linear infinite;
}
</style>
#### Explanation #### Explanation
Use a semi-transparent `border` for the whole element, except one side that will Use a semi-transparent `border` for the whole element, except one side that will

25
snippets/dynamic-shadow.md
View File

@ -33,31 +33,6 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__dynamic-shadow"></div>
</div>
<style>
.snippet-demo__dynamic-shadow {
position: relative;
width: 10rem;
height: 10rem;
background: linear-gradient(75deg, #6d78ff, #00ffb8);
z-index: 1;
}
.snippet-demo__dynamic-shadow::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit;
top: 0.5rem;
filter: blur(0.4rem);
opacity: 0.7;
z-index: -1;
}
</style>
#### Explanation #### Explanation
1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements. 1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.

64
snippets/easing-variables.md
View File

@ -6,13 +6,17 @@ powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
#### HTML #### HTML
```html ```html
<div class="easing-variables"></div> <div class="easing-variables">Hover</div>
``` ```
#### CSS #### CSS
```css ```css
:root { :root {
/* Place variables in here to use globally */
}
.easing-variables {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
@ -33,11 +37,13 @@ powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
} display: inline-block;
width: 75px;
.easing-variables { height: 75px;
width: 50px; padding: 10px;
height: 50px; color: white;
line-height: 50px;
text-align: center;
background: #333; background: #333;
transition: transform 1s var(--ease-out-quart); transition: transform 1s var(--ease-out-quart);
} }
@ -49,52 +55,6 @@ powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__easing-variables">Hover</div>
</div>
<style>
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.snippet-demo__easing-variables {
width: 75px;
height: 75px;
background: #333;
color: white;
font-size: 0.8rem;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
transition: transform 1s var(--ease-out-quart);
}
.snippet-demo__easing-variables:hover {
transform: rotate(45deg);
}
</style>
#### Explanation #### Explanation
The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document. In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher. The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document. In HTML, `:root` represents the `<html>` element and is identical to the selector `html`, except that its specificity is higher.

13
snippets/etched-text.md
View File

@ -21,19 +21,6 @@ Creates an effect where text appears to be "etched" or engraved into the backgro
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__etched-text">I appear etched into the background.</p>
</div>
<style>
.snippet-demo__etched-text {
font-size: 1.5rem;
font-weight: bold;
color: #b8bec5;
text-shadow: 0 2px 0 white;
}
</style>
#### Explanation #### Explanation
`text-shadow: 0 2px white` creates a white shadow offset `0px` horizontally and `2px` vertically `text-shadow: 0 2px white` creates a white shadow offset `0px` horizontally and `2px` vertically

16
snippets/evenly-distributed-children.md
View File

@ -23,22 +23,6 @@ Evenly distributes child elements within a parent element.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__evenly-distributed-children">
<p>Item1</p>
<p>Item2</p>
<p>Item3</p>
</div>
</div>
<style>
.snippet-demo__evenly-distributed-children {
display: flex;
width: 100%;
justify-content: space-between;
}
</style>
#### Explanation #### Explanation
1. `display: flex` enables flexbox. 1. `display: flex` enables flexbox.

16
snippets/flexbox-centering.md
View File

@ -17,26 +17,12 @@ Horizontally and vertically centers a child element within a parent element usin
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100px;
} }
``` ```
#### Demo #### Demo
<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>
#### Explanation #### Explanation
1. `display: flex` enables flexbox. 1. `display: flex` enables flexbox.

17
snippets/gradient-text.md
View File

@ -20,23 +20,6 @@ Gives text a gradient color.
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__gradient-text">
Gradient text
</p>
</div>
<style>
.snippet-demo__gradient-text {
background: -webkit-linear-gradient(pink, red);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 2rem;
font-weight: bold;
margin: 0;
}
</style>
#### Explanation #### Explanation
1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background. 1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background.

18
snippets/grid-centering.md
View File

@ -17,26 +17,12 @@ Horizontally and vertically centers a child element within a parent element usin
display: grid; display: grid;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100px;
} }
``` ```
#### Demo #### 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 #### Explanation
1. `display: grid` enables grid. 1. `display: grid` enables grid.
@ -47,6 +33,6 @@ Horizontally and vertically centers a child element within a parent element usin
<span class="snippet__support-note">✅ No caveats.</span> <span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-grid - https://caniuse.com/#feat=css-grid
<!-- tags: layout --> <!-- tags: layout -->

109
snippets/grid-layout.md
View File

@ -1,109 +0,0 @@
### Grid layout
Basic website layout using `grid`.
#### HTML
```html
<div class="grid-layout">
<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="footer">Footer</div>
</div>
```
#### CSS
```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';
color: white;
}
.grid-layout > div {
background: #333;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.footer {
grid-area: footer;
}
```
#### Demo
<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: white;
}
.snippet-demo__grid-layout > div {
background: #333;
padding: 10px;
}
.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>
#### Explanation
1. `display: grid` enables grid.
2. `grid-gap: 10px` defines spacing between the elements.
3. `grid-template-columns: repeat(3, 1fr)` defines 3 columns of the same size.
4. `grid-template-areas` defines the names of grid areas.
5. `grid-area: sidebar` makes the element use the area with the name `sidebar`.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=css-grid
<!-- tags: layout -->

28
snippets/hairline-border.md
View File

@ -37,34 +37,6 @@ very sharp and crisp.
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__hairline-border">Text with a hairline border around it.</p>
</div>
<style>
.snippet-demo__hairline-border {
box-shadow: 0 0 0 1px;
}
@media (min-resolution: 2dppx) {
.snippet-demo__hairline-border {
box-shadow: 0 0 0 0.5px;
}
}
@media (min-resolution: 3dppx) {
.snippet-demo__hairline-border {
box-shadow: 0 0 0 0.33333333px;
}
}
@media (min-resolution: 4dppx) {
.snippet-demo__hairline-border {
box-shadow: 0 0 0 0.25px;
}
}
</style>
#### Explanation #### Explanation
1. `box-shadow`, when only using spread, adds a pseudo-border which can use subpixels\*. 1. `box-shadow`, when only using spread, adds a pseudo-border which can use subpixels\*.

30
snippets/height-transition.md
View File

@ -35,36 +35,6 @@ el.style.setProperty('--max-height', height + 'px')
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__height-transition">
Hover me to see a height transition.
<div class="snippet-demo__height-transition__el">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque congue placerat nunc a volutpat. Etiam placerat libero porttitor purus facilisis vehicula. Mauris risus mauris, varius ac consequat eget, iaculis non enim. Proin ut nunc ac massa iaculis sodales id mattis enim. Cras non diam ac quam pharetra fermentum vel ac nulla. Suspendisse ligula urna, porta non lobortis non, lobortis vel velit. Fusce lectus justo, aliquet eu fringilla auctor, sodales eu orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</div>
</div>
<style>
.snippet-demo__height-transition__el {
transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
max-height: 0;
}
.snippet-demo__height-transition:hover > .snippet-demo__height-transition__el {
max-height: var(--max-height);
}
</style>
<script>
;(function () {
var el = document.querySelector('.snippet-demo__height-transition__el')
var height = el.scrollHeight
el.style.setProperty('--max-height', height + 'px')
})()
</script>
#### Explanation #### Explanation
##### CSS ##### CSS

28
snippets/hover-underline-animation.md
View File

@ -38,34 +38,6 @@ Creates an animated underline effect when the text is hovered over.
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__hover-underline-animation">Hover this text to see the effect!</p>
</div>
<style>
.snippet-demo__hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.snippet-demo__hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.snippet-demo__hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
#### Explanation #### Explanation
1. `display: inline-block` makes the block `p` an `inline-block` to prevent the underline from 1. `display: inline-block` makes the block `p` an `inline-block` to prevent the underline from

24
snippets/last-item-with-remaining-available-height.md
View File

@ -28,35 +28,13 @@ body {
} }
.container > div:last-child { .container > div:last-child {
background-color: #333; background-color: tomato;
flex: 1; flex: 1;
} }
``` ```
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__last-time-with-all-available-height">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
</div>
</div>
<style>
.snippet-demo__last-time-with-all-available-height {
height: 300px;
display: flex;
flex-direction: column;
}
.snippet-demo__last-time-with-all-available-height > div:last-child {
background-color: #333;
flex-grow: 1;
color: white;
}
</style>
#### Explanation #### Explanation
1. `height: 100%` set the height of container as viewport height. 1. `height: 100%` set the height of container as viewport height.

67
snippets/mouse-cursor-gradient-tracking.md
View File

@ -54,8 +54,8 @@ A hover effect where the gradient follows the mouse cursor.
```js ```js
var btn = document.querySelector('.mouse-cursor-gradient-tracking') var btn = document.querySelector('.mouse-cursor-gradient-tracking')
btn.onmousemove = function(e) { btn.onmousemove = function(e) {
var x = e.pageX - btn.offsetLeft var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
var y = e.pageY - btn.offsetTop var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
btn.style.setProperty('--x', x + 'px') btn.style.setProperty('--x', x + 'px')
btn.style.setProperty('--y', y + 'px') btn.style.setProperty('--y', y + 'px')
} }
@ -63,73 +63,10 @@ btn.onmousemove = function(e) {
#### Demo #### Demo
<div class="snippet-demo">
<button class="snippet-demo__mouse-cursor-gradient-tracking">
<span>Hover me</span>
</button>
</div>
<style>
.snippet-demo__mouse-cursor-gradient-tracking {
position: relative;
background: #7983ff;
padding: 0.5rem 1rem;
font-size: 1.2rem;
border: none;
color: white;
cursor: pointer;
outline: none;
overflow: hidden;
}
.snippet-demo__mouse-cursor-gradient-tracking span {
position: relative;
}
.snippet-demo__mouse-cursor-gradient-tracking::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, aqua, rgba(0,255,255,0.0001));
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
.snippet-demo__mouse-cursor-gradient-tracking:hover::before {
--size: 200px;
}
</style>
<script>
;(function () {
var btn = document.querySelector('.snippet-demo__mouse-cursor-gradient-tracking')
btn.onmousemove = function (e) {
var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
btn.style.setProperty('--x', x + 'px')
btn.style.setProperty('--y', y + 'px')
}
})()
</script>
#### Explanation #### Explanation
_TODO_ _TODO_
**Note!**
If the element's parent has a positioning context (`position: relative`), you will need to subtract
its offsets as well.
```js
var x = e.pageX - btn.offsetLeft - btn.offsetParent.offsetLeft
var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
```
#### Browser support #### Browser support
<div class="snippet__requires-javascript">Requires JavaScript</div> <div class="snippet__requires-javascript">Requires JavaScript</div>

31
snippets/not-selector.md
View File

@ -21,6 +21,10 @@ The `:not` psuedo selector is useful for styling a group of elements, while leav
display: flex; display: flex;
} }
ul {
padding-left: 0;
}
li { li {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
@ -34,33 +38,6 @@ li:not(:last-child) {
#### Demo #### Demo
<div class="snippet-demo">
<ul class="snippet-demo__css-not-selector-shortcut">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
<style>
.snippet-demo__css-not-selector-shortcut {
display: flex;
padding: 0;
}
.snippet-demo__css-not-selector-shortcut li {
list-style-type: none;
margin: 0;
padding: 0 0.75rem;
}
.snippet-demo__css-not-selector-shortcut li:not(:last-child) {
border-right: 2px solid #d2d5e4
}
</style>
#### Explanation #### Explanation
`li:not(:last-child)` specifies that the styles should apply to all `li` elements except `li:not(:last-child)` specifies that the styles should apply to all `li` elements except

38
snippets/offscreen.md
View File

@ -28,44 +28,6 @@ A bulletproof way to completely hide an element visually and positionally in the
#### Demo #### Demo
<div class="snippet-demo">
<a class="button" href="javascript:;">
Learn More
<span class="offscreen"> about pants</span>
</a>
</div>
<style>
.snippet-demo__button {
-webkit-appearance: none;
appearance: none;
background-color: #7983ff;
border: none;
border-radius: 0.25rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 1rem;
padding: 0.8rem 1rem;
text-align: center;
text-decoration: none;
transition: background-color 0.3s;
width: auto;
}
.snippet-demo__button:hover { background-color: #717aef; }
.snippet-demo__offscreen {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
</style>
#### Explanation #### Explanation
1. Remove all borders. 1. Remove all borders.

48
snippets/overflow-scroll-gradient.md
View File

@ -7,7 +7,14 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
```html ```html
<div class="overflow-scroll-gradient"> <div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller"> <div class="overflow-scroll-gradient__scroller">
Content to be scrolled Lorem ipsum dolor sit amet consectetur adipisicing elit. <br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Quisquam enim qui iure, consequatur velit sit? <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
Iure id exercitationem nulla qui repellat laborum vitae, <br>
molestias tempora velit natus. Quas, assumenda nisi. <br>
Quisquam enim qui iure, consequatur velit sit?
</div> </div>
</div> </div>
``` ```
@ -35,50 +42,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
background: white; background: white;
width: 240px; width: 240px;
height: 200px; height: 200px;
padding: 15px 0; padding: 15px;
line-height: 1.2; line-height: 1.2;
text-align: center;
} }
``` ```
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__overflow-scroll-gradient">
<div class="snippet-demo__overflow-scroll-gradient__scroller">
Content to be scrolled
</div>
</div>
</div>
<style>
.snippet-demo__overflow-scroll-gradient {
position: relative;
}
.snippet-demo__overflow-scroll-gradient::after {
content: '';
background: linear-gradient(rgba(255, 255, 255, 0.001), white);
position: absolute;
width: 240px;
height: 25px;
bottom: 0;
pointer-events: none;
}
.snippet-demo__overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: 240px;
height: 200px;
padding: 15px 0;
line-height: 1.2;
text-align: center;
}
</style>
<script>
document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').innerHTML = 'content '.repeat(100)
</script>
#### Explanation #### Explanation
1. `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements. 1. `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements.

45
snippets/popout-menu.md
View File

@ -1,11 +1,11 @@
### Popout menu ### Popout menu
Reveals an interactive popout menu on hover. Reveals an interactive popout menu on hover and focus.
#### HTML #### HTML
```html ```html
<div class="reference"> <div class="reference" tabindex="0">
<div class="popout-menu"> <div class="popout-menu">
Popout menu Popout menu
</div> </div>
@ -17,51 +17,26 @@ Reveals an interactive popout menu on hover.
```css ```css
.reference { .reference {
position: relative; position: relative;
background: tomato;
width: 100px;
height: 100px;
} }
.popout-menu { .popout-menu {
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
left: 100%; left: 100%;
background: #333;
color: white;
padding: 15px;
} }
.reference:hover > .popout-menu { .reference:hover > .popout-menu,
.reference:focus > .popout-menu {
visibility: visible; visibility: visible;
} }
``` ```
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__reference">
<div class="snippet-demo__popout-menu">
Popout menu
</div>
</div>
</div>
<style>
.snippet-demo__reference {
background: linear-gradient(135deg, #ff4c9f, #ff7b74);
height: 75px;
width: 75px;
position: relative;
will-change: transform;
}
.snippet-demo__popout-menu {
position: absolute;
visibility: hidden;
left: 100%;
background: #333;
color: white;
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
width: 100px;
text-align: center;
}
.snippet-demo__reference:hover > .snippet-demo__popout-menu {
visibility: visible;
}
</style>
#### Explanation #### Explanation
1. `position: relative` on the reference parent establishes a Cartesian positioning context for its child. 1. `position: relative` on the reference parent establishes a Cartesian positioning context for its child.

28
snippets/pretty-text-underline.md
View File

@ -32,34 +32,6 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__pretty-text-underline">Pretty text underline without clipping descending letters.</p>
</div>
<style>
.snippet-demo__pretty-text-underline {
display: inline;
text-shadow: 1px 1px 0 #f5f6f9,
-1px 1px 0 #f5f6f9,
-1px -1px 0 #f5f6f9,
1px -1px 0 #f5f6f9;
background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
background-position: bottom;
background-repeat: no-repeat;
background-size: 100% 1px;
}
.snippet-demo__pretty-text-underline::-moz-selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
.snippet-demo__pretty-text-underline::selection {
background-color: rgba(0, 150, 255, 0.3);
text-shadow: none;
}
</style>
#### Explanation #### Explanation
1. `text-shadow` uses 4 values with offsets that cover a 4x4 px area to ensure the underline 1. `text-shadow` uses 4 values with offsets that cover a 4x4 px area to ensure the underline

15
snippets/reset-all-styles.md
View File

@ -6,7 +6,7 @@ Resets all styles to default values with one property. This will not affect `dir
```html ```html
<div class="reset-all-styles"> <div class="reset-all-styles">
<h4>Title</h4> <h5>Title</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
</div> </div>
``` ```
@ -21,19 +21,6 @@ Resets all styles to default values with one property. This will not affect `dir
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__reset-all-styles">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
</div>
</div>
<style>
.snippet-demo__reset-all-styles {
all: initial;
}
</style>
#### Explanation #### Explanation
The `all` property allows you to reset all styles (inherited or not) to default values. The `all` property allows you to reset all styles (inherited or not) to default values.

20
snippets/shape-separator.md
View File

@ -28,26 +28,6 @@ Uses an SVG shape to separate two different blocks to create more a interesting
#### Demo #### Demo
<div class="snippet-demo is-distinct">
<div class="snippet-demo__shape-separator"></div>
</div>
<style>
.snippet-demo__shape-separator {
position: relative;
height: 48px;
margin: -0.75rem -1.25rem;
}
.snippet-demo__shape-separator::after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
position: absolute;
width: 100%;
height: 12px;
bottom: 0;
}
</style>
#### Explanation #### Explanation
1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements. 1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements.

28
snippets/sibling-fade.md
View File

@ -30,34 +30,6 @@ span {
#### Demo #### Demo
<div class="snippet-demo">
<nav class="snippet-demo__sibling-fade">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
<span>Item 5</span>
<span>Item 6</span>
</nav>
</div>
<style>
.snippet-demo__sibling-fade {
cursor: default;
line-height: 2;
vertical-align: middle;
}
.snippet-demo__sibling-fade span {
padding: 1rem;
transition: opacity 0.2s;
}
.snippet-demo__sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}
</style>
#### Explanation #### Explanation
1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds. 1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds.

10
snippets/system-font-stack.md
View File

@ -19,16 +19,6 @@ Uses the native font of the operating system to get close to a native app feel.
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__system-font-stack">This text uses the system font.</p>
</div>
<style>
.snippet-demo__system-font-stack {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
#### Explanation #### Explanation
The browser looks for each successive font, preferring the first one if possible, and The browser looks for each successive font, preferring the first one if possible, and

42
snippets/toggle-switch.md
View File

@ -50,48 +50,6 @@ input[type='checkbox']:checked + .switch {
#### Demo #### Demo
<div class="snippet-demo">
<input type="checkbox" id="toggle" class="snippet-demo__offscreen" />
<label for="toggle" class="snippet-demo__switch"></label>
</div>
<style>
.snippet-demo__switch {
display: inline-block;
width: 40px;
height: 20px;
background-color: rgba(0, 0, 0, 0.25);
border-radius: 20px;
position: relative;
transition: all 0.3s;
}
.snippet-demo__switch::after {
content: '';
width: 18px;
height: 18px;
border-radius: 18px;
background-color: white;
position: absolute;
top: 1px;
left: 1px;
transition: all 0.3s;
}
input[type="checkbox"]:checked + .snippet-demo__switch::after {
transform: translateX(20px);
}
input[type="checkbox"]:checked + .snippet-demo__switch {
background-color: #7983ff;
}
.snippet-demo__offscreen {
position: absolute;
left: -9999px;
}
</style>
#### Explanation #### Explanation
This effect is styling only the `<label>` element to look like a toggle switch, and hiding the actual `<input>` checkbox by positioning it offscreen. When clicking the label associated with the `<input>` element, it sets the `<input>` checkbox into the `:checked` state. This effect is styling only the `<label>` element to look like a toggle switch, and hiding the actual `<input>` checkbox by positioning it offscreen. When clicking the label associated with the `<input>` element, it sets the `<input>` checkbox into the `:checked` state.

22
snippets/transform-centering.md
View File

@ -25,32 +25,12 @@ Vertically and horizontally centers a child element within its parent element us
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
text-align: center;
} }
``` ```
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__parent">
<div class="snippet-demo__child">Centered content</div>
</div>
</div>
<style>
.snippet-demo__parent {
border: 1px solid #333;
height: 250px;
position: relative;
width: 250px;
}
.snippet-demo__child {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
#### Explanation #### Explanation
1. `position: absolute` on the child element allows it to be positioned based on its containing block. 1. `position: absolute` on the child element allows it to be positioned based on its containing block.

54
snippets/triangle.md
View File

@ -22,60 +22,6 @@ Creates a triangle shape with pure CSS.
#### Demo #### Demo
<div class="snippet-demo">
<div class="snippet-demo__triangles">
<div class="snippet-demo__triangle snippet-demo__triangle-1"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-2"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-3"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-4"></div>
<div class="snippet-demo__triangle snippet-demo__triangle-5"></div>
</div>
</div>
<style>
.snippet-demo__triangles {
display: flex;
align-items: center;
}
.snippet-demo__triangle {
display: inline-block;
width: 0;
height: 0;
margin-right: 0.25rem;
}
.snippet-demo__triangle-1 {
border-top: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.snippet-demo__triangle-2 {
border-bottom: 20px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.snippet-demo__triangle-3 {
border-left: 20px solid #333;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.snippet-demo__triangle-4 {
border-right: 20px solid #333;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.snippet-demo__triangle-5 {
border-top: 40px solid #333;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
</style>
#### Explanation #### Explanation
[View this link for a detailed explanation.](https://stackoverflow.com/q/7073484) [View this link for a detailed explanation.](https://stackoverflow.com/q/7073484)

16
snippets/truncate-text.md
View File

@ -21,22 +21,6 @@ If the text is longer than one line, it will be truncated and end with an ellips
#### Demo #### Demo
<div class="snippet-demo">
<p class="snippet-demo__truncate-text">
This text will be truncated if it exceeds 200px in width.
</p>
</div>
<style>
.snippet-demo__truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
margin: 0;
}
</style>
#### Explanation #### Explanation
1. `overflow: hidden` prevents the text from overflowing its dimensions 1. `overflow: hidden` prevents the text from overflowing its dimensions

3
utils/utils.js
View File

@ -18,3 +18,6 @@ exports.createElement = str => {
el.innerHTML = str el.innerHTML = str
return el.firstElementChild return el.firstElementChild
} }
exports.getCode = (type, str) =>
(str.match(new RegExp('```' + type + '([\\s\\S]*?)```')) || [])[1] || ''