From 343f8fd4c79c4b3583cffff536fbeb28e09e8915 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 22 Aug 2019 12:30:43 +0300 Subject: [PATCH] Update snippet structure --- snippets/bouncing-loader.md | 8 ++++++-- snippets/box-sizing-reset.md | 8 ++++++-- snippets/button-border-animation.md | 8 ++++++-- snippets/calc.md | 8 ++++++-- snippets/circle.md | 8 ++++++-- snippets/clearfix.md | 8 ++++++-- snippets/constant-width-to-height-ratio.md | 8 ++++++-- snippets/counter.md | 8 ++++++-- snippets/custom-scrollbar.md | 8 ++++++-- snippets/custom-text-selection.md | 8 ++++++-- snippets/custom-variables.md | 8 ++++++-- snippets/disable-selection.md | 8 ++++++-- snippets/display-table-centering.md | 8 ++++++-- snippets/donut-spinner.md | 8 ++++++-- snippets/dynamic-shadow.md | 8 ++++++-- snippets/easing-variables.md | 8 ++++++-- snippets/etched-text.md | 8 ++++++-- snippets/evenly-distributed-children.md | 8 ++++++-- snippets/fit-image-in-container.md | 8 ++++++-- snippets/flexbox-centering.md | 8 ++++++-- snippets/focus-within.md | 8 ++++++-- snippets/fullscreen.md | 8 ++++++-- snippets/ghost-trick.md | 8 ++++++-- snippets/gradient-text.md | 8 ++++++-- snippets/grid-centering.md | 8 ++++++-- snippets/hairline-border.md | 8 ++++++-- snippets/height-transition.md | 8 ++++++-- snippets/hover-shadow-box-animation.md | 8 ++++++-- snippets/hover-underline-animation.md | 8 ++++++-- snippets/last-item-with-remaining-available-height.md | 8 ++++++-- snippets/mouse-cursor-gradient-tracking.md | 8 ++++++-- snippets/not-selector.md | 8 ++++++-- snippets/offscreen.md | 8 ++++++-- snippets/overflow-scroll-gradient.md | 8 ++++++-- snippets/popout-menu.md | 8 ++++++-- snippets/pretty-text-underline.md | 8 ++++++-- snippets/reset-all-styles.md | 8 ++++++-- snippets/shape-separator.md | 8 ++++++-- snippets/sibling-fade.md | 8 ++++++-- snippets/system-font-stack.md | 8 ++++++-- snippets/toggle-switch.md | 8 ++++++-- snippets/transform-centering.md | 8 ++++++-- snippets/triangle.md | 8 ++++++-- snippets/truncate-text-multiline.md | 8 ++++++-- snippets/truncate-text.md | 8 ++++++-- snippets/zebra-striped-list.md | 8 ++++++-- 46 files changed, 276 insertions(+), 92 deletions(-) diff --git a/snippets/bouncing-loader.md b/snippets/bouncing-loader.md index d2413e3ad..91ded94f7 100644 --- a/snippets/bouncing-loader.md +++ b/snippets/bouncing-loader.md @@ -1,4 +1,7 @@ -### Bouncing loader +--- +title: Bouncing loader +tags: animation,intermediate +--- Creates a bouncing loader animation. @@ -67,4 +70,5 @@ Note: `1rem` is usually `16px`. - https://caniuse.com/#feat=css-animation - + + diff --git a/snippets/box-sizing-reset.md b/snippets/box-sizing-reset.md index 4bf2f2dca..2426ae314 100644 --- a/snippets/box-sizing-reset.md +++ b/snippets/box-sizing-reset.md @@ -1,4 +1,7 @@ -### Box-sizing reset +--- +title: Box-sizing reset +tags: layout,intermediate +--- Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`. @@ -45,4 +48,5 @@ html { - https://caniuse.com/#feat=css3-boxsizing - + + diff --git a/snippets/button-border-animation.md b/snippets/button-border-animation.md index 0ef048551..b7a633bb2 100644 --- a/snippets/button-border-animation.md +++ b/snippets/button-border-animation.md @@ -1,4 +1,7 @@ -### Button border animation +--- +title: Button border animation +tags: animation,intermediate +--- Creates a border animation on hover. @@ -56,5 +59,6 @@ Use the `:before` and `:after` pseduo-elements as borders that animate on hover. #### Browser support - + + diff --git a/snippets/calc.md b/snippets/calc.md index b37d22a5a..5c6af10ac 100644 --- a/snippets/calc.md +++ b/snippets/calc.md @@ -1,4 +1,7 @@ -### Calc() +--- +title: Calc() +tags: other,intermediate +--- The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression. @@ -50,4 +53,5 @@ So now it's possible using calc(): - https://caniuse.com/#feat=calc - + + diff --git a/snippets/circle.md b/snippets/circle.md index 3f5d5bfed..33c189bfa 100644 --- a/snippets/circle.md +++ b/snippets/circle.md @@ -1,4 +1,7 @@ -### Circle +--- +title: Circle +tags: visual,intermediate +--- Creates a circle shape with pure CSS. @@ -32,4 +35,5 @@ values will create an ellipse. - https://caniuse.com/#feat=border-radius - + + diff --git a/snippets/clearfix.md b/snippets/clearfix.md index 0e987e113..058ca5cc6 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -1,4 +1,7 @@ -### Clearfix +--- +title: Clearfix +tags: layout,intermediate +--- Ensures that an element self-clears its children. @@ -41,4 +44,5 @@ Ensures that an element self-clears its children. ⚠️ 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). - + + diff --git a/snippets/constant-width-to-height-ratio.md b/snippets/constant-width-to-height-ratio.md index a5472c3f0..5baa17292 100644 --- a/snippets/constant-width-to-height-ratio.md +++ b/snippets/constant-width-to-height-ratio.md @@ -1,4 +1,7 @@ -### Constant width to height ratio +--- +title: Constant width to height ratio +tags: layout,intermediate +--- Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant). @@ -40,4 +43,5 @@ This method also allows content to be placed inside the element normally. #### Browser support - + + diff --git a/snippets/counter.md b/snippets/counter.md index 937f5cb73..47ccc2d43 100644 --- a/snippets/counter.md +++ b/snippets/counter.md @@ -1,4 +1,7 @@ -### Counter +--- +title: Counter +tags: visual, other,intermediate +--- Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. @@ -52,4 +55,5 @@ You can create a ordered list using any type of HTML. - https://caniuse.com/#feat=css-counters - + + diff --git a/snippets/custom-scrollbar.md b/snippets/custom-scrollbar.md index 522e9e77e..17d66b58a 100644 --- a/snippets/custom-scrollbar.md +++ b/snippets/custom-scrollbar.md @@ -1,4 +1,7 @@ -### Custom scrollbar +--- +title: Custom scrollbar +tags: visual,intermediate +--- Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms. @@ -56,4 +59,5 @@ There are many other pseudo-elements that you can use to style scrollbars. For m - https://caniuse.com/#feat=css-scrollbar - + + diff --git a/snippets/custom-text-selection.md b/snippets/custom-text-selection.md index f8e6ed505..a7937a616 100644 --- a/snippets/custom-text-selection.md +++ b/snippets/custom-text-selection.md @@ -1,4 +1,7 @@ -### Custom text selection +--- +title: Custom text selection +tags: visual,intermediate +--- Changes the styling of text selection. @@ -34,4 +37,5 @@ in any specification. - https://caniuse.com/#feat=css-selection - + + diff --git a/snippets/custom-variables.md b/snippets/custom-variables.md index b2ecdc8c7..33ac5b8cb 100644 --- a/snippets/custom-variables.md +++ b/snippets/custom-variables.md @@ -1,4 +1,7 @@ -### Custom variables +--- +title: Custom variables +tags: other,intermediate +--- CSS variables that contain specific values to be reused throughout a document. @@ -41,4 +44,5 @@ Reuse variables throughout the document using the `var(--variable-name)` functio - https://caniuse.com/#feat=css-variables - + + diff --git a/snippets/disable-selection.md b/snippets/disable-selection.md index f9eed78b3..b0aac7ef7 100644 --- a/snippets/disable-selection.md +++ b/snippets/disable-selection.md @@ -1,4 +1,7 @@ -### Disable selection +--- +title: Disable selection +tags: interactivity,intermediate +--- Makes the content unselectable. @@ -31,4 +34,5 @@ Makes the content unselectable. - https://caniuse.com/#feat=user-select-none - + + diff --git a/snippets/display-table-centering.md b/snippets/display-table-centering.md index 5fe9cb00c..a45b48df8 100644 --- a/snippets/display-table-centering.md +++ b/snippets/display-table-centering.md @@ -1,4 +1,7 @@ -### Display table centering +--- +title: Display table centering +tags: layout,intermediate +--- Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`). @@ -48,4 +51,5 @@ The outer parent ('.container' in this case) must have a fixed height and width. - https://caniuse.com/#search=display%3A%20table - + + diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md index 47a8088e3..9e1dcd8e4 100644 --- a/snippets/donut-spinner.md +++ b/snippets/donut-spinner.md @@ -1,4 +1,7 @@ -### Donut spinner +--- +title: Donut spinner +tags: animation,intermediate +--- Creates a donut spinner that can be used to indicate the loading of content. @@ -44,4 +47,5 @@ serve as the loading indicator for the donut. Use `animation` to rotate the elem - https://caniuse.com/#feat=css-animation - https://caniuse.com/#feat=transforms2d - + + diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md index 2fd829967..db34c1a41 100644 --- a/snippets/dynamic-shadow.md +++ b/snippets/dynamic-shadow.md @@ -1,4 +1,7 @@ -### Dynamic shadow +--- +title: Dynamic shadow +tags: visual,intermediate +--- Creates a shadow similar to `box-shadow` but based on the colors of the element itself. @@ -52,4 +55,5 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element - https://caniuse.com/#feat=css-filters - + + diff --git a/snippets/easing-variables.md b/snippets/easing-variables.md index 873ae350f..bcded771b 100644 --- a/snippets/easing-variables.md +++ b/snippets/easing-variables.md @@ -1,4 +1,7 @@ -### Easing variables +--- +title: Easing variables +tags: animation,intermediate +--- Variables that can be reused for `transition-timing-function` properties, more powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`. @@ -63,4 +66,5 @@ The variables are defined globally within the `:root` CSS pseudo-class which mat - https://caniuse.com/#feat=css-variables - + + diff --git a/snippets/etched-text.md b/snippets/etched-text.md index 302021b06..97af72f28 100644 --- a/snippets/etched-text.md +++ b/snippets/etched-text.md @@ -1,4 +1,7 @@ -### Etched text +--- +title: Etched text +tags: visual,intermediate +--- Creates an effect where text appears to be "etched" or engraved into the background. @@ -35,4 +38,5 @@ of the background. - https://caniuse.com/#feat=css-textshadow - + + diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md index 970ceb37a..6f33e7ca9 100644 --- a/snippets/evenly-distributed-children.md +++ b/snippets/evenly-distributed-children.md @@ -1,4 +1,7 @@ -### Evenly distributed children +--- +title: Evenly distributed children +tags: layout,intermediate +--- Evenly distributes child elements within a parent element. @@ -36,4 +39,5 @@ Alternatively, use `justify-content: space-around` to distribute the children wi - https://caniuse.com/#feat=flexbox - + + diff --git a/snippets/fit-image-in-container.md b/snippets/fit-image-in-container.md index 95199b949..77909f972 100644 --- a/snippets/fit-image-in-container.md +++ b/snippets/fit-image-in-container.md @@ -1,4 +1,7 @@ -### Fit image in container +--- +title: Fit image in container +tags: layout, visual,intermediate +--- Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property. @@ -42,5 +45,6 @@ Changes the fit and position of an image within its container while preserving i - https://caniuse.com/#feat=object-fit - + + diff --git a/snippets/flexbox-centering.md b/snippets/flexbox-centering.md index c652932f5..44f674494 100644 --- a/snippets/flexbox-centering.md +++ b/snippets/flexbox-centering.md @@ -1,4 +1,7 @@ -### Flexbox centering +--- +title: Flexbox centering +tags: layout,intermediate +--- Horizontally and vertically centers a child element within a parent element using `flexbox`. @@ -33,4 +36,5 @@ Horizontally and vertically centers a child element within a parent element usin - https://caniuse.com/#feat=flexbox - + + diff --git a/snippets/focus-within.md b/snippets/focus-within.md index 2f95a83ef..87ff62a6a 100644 --- a/snippets/focus-within.md +++ b/snippets/focus-within.md @@ -1,4 +1,7 @@ -### Focus Within +--- +title: Focus Within +tags: visual, interactivity,intermediate +--- Changes the appearance of a form if any of its children are focused. @@ -45,4 +48,5 @@ If no link is provided, it defaults to 99+%. --> - https://caniuse.com/#feat=css-focus-within - + + diff --git a/snippets/fullscreen.md b/snippets/fullscreen.md index 64ff47688..7d92af517 100644 --- a/snippets/fullscreen.md +++ b/snippets/fullscreen.md @@ -1,4 +1,7 @@ -### Fullscreen +--- +title: Fullscreen +tags: visual,intermediate +--- The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode. @@ -58,4 +61,5 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the - https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen - https://caniuse.com/#feat=fullscreen - + + diff --git a/snippets/ghost-trick.md b/snippets/ghost-trick.md index 46d1cd866..f3b502ba5 100644 --- a/snippets/ghost-trick.md +++ b/snippets/ghost-trick.md @@ -1,4 +1,7 @@ -### Ghost trick +--- +title: Ghost trick +tags: layout,intermediate +--- Vertically centers an element in another. @@ -41,4 +44,5 @@ Use the style of a `:before` pseudo-element to vertically align inline elements - https://caniuse.com/#feat=inline-block - + + diff --git a/snippets/gradient-text.md b/snippets/gradient-text.md index 0dd1f770e..87564fc3a 100644 --- a/snippets/gradient-text.md +++ b/snippets/gradient-text.md @@ -1,4 +1,7 @@ -### Gradient text +--- +title: Gradient text +tags: visual,intermediate +--- Gives text a gradient color. @@ -33,4 +36,5 @@ Gives text a gradient color. - https://caniuse.com/#feat=text-stroke - + + diff --git a/snippets/grid-centering.md b/snippets/grid-centering.md index e43c91237..0ad17ed23 100644 --- a/snippets/grid-centering.md +++ b/snippets/grid-centering.md @@ -1,4 +1,7 @@ -### Grid centering +--- +title: Grid centering +tags: layout,intermediate +--- Horizontally and vertically centers a child element within a parent element using `grid`. @@ -31,4 +34,5 @@ Horizontally and vertically centers a child element within a parent element usin - https://caniuse.com/#feat=css-grid - + + diff --git a/snippets/hairline-border.md b/snippets/hairline-border.md index aed83f63b..fd7ecc035 100644 --- a/snippets/hairline-border.md +++ b/snippets/hairline-border.md @@ -1,4 +1,7 @@ -### Hairline border +--- +title: Hairline border +tags: visual,intermediate +--- Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp. @@ -54,4 +57,5 @@ very sharp and crisp. \*Chrome does not support subpixel values on `border`. Safari does not support subpixel values on `box-shadow`. Firefox supports subpixel values on both. - + + diff --git a/snippets/height-transition.md b/snippets/height-transition.md index f697b3757..624c99540 100644 --- a/snippets/height-transition.md +++ b/snippets/height-transition.md @@ -1,4 +1,7 @@ -### Height transition +--- +title: Height transition +tags: animation,intermediate +--- Transitions an element's height from `0` to `auto` when its height is unknown. @@ -62,4 +65,5 @@ el.style.setProperty('--max-height', height + 'px') - https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-transitions - + + diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index a6e5c47a4..a68f737b7 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -1,4 +1,7 @@ -### Hover shadow box animation +--- +title: Hover shadow box animation +tags: animation,intermediate +--- Creates a shadow box around the text when it is hovered. @@ -45,4 +48,5 @@ Creates a shadow box around the text when it is hovered. - https://caniuse.com/#feat=transforms3d - https://caniuse.com/#feat=css-transitions - + + diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 7a1bfd746..cb7480a0a 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -1,4 +1,7 @@ -### Hover underline animation +--- +title: Hover underline animation +tags: animation,intermediate +--- Creates an animated underline effect when the text is hovered over. @@ -60,4 +63,5 @@ Creates an animated underline effect when the text is hovered over. - https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=css-transitions - + + diff --git a/snippets/last-item-with-remaining-available-height.md b/snippets/last-item-with-remaining-available-height.md index 0aab7f353..cc77aded3 100644 --- a/snippets/last-item-with-remaining-available-height.md +++ b/snippets/last-item-with-remaining-available-height.md @@ -1,4 +1,7 @@ -### Last item with remaining available height +--- +title: Last item with remaining available height +tags: layout,intermediate +--- Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window. @@ -50,5 +53,6 @@ The parent must have a viewport height. `flex-grow: 1` could be applied to the f - https://caniuse.com/#feat=flexbox - + + diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md index ca700b3df..81688b536 100644 --- a/snippets/mouse-cursor-gradient-tracking.md +++ b/snippets/mouse-cursor-gradient-tracking.md @@ -1,4 +1,7 @@ -### Mouse cursor gradient tracking +--- +title: Mouse cursor gradient tracking +tags: visual, interactivity,intermediate +--- A hover effect where the gradient follows the mouse cursor. @@ -72,4 +75,5 @@ _TODO_ - https://caniuse.com/#feat=css-variables - + + diff --git a/snippets/not-selector.md b/snippets/not-selector.md index 02da49bbb..0e515d9cb 100644 --- a/snippets/not-selector.md +++ b/snippets/not-selector.md @@ -1,4 +1,7 @@ -### :not selector +--- +title: :not selector +tags: visual,intermediate +--- The `:not` psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled. @@ -46,4 +49,5 @@ the `:last-child`. - https://caniuse.com/#feat=css-sel3 - + + diff --git a/snippets/offscreen.md b/snippets/offscreen.md index 47d750a7b..4c1bfcd52 100644 --- a/snippets/offscreen.md +++ b/snippets/offscreen.md @@ -1,4 +1,7 @@ -### Offscreen +--- +title: Offscreen +tags: layout, visual,intermediate +--- A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility ([ADA](https://adata.org/learn-about-ada)) development when more context is needed for visually-impaired users. As an alternative to `display: none` which is not readable by screen readers or `visibility: hidden` which takes up physical space in the DOM. @@ -43,4 +46,5 @@ A bulletproof way to completely hide an element visually and positionally in the - https://caniuse.com/#search=clip - + + diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md index 6e48da629..debaf5de1 100644 --- a/snippets/overflow-scroll-gradient.md +++ b/snippets/overflow-scroll-gradient.md @@ -1,4 +1,7 @@ -### Overflow scroll gradient +--- +title: Overflow scroll gradient +tags: visual,intermediate +--- Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled. @@ -66,4 +69,5 @@ Adds a fading gradient to an overflowing element to better indicate there is mor - https://caniuse.com/#feat=css-gradients - + + diff --git a/snippets/popout-menu.md b/snippets/popout-menu.md index f1d37e4e2..79b138763 100644 --- a/snippets/popout-menu.md +++ b/snippets/popout-menu.md @@ -1,4 +1,7 @@ -### Popout menu +--- +title: Popout menu +tags: interactivity,intermediate +--- Reveals an interactive popout menu on hover and focus. @@ -46,4 +49,5 @@ Reveals an interactive popout menu on hover and focus. #### Browser support - + + diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md index 18886ece7..868af7203 100644 --- a/snippets/pretty-text-underline.md +++ b/snippets/pretty-text-underline.md @@ -1,4 +1,7 @@ -### Pretty text underline +--- +title: Pretty text underline +tags: visual,intermediate +--- A nicer alternative to `text-decoration: underline` or `` where descenders do not clip the underline. Natively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline. @@ -51,4 +54,5 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control - https://caniuse.com/#feat=css-textshadow - https://caniuse.com/#feat=css-gradients - + + diff --git a/snippets/reset-all-styles.md b/snippets/reset-all-styles.md index a3bb94bb0..787d96670 100644 --- a/snippets/reset-all-styles.md +++ b/snippets/reset-all-styles.md @@ -1,4 +1,7 @@ -### Reset all styles +--- +title: Reset all styles +tags: visual,intermediate +--- Resets all styles to default values with one property. This will not affect `direction` and `unicode-bidi` properties. @@ -35,4 +38,5 @@ The `all` property allows you to reset all styles (inherited or not) to default - https://caniuse.com/#feat=css-all - + + diff --git a/snippets/shape-separator.md b/snippets/shape-separator.md index 10ffe012c..417cae338 100644 --- a/snippets/shape-separator.md +++ b/snippets/shape-separator.md @@ -1,4 +1,7 @@ -### Shape separator +--- +title: Shape separator +tags: visual,intermediate +--- Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation. @@ -42,4 +45,5 @@ Uses an SVG shape to separate two different blocks to create more a interesting - https://caniuse.com/#feat=svg - + + diff --git a/snippets/sibling-fade.md b/snippets/sibling-fade.md index d4df2e21f..5f32604f9 100644 --- a/snippets/sibling-fade.md +++ b/snippets/sibling-fade.md @@ -1,4 +1,7 @@ -### Sibling fade +--- +title: Sibling fade +tags: interactivity,intermediate +--- Fades out the siblings of a hovered item. @@ -37,4 +40,5 @@ span { - https://caniuse.com/#feat=css-sel3 - https://caniuse.com/#feat=css-transitions - + + diff --git a/snippets/system-font-stack.md b/snippets/system-font-stack.md index 94e1aecf3..453948d9b 100644 --- a/snippets/system-font-stack.md +++ b/snippets/system-font-stack.md @@ -1,4 +1,7 @@ -### System font stack +--- +title: System font stack +tags: visual,intermediate +--- Uses the native font of the operating system to get close to a native app feel. @@ -37,4 +40,5 @@ falls back to the next if it cannot find the font (on the system or defined in C #### Browser support - + + diff --git a/snippets/toggle-switch.md b/snippets/toggle-switch.md index b7e6da786..aeaf5d646 100644 --- a/snippets/toggle-switch.md +++ b/snippets/toggle-switch.md @@ -1,4 +1,7 @@ -### Toggle switch +--- +title: Toggle switch +tags: visual, interactivity,intermediate +--- Creates a toggle switch with CSS only. @@ -67,5 +70,6 @@ This effect is styling only the `