From 11eff23e47b0cf8b0af706090127ebf3685ace3f Mon Sep 17 00:00:00 2001 From: atomiks Date: Fri, 5 Oct 2018 09:18:51 +1000 Subject: [PATCH] Autoscoping (#103) * 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 --- CONTRIBUTING.md | 12 +- scripts/build.js | 21 +++- snippets/bouncing-loader.md | 39 ------- snippets/box-sizing-reset.md | 37 +++--- snippets/circle.md | 13 --- snippets/clearfix.md | 20 ---- snippets/constant-width-to-height-ratio.md | 23 ---- snippets/counter.md | 29 ----- snippets/custom-scrollbar.md | 59 +++------- snippets/custom-text-selection.md | 15 --- snippets/custom-variables.md | 29 +---- snippets/disable-selection.md | 11 -- snippets/display-table-centering.md | 26 ----- snippets/donut-spinner.md | 20 ---- snippets/dynamic-shadow.md | 25 ---- snippets/easing-variables.md | 64 ++-------- snippets/etched-text.md | 13 --- snippets/evenly-distributed-children.md | 16 --- snippets/flexbox-centering.md | 16 +-- snippets/gradient-text.md | 17 --- snippets/grid-centering.md | 18 +-- snippets/grid-layout.md | 109 ------------------ snippets/hairline-border.md | 28 ----- snippets/height-transition.md | 30 ----- snippets/hover-underline-animation.md | 28 ----- ...st-item-with-remaining-available-height.md | 24 +--- snippets/mouse-cursor-gradient-tracking.md | 67 +---------- snippets/not-selector.md | 31 +---- snippets/offscreen.md | 38 ------ snippets/overflow-scroll-gradient.md | 48 ++------ snippets/popout-menu.md | 45 ++------ snippets/pretty-text-underline.md | 28 ----- snippets/reset-all-styles.md | 15 +-- snippets/shape-separator.md | 20 ---- snippets/sibling-fade.md | 28 ----- snippets/system-font-stack.md | 10 -- snippets/toggle-switch.md | 42 ------- snippets/transform-centering.md | 22 +--- snippets/triangle.md | 54 --------- snippets/truncate-text.md | 16 --- utils/utils.js | 3 + 41 files changed, 107 insertions(+), 1102 deletions(-) delete mode 100644 snippets/grid-layout.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b96a810ba..f0898afb5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -16,17 +16,7 @@ Brief description #### Demo - - -
- -
- - - - + #### Explanation diff --git a/scripts/build.js b/scripts/build.js index cef631b78..85b407fa1 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -3,7 +3,8 @@ const path = require('path') const marked = require('marked') const pretty = require('pretty') 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 TAGS = [ @@ -69,7 +70,23 @@ TAGS.slice(1).forEach(tag => { for (const snippetFile of fs.readdirSync(SNIPPETS_PATH)) { const snippetPath = path.join(SNIPPETS_PATH, snippetFile) 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 = + `
${html}
` + + `` + + `${js ? `` : ''}` + + const markdown = marked(snippetData, { renderer }).replace( + '

Demo

', + `

Demo

${demo}` + ) const snippetEl = createElement(`
${markdown}
`) snippetContainer.append(snippetEl) diff --git a/snippets/bouncing-loader.md b/snippets/bouncing-loader.md index 8e74c3154..ec47ae1c1 100644 --- a/snippets/bouncing-loader.md +++ b/snippets/bouncing-loader.md @@ -47,45 +47,6 @@ Creates a bouncing loader animation. #### Demo -
-
-
-
-
-
-
- - - #### Explanation Note: `1rem` is usually `16px`. diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md index eb5a2e3fb..4d7f9d063 100644 --- a/snippets/box-sizing-reset.md +++ b/snippets/box-sizing-reset.md @@ -2,38 +2,41 @@ Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`. +#### HTML + +```html +
border-box
+
content-box
+``` + #### CSS ```css html { box-sizing: border-box; } - *, *::before, *::after { 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
-
- - - #### Explanation 1. `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`. diff --git a/snippets/circle.md b/snippets/circle.md index 60e373e18..3c961477b 100644 --- a/snippets/circle.md +++ b/snippets/circle.md @@ -21,19 +21,6 @@ Creates a circle shape with pure CSS. #### Demo -
-
-
- - - #### Explanation `border-radius: 50%` curves the borders of an element to create a circle. diff --git a/snippets/clearfix.md b/snippets/clearfix.md index 82ee5d7b7..0e987e113 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -30,26 +30,6 @@ Ensures that an element self-clears its children. #### Demo -
-
-
float a
-
float b
-
float c
-
-
- - - #### Explanation 1. `.clearfix::after` defines a pseudo-element. diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md index 58f52f68a..bbcb718db 100644 --- a/snippets/constant-width-to-height-ratio.md +++ b/snippets/constant-width-to-height-ratio.md @@ -30,29 +30,6 @@ Given an element of variable width, it will ensure its height remains proportion #### Demo -Resize your browser window to see the proportion of the element remain the same. - -
-
-
- - - #### Explanation `padding-top` on the `::before` pseudo-element causes the height of the element to equal a percentage of diff --git a/snippets/counter.md b/snippets/counter.md index 9a9605946..fcd2750a8 100644 --- a/snippets/counter.md +++ b/snippets/counter.md @@ -34,35 +34,6 @@ li::before { #### Demo -
-
-
    -
  • List item
    • -
  • List item
    • -
  • - List item -
      -
    • List item
      • -
    • List item
      • -
    • List item
      • -
    -
    • -
-
-
- - - #### Explanation You can create a ordered list using any type of HTML. diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md index e6542dbbf..de1d5632e 100644 --- a/snippets/custom-scrollbar.md +++ b/snippets/custom-scrollbar.md @@ -6,74 +6,49 @@ Customizes the scrollbar style for the document and elements with scrollable ove ```html
-

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?

+

+ 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? +

``` #### CSS ```css -/* Document scrollbar */ -::-webkit-scrollbar { +.custom-scrollbar { + height: 70px; + overflow-y: scroll; +} + +/* To style the document scrollbar, remove `.custom-scrollbar` */ + +.custom-scrollbar::-webkit-scrollbar { width: 8px; } -::-webkit-scrollbar-track { +.custom-scrollbar::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; } -::-webkit-scrollbar-thumb { +.custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } - -/* Scrollable element */ -.some-element::webkit-scrollbar { -} ``` #### Demo -
-
-

- 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? -

-

- 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? -

-
-
- - - #### Explanation 1. `::-webkit-scrollbar` targets the whole scrollbar element. 2. `::-webkit-scrollbar-track` targets only the scrollbar track. 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 diff --git a/snippets/custom-text-selection.md b/snippets/custom-text-selection.md index 927c0937a..cc248e283 100644 --- a/snippets/custom-text-selection.md +++ b/snippets/custom-text-selection.md @@ -23,21 +23,6 @@ Changes the styling of text selection. #### Demo -
-

Select some of this text.

-
- - - #### 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. diff --git a/snippets/custom-variables.md b/snippets/custom-variables.md index 2313f4ff7..0c98a74dd 100644 --- a/snippets/custom-variables.md +++ b/snippets/custom-variables.md @@ -12,13 +12,14 @@ CSS variables that contain specific values to be reused throughout a document. ```css :root { + /* Place variables within here to use the variables globally. */ +} + +.custom-variables { --some-color: #da7800; --some-keyword: italic; --some-size: 1.25em; --some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray; -} - -.custom-variables { color: var(--some-color); font-size: var(--some-size); font-style: var(--some-keyword); @@ -28,28 +29,6 @@ CSS variables that contain specific values to be reused throughout a document. #### Demo -
-
-

CSS is awesome!

-
-
- - - #### 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. diff --git a/snippets/disable-selection.md b/snippets/disable-selection.md index 5d3094414..1291f9a82 100644 --- a/snippets/disable-selection.md +++ b/snippets/disable-selection.md @@ -19,17 +19,6 @@ Makes the content unselectable. #### Demo -
-

You can select me.

-

You can't select me!

-
- - - #### Explanation `user-select: none` specifies that the text cannot be selected. diff --git a/snippets/display-table-centering.md b/snippets/display-table-centering.md index 11d091a68..02c5d2b74 100644 --- a/snippets/display-table-centering.md +++ b/snippets/display-table-centering.md @@ -36,32 +36,6 @@ Vertically and horizontally centers a child element within its parent element us #### Demo -
-
-
- Centered content -
-
-
- - - #### Explanation 1. `display: table` on '.center' allows the element to behave like a `` HTML element. diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md index 215972229..3d6de3861 100644 --- a/snippets/donut-spinner.md +++ b/snippets/donut-spinner.md @@ -32,26 +32,6 @@ Creates a donut spinner that can be used to indicate the loading of content. #### Demo -
- -
- - - #### Explanation Use a semi-transparent `border` for the whole element, except one side that will diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md index e18b586a2..c64c2b50c 100644 --- a/snippets/dynamic-shadow.md +++ b/snippets/dynamic-shadow.md @@ -33,31 +33,6 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element #### Demo -
-
-
- - - #### Explanation 1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements. diff --git a/snippets/easing-variables.md b/snippets/easing-variables.md index 711642b27..7035b2695 100644 --- a/snippets/easing-variables.md +++ b/snippets/easing-variables.md @@ -6,13 +6,17 @@ powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`. #### HTML ```html -
+
Hover
``` #### CSS ```css :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-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); --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-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); -} - -.easing-variables { - width: 50px; - height: 50px; + display: inline-block; + width: 75px; + height: 75px; + padding: 10px; + color: white; + line-height: 50px; + text-align: center; background: #333; 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 -
-
Hover
-
- - - #### 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 `` element and is identical to the selector `html`, except that its specificity is higher. diff --git a/snippets/etched-text.md b/snippets/etched-text.md index 0f03b8f65..94471be9f 100644 --- a/snippets/etched-text.md +++ b/snippets/etched-text.md @@ -21,19 +21,6 @@ Creates an effect where text appears to be "etched" or engraved into the backgro #### Demo -
-

I appear etched into the background.

-
- - - #### Explanation `text-shadow: 0 2px white` creates a white shadow offset `0px` horizontally and `2px` vertically diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md index 52583be88..e73f8cef0 100644 --- a/snippets/evenly-distributed-children.md +++ b/snippets/evenly-distributed-children.md @@ -23,22 +23,6 @@ Evenly distributes child elements within a parent element. #### Demo -
-
-

Item1

-

Item2

-

Item3

-
-
- - - #### Explanation 1. `display: flex` enables flexbox. diff --git a/snippets/flexbox-centering.md b/snippets/flexbox-centering.md index 3b651181b..747b3474c 100644 --- a/snippets/flexbox-centering.md +++ b/snippets/flexbox-centering.md @@ -17,26 +17,12 @@ Horizontally and vertically centers a child element within a parent element usin display: flex; justify-content: center; align-items: center; + height: 100px; } ``` #### Demo -
-
-

Centered content.

-
-
- - - #### Explanation 1. `display: flex` enables flexbox. diff --git a/snippets/gradient-text.md b/snippets/gradient-text.md index 1c57c4f15..78bda08e8 100644 --- a/snippets/gradient-text.md +++ b/snippets/gradient-text.md @@ -20,23 +20,6 @@ Gives text a gradient color. #### Demo -
-

- Gradient text -

-
- - - #### Explanation 1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background. diff --git a/snippets/grid-centering.md b/snippets/grid-centering.md index be6672a26..01d9630c5 100644 --- a/snippets/grid-centering.md +++ b/snippets/grid-centering.md @@ -17,26 +17,12 @@ Horizontally and vertically centers a child element within a parent element usin display: grid; justify-content: center; align-items: center; + height: 100px; } ``` #### Demo -
-
-

Centered content.

-
-
- - - #### Explanation 1. `display: grid` enables grid. @@ -47,6 +33,6 @@ Horizontally and vertically centers a child element within a parent element usin ✅ No caveats. -* https://caniuse.com/#feat=css-grid +- https://caniuse.com/#feat=css-grid diff --git a/snippets/grid-layout.md b/snippets/grid-layout.md deleted file mode 100644 index 5272839fd..000000000 --- a/snippets/grid-layout.md +++ /dev/null @@ -1,109 +0,0 @@ -### Grid layout - -Basic website layout using `grid`. - -#### HTML - -```html -
-
Header
-
Sidebar
-
- Content -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. -
-
Footer
-
-``` - -#### 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 - -
-
-
Header
-
Sidebar
-
Content -
Lorem ipsum dolor sit amet, consectetur adipisicing elit. -
-
Footer
-
-
- - - -#### 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 - -✅ No caveats. - -* https://caniuse.com/#feat=css-grid - - diff --git a/snippets/hairline-border.md b/snippets/hairline-border.md index e473077f1..0363369f6 100644 --- a/snippets/hairline-border.md +++ b/snippets/hairline-border.md @@ -37,34 +37,6 @@ very sharp and crisp. #### Demo -
-

Text with a hairline border around it.

-
- - - #### Explanation 1. `box-shadow`, when only using spread, adds a pseudo-border which can use subpixels\*. diff --git a/snippets/height-transition.md b/snippets/height-transition.md index 75159e859..917904755 100644 --- a/snippets/height-transition.md +++ b/snippets/height-transition.md @@ -35,36 +35,6 @@ el.style.setProperty('--max-height', height + 'px') #### Demo -
-
- Hover me to see a height transition. -
- 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. -
-
-
- - - - - #### Explanation ##### CSS diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index d84e1429c..016dbde04 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -38,34 +38,6 @@ Creates an animated underline effect when the text is hovered over. #### Demo -
-

Hover this text to see the effect!

-
- - - #### Explanation 1. `display: inline-block` makes the block `p` an `inline-block` to prevent the underline from diff --git a/snippets/last-item-with-remaining-available-height.md b/snippets/last-item-with-remaining-available-height.md index 3aff3b35a..8e572b07e 100644 --- a/snippets/last-item-with-remaining-available-height.md +++ b/snippets/last-item-with-remaining-available-height.md @@ -28,35 +28,13 @@ body { } .container > div:last-child { - background-color: #333; + background-color: tomato; flex: 1; } ``` #### Demo -
-
-
Div 1
-
Div 2
-
Div 3
-
-
- - - #### Explanation 1. `height: 100%` set the height of container as viewport height. diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md index 628c67348..9d7f694fa 100644 --- a/snippets/mouse-cursor-gradient-tracking.md +++ b/snippets/mouse-cursor-gradient-tracking.md @@ -54,8 +54,8 @@ A hover effect where the gradient follows the mouse cursor. ```js var btn = document.querySelector('.mouse-cursor-gradient-tracking') btn.onmousemove = function(e) { - var x = e.pageX - btn.offsetLeft - var y = e.pageY - btn.offsetTop + 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') } @@ -63,73 +63,10 @@ btn.onmousemove = function(e) { #### Demo -
- -
- - - - - #### Explanation _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
Requires JavaScript
diff --git a/snippets/not-selector.md b/snippets/not-selector.md index 067df1b49..41ba6e07f 100644 --- a/snippets/not-selector.md +++ b/snippets/not-selector.md @@ -21,6 +21,10 @@ The `:not` psuedo selector is useful for styling a group of elements, while leav display: flex; } +ul { + padding-left: 0; +} + li { list-style-type: none; margin: 0; @@ -34,33 +38,6 @@ li:not(:last-child) { #### Demo -
- -
- - - #### Explanation `li:not(:last-child)` specifies that the styles should apply to all `li` elements except diff --git a/snippets/offscreen.md b/snippets/offscreen.md index ad1bba4ca..fb2df7713 100644 --- a/snippets/offscreen.md +++ b/snippets/offscreen.md @@ -28,44 +28,6 @@ A bulletproof way to completely hide an element visually and positionally in the #### Demo -
- - Learn More - about pants - -
- - - #### Explanation 1. Remove all borders. diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md index 94dd4b776..27825d7ef 100644 --- a/snippets/overflow-scroll-gradient.md +++ b/snippets/overflow-scroll-gradient.md @@ -7,7 +7,14 @@ Adds a fading gradient to an overflowing element to better indicate there is mor ```html
- Content to be scrolled + 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?
+ 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?
``` @@ -35,50 +42,13 @@ Adds a fading gradient to an overflowing element to better indicate there is mor background: white; width: 240px; height: 200px; - padding: 15px 0; + padding: 15px; line-height: 1.2; - text-align: center; } ``` #### Demo -
-
-
- Content to be scrolled -
-
-
- - - - - #### Explanation 1. `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements. diff --git a/snippets/popout-menu.md b/snippets/popout-menu.md index 859a33475..bac7bf675 100644 --- a/snippets/popout-menu.md +++ b/snippets/popout-menu.md @@ -1,11 +1,11 @@ ### Popout menu -Reveals an interactive popout menu on hover. +Reveals an interactive popout menu on hover and focus. #### HTML ```html -
+
Popout menu
@@ -17,51 +17,26 @@ Reveals an interactive popout menu on hover. ```css .reference { position: relative; + background: tomato; + width: 100px; + height: 100px; } .popout-menu { position: absolute; visibility: hidden; left: 100%; + background: #333; + color: white; + padding: 15px; } -.reference:hover > .popout-menu { +.reference:hover > .popout-menu, +.reference:focus > .popout-menu { visibility: visible; } ``` #### Demo -
-
-
- Popout menu -
-
-
- - - #### Explanation 1. `position: relative` on the reference parent establishes a Cartesian positioning context for its child. diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index fb698592e..0d2e5f02b 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -32,34 +32,6 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control #### Demo -
-

Pretty text underline without clipping descending letters.

-
- - - #### Explanation 1. `text-shadow` uses 4 values with offsets that cover a 4x4 px area to ensure the underline diff --git a/snippets/reset-all-styles.md b/snippets/reset-all-styles.md index 7d707a5ae..4ba798893 100644 --- a/snippets/reset-all-styles.md +++ b/snippets/reset-all-styles.md @@ -6,7 +6,7 @@ Resets all styles to default values with one property. This will not affect `dir ```html
-

Title

+
Title

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?

``` @@ -21,19 +21,6 @@ Resets all styles to default values with one property. This will not affect `dir #### Demo -
-
-

Title

-

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?

-
-
- - - #### Explanation The `all` property allows you to reset all styles (inherited or not) to default values. diff --git a/snippets/shape-separator.md b/snippets/shape-separator.md index 3b1c9ba2a..94dbce67e 100644 --- a/snippets/shape-separator.md +++ b/snippets/shape-separator.md @@ -28,26 +28,6 @@ Uses an SVG shape to separate two different blocks to create more a interesting #### Demo -
-
-
- - - #### Explanation 1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements. diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md index fb454aeaa..528190baa 100644 --- a/snippets/sibling-fade.md +++ b/snippets/sibling-fade.md @@ -30,34 +30,6 @@ span { #### Demo -
- -
- - - #### Explanation 1. `transition: opacity 0.2s` specifies that changes to opacity will be transitioned over 0.2 seconds. diff --git a/snippets/system-font-stack.md b/snippets/system-font-stack.md index bc92b01f9..137f77842 100644 --- a/snippets/system-font-stack.md +++ b/snippets/system-font-stack.md @@ -19,16 +19,6 @@ Uses the native font of the operating system to get close to a native app feel. #### Demo -
-

This text uses the system font.

-
- - - #### Explanation The browser looks for each successive font, preferring the first one if possible, and diff --git a/snippets/toggle-switch.md b/snippets/toggle-switch.md index 98961619e..aad58ea92 100644 --- a/snippets/toggle-switch.md +++ b/snippets/toggle-switch.md @@ -50,48 +50,6 @@ input[type='checkbox']:checked + .switch { #### Demo -
- - -
- - - #### Explanation This effect is styling only the `