Add tags

snippets/box-sizing-reset.md

@@ -44,3 +44,5 @@ html {
 <span class="snippet__support-note">✅ No caveats.</span>
 
 * https://caniuse.com/#feat=css3-boxsizing
+
+<!-- tags: layout -->

snippets/clearfix.md

@@ -18,7 +18,7 @@ Ensures that an element self-clears its children.
 
 ```css
 .clearfix::after {
-  content: "";
+  content: '';
   display: block;
   clear: both;
 }
@@ -60,3 +60,5 @@ Ensures that an element self-clears its children.
 #### Browser support
 
 <span class="snippet__support-note">✅ No caveats.</span>
+
+<!-- tags: layout -->

snippets/constant-width-to-height-ratio.md

@@ -43,3 +43,5 @@ causes an element's height to become a percentage of its parent's width, i.e. `5
 #### Browser support
 
 <span class="snippet__support-note">⚠️ `padding-top` pushes any content within the element to the bottom.</span>
+
+<!-- tags: layout -->

snippets/custom-scrollbar.md

@@ -19,13 +19,13 @@ Customizes the scrollbar style for the document and elements with scrollable ove
 }
 
 ::-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;
 }
 
 ::-webkit-scrollbar-thumb {
   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 */
@@ -80,3 +80,5 @@ There are many other pseudo-elements that you can use to style scrollbars. For m
 <span class="snippet__support-note">⚠️ Scrollbar styling doesn't appear to be on any standards track.</span>
 
 * https://caniuse.com/#feat=css-scrollbar
+
+<!-- tags: visual -->

snippets/custom-text-selection.md

@@ -48,3 +48,5 @@ Changes the styling of text selection.
 in any specification.</span>
 
 * https://caniuse.com/#feat=css-selection
+
+<!-- tags: visual -->

snippets/disable-selection.md

@@ -39,3 +39,5 @@ Makes the content unselectable.
 <span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
 
 * https://caniuse.com/#feat=user-select-none
+
+<!-- tags: interactivity -->

snippets/donut-spinner.md

@@ -12,8 +12,12 @@ Creates a donut spinner that can be used to indicate the loading of content.
 
 ```css
 @keyframes donut-spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 .donut {
   display: inline-block;
@@ -59,3 +63,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
+
+<!-- tags: animation -->

snippets/easing-variables.md

@@ -104,3 +104,5 @@ The variables are defined globally within the `:root` CSS pseudo-class which mat
 <span class="snippet__support-note">✅ No caveats.</span>
 
 * https://caniuse.com/#feat=css-variables
+
+<!-- tags: animation -->

snippets/etched-text.md

@@ -49,3 +49,5 @@ of the background.
 <span class="snippet__support-note">✅ No caveats.</span>
 
 * https://caniuse.com/#feat=css-textshadow
+
+<!-- tags: visual -->

snippets/evenly-distributed-children.md

@@ -51,3 +51,5 @@ Alternatively, use `justify-content: space-around` to distribute the children wi
 <span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
 
 * https://caniuse.com/#feat=flexbox
+
+<!-- tags: layout -->

snippets/gradient-text.md

@@ -49,3 +49,5 @@ Gives text a gradient color.
 <span class="snippet__support-note">⚠️ Uses non-standard properties.</span>
 
 * https://caniuse.com/#feat=text-stroke
+
+<!-- tags: visual -->

snippets/hairline-border.md

@@ -81,3 +81,5 @@ very sharp and crisp.
 <hr>
 
 \*Chrome does not support subpixel values on `border`. Safari does not support subpixel values on `box-shadow`. Firefox supports subpixel values on both.
+
+<!-- tags: visual -->

snippets/horizontal-and-vertical-centering.md

@@ -48,3 +48,5 @@ Horizontally and vertically centers a child element within a parent element.
 <span class="snippet__support-note">⚠️ Needs prefixes for full support.</span>
 
 * https://caniuse.com/#feat=flexbox
+
+<!-- tags: layout -->

snippets/hover-underline-animation.md

@@ -69,7 +69,7 @@ Creates an animated underline effect when the text is hovered over.
 #### Explanation
 
 1. `display: inline-block` makes the block `p` an `inline-block` to prevent the underline from
-spanning the entire parent width rather than just the content (text).
+   spanning the entire parent width rather than just the content (text).
 2. `position: relative` on the element establishes a Cartesian positioning context for pseudo-elements.
 3. `::after` defines a pseudo-element.
 4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
@@ -77,11 +77,11 @@ spanning the entire parent width rather than just the content (text).
 6. `transform: scaleX(0)` initially scales the pseudo element to 0 so it has no width and is not visible.
 7. `bottom: 0` and `left: 0` position it to the bottom left of the block.
 8. `transition: transform 0.25s ease-out` means changes to `transform` will be transitioned over 0.25 seconds
-with an `ease-out` timing function.
+   with an `ease-out` timing function.
 9. `transform-origin: bottom right` means the transform anchor point is positioned at the bottom right of the block.
 10. `:hover::after` then uses `scaleX(1)` to transition the width to 100%, then changes the `transform-origin`
-to `bottom left` so that the anchor point is reversed, allowing it transition out in the other direction when
-hovered off.
+    to `bottom left` so that the anchor point is reversed, allowing it transition out in the other direction when
+    hovered off.
 
 #### Browser support
 
@@ -89,3 +89,5 @@ hovered off.
 
 * https://caniuse.com/#feat=transforms2d
 * https://caniuse.com/#feat=css-transitions
+
+<!-- tags: animation -->

snippets/mouse-cursor-gradient-tracking.md

@@ -41,7 +41,7 @@ A hover effect where the gradient follows the mouse cursor.
   height: var(--size);
   background: radial-gradient(circle closest-side, pink, transparent);
   transform: translate(-50%, -50%);
-  transition: width .2s ease, height .2s ease;
+  transition: width 0.2s ease, height 0.2s ease;
 }
 
 .mouse-cursor-gradient-tracking:hover::before {
@@ -53,7 +53,7 @@ A hover effect where the gradient follows the mouse cursor.
 
 ```js
 var btn = document.querySelector('.mouse-cursor-gradient-tracking')
-btn.onmousemove = function (e) {
+btn.onmousemove = function(e) {
   var x = e.pageX - btn.offsetLeft
   var y = e.pageY - btn.offsetTop
   btn.style.setProperty('--x', x + 'px')
@@ -131,7 +131,10 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
 ```
 
 #### Browser support
+
 <div class="snippet__requires-javascript">Requires JavaScript</div>
 <span class="snippet__support-note">⚠️ Requires JavaScript.</span>
 
 * https://caniuse.com/#feat=css-variables
+
+<!-- tags: visual, interactivity -->

snippets/overflow-scroll-gradient.md

@@ -24,7 +24,10 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
   bottom: 0;
   width: 300px;
   height: 25px;
-  background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
+  background: linear-gradient(
+    rgba(255, 255, 255, 0.001),
+    white
+  ); /* transparent keyword is broken in Safari */
   pointer-events: none;
 }
 .overflow-scroll-gradient__scroller {
@@ -81,10 +84,10 @@ document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').inne
 1. `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements.
 2. `::after` defines a pseudo element.
 3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white
-(top to bottom).
+   (top to bottom).
 4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
 5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has
-  the pseudo element).
+   the pseudo element).
 6. `height: 25px` is the height of the fading gradient pseudo-element, which should be kept relatively small.
 7. `bottom: 0` positions the pseudo-element at the bottom of the parent.
 8. `pointer-events: none` specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
@@ -94,3 +97,5 @@ document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').inne
 <span class="snippet__support-note">✅ No caveats.</span>
 
 * https://caniuse.com/#feat=css-gradients
+
+<!-- tags: visual -->

snippets/popout-menu.md

@@ -75,3 +75,5 @@ Reveals an interactive popout menu on hover.
 #### Browser support
 
 <span class="snippet__support-note">✅ No caveats.</span>
+
+<!-- tags: interactivity -->

snippets/pretty-text-underline.md

@@ -16,10 +16,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
   font-family: Arial, sans-serif;
   display: inline;
   font-size: 18px;
-  text-shadow: 1px 1px 0 #f5f6f9,
-    -1px 1px 0 #f5f6f9,
-    -1px -1px 0 #f5f6f9,
-    1px -1px 0 #f5f6f9;
+  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: 0 0.98em;
   background-repeat: repeat-x;
@@ -70,13 +67,13 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 #### Explanation
 
 1. `text-shadow: ...` has 4 values with offsets that cover a 4x4 px area to ensure the underline
-  has a "thick" shadow that covers the line where descenders clip it. Use a color
-  that matches the background. For a larger font, use a larger `px` size.
+   has a "thick" shadow that covers the line where descenders clip it. Use a color
+   that matches the background. For a larger font, use a larger `px` size.
 2. `background-image: linear-gradient(...)` creates a 90deg gradient with the current
-  text color (`currentColor`).
+   text color (`currentColor`).
 3. The `background-*` properties size the gradient as 1x1px at the bottom and repeats it along the x-axis.
 4. The `::selection` pseudo selector ensures the text shadow does not interfere with text
-  selection.
+   selection.
 
 #### Browser support
 
@@ -84,3 +81,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
+
+<!-- tags: visual -->

snippets/shape-separator.md

@@ -64,3 +64,5 @@ Uses an SVG shape to separate two different blocks to create more a interesting
 <span class="snippet__support-note">✅ No caveats.</span>
 
 * https://caniuse.com/#feat=svg
+
+<!-- tags: visual -->

snippets/system-font-stack.md

@@ -12,7 +12,8 @@ Uses the native font of the operating system to get close to a native app feel.
 
 ```css
 .system-font-stack {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 ```
 
@@ -46,3 +47,5 @@ falls back to the next if it cannot find the font (on the system or defined in C
 #### Browser support
 
 <span class="snippet__support-note">✅ No caveats.</span>
+
+<!-- tags: visual -->

snippets/triangle.md

@@ -89,3 +89,5 @@ Experiment with the `px` values to change the proportion of the triangle.
 #### Browser support
 
 <span class="snippet__support-note">✅ No caveats.</span>
+
+<!-- tags: visual -->

snippets/truncate-text.md

@@ -51,3 +51,5 @@ If the text is longer than one line, it will be truncated and end with an ellips
 <span class="snippet__support-note">⚠️ Only works for single line elements.</span>
 
 * https://caniuse.com/#feat=text-overflow
+
+<!-- tags: layout -->