Revamp snippet descriptions

snippets/border-with-top-triangle.md

@@ -3,18 +3,15 @@ title: Border with top triangle
 tags: visual,beginner
 ---
 
-Creates a text container with a triangle at the top.
+Creates a content container with a triangle at the top.
 
 - Use the `:before` and `:after` pseudo-elements to create two triangles.
-- The color of the `:before` triangle should be the same as the container's border color.
-- The color of the `:after` triangle should be the same as the container's background color.
-- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.
-- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.
+- The colors of the two triangles should be the same as the container's `border-color` and the container's `background-color` respectively.
+- The `border-width` of the one triangle (`:before`) should be `1px` wider than the other one (`:after`), in order to act as the border.
+- The smalle triangle (`:after`) should be `1px` to the right of the larger triangle (`:before`) to allow for its left border to be shown.
 
 ```html
-<div class="container">
-  Border with top triangle
-</div>
+<div class="container">Border with top triangle</div>
 ```
 
 ```css
@@ -26,7 +23,8 @@ Creates a text container with a triangle at the top.
   margin-top: 20px;
 }
 
-.container:before, .container:after {
+.container:before,
+.container:after {
   content: '';
   position: absolute;
   bottom: 100%;

snippets/bouncing-loader.md

@@ -5,14 +5,10 @@ tags: animation,intermediate
 
 Creates a bouncing loader animation.
 
-- `@keyframes` defines an animation that has two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translate3d()`. Using a single axis translation on `transform: translate3d()` improves the performance of the animation.
-- `.bouncing-loader` is the parent container of the bouncing circles and uses `display: flex` and `justify-content: center` to position them in the center.
-- `.bouncing-loader > div`, targets the three child `div`s of the parent to be styled. The `div`s are given a width and height of `1rem`, using `border-radius: 50%` to turn them from squares to circles.
-- `margin: 3rem 0.2rem` specifies that each circle has a top/bottom margin of `3rem` and left/right margin of `0.2rem` so that they do not directly touch each other, giving them some breathing room.
-- `animation` is a shorthand property for the various animation properties: `animation-name`, `animation-duration`, `animation-iteration-count`, `animation-direction` are used.
-- `nth-child(n)` targets the element which is the nth child of its parent.
-- `animation-delay` is used on the second and third `div` respectively, so that each element does not start the animation at the same time.
-- Note that `1rem` is usually `16px`.
+- Use `@keyframes` to define an animation with two states, where the element changes `opacity` and is translated up on the 2D plane using `transform: translate3d()`. Use a single axis translation on `transform: translate3d()` to achieve better animation performance.
+- Create a parent container, `.bouncing-loader`, for the bouncing circles and use `display: flex` and `justify-content: center` to position them in the center.
+- Give the three bouncing circle `<div>` elements a `width` and `height` of `16px` and use `border-radius: 50%` to make them circular.
+- Apply the `bouncing-loader` animation to each of the three bouncing circles, using a different `animation-delay` for each one and `animation-direction: alternate` to create the appropriate effect.
 
 ```html
 <div class="bouncing-loader">
@@ -26,7 +22,7 @@ Creates a bouncing loader animation.
 @keyframes bouncing-loader {
   to {
     opacity: 0.1;
-    transform: translate3d(0, -1rem, 0);
+    transform: translate3d(0, -16px, 0);
   }
 }
 
@@ -36,8 +32,8 @@ Creates a bouncing loader animation.
 }
 
 .bouncing-loader > div {
-  width: 1rem;
-  height: 1rem;
+  width: 16px;
+  height: 16px;
   margin: 3rem 0.2rem;
   background: #8385aa;
   border-radius: 50%;

snippets/box-sizing-reset.md

@@ -5,8 +5,8 @@ tags: layout,beginner
 
 Resets the box-model so that `width` and `height` are not affected by `border` or `padding`.
 
-- `box-sizing: border-box` makes the addition of `padding` or `border`s not affect an element's `width` or `height`.
-- `box-sizing: inherit` makes an element respect its parent's `box-sizing` rule.
+- Use `box-sizing: border-box` to include the width and height of `padding` and `border` when calculating the element's `width` and `height`.
+- Use `box-sizing: inherit` to pass down the `box-sizing` property from parent to child elements.
 
 ```html
 <div class="box">border-box</div>
@@ -29,6 +29,7 @@ div {
   width: 120px;
   height: 120px;
   padding: 8px;
+  margin: 8px;
   background: #F24333;
   color: white;
   border: 1px solid #BA1B1D;

snippets/button-border-animation.md

@@ -5,7 +5,8 @@ tags: animation,intermediate
 
 Creates a border animation on hover.
 
-- Use the `:before` and `:after` pseudo-elements as borders that animate on hover.
+- Use the `:before` and `:after` pseudo-elements to create two boxes `24px` wide opposite each other above and below the box.
+- Use the `:hover` pseudo-class to extend the `width` of those elements to `100%` on hover and animate the change using `transition`.
 
 ```html
 <button class="animated-border-button">Submit</button>

snippets/circle.md

@@ -3,9 +3,9 @@ title: Circle
 tags: visual,beginner
 ---
 
-Creates a circle shape with pure CSS.
+Creates a circular shape with pure CSS.
 
-- `border-radius: 50%` curves the borders of an element to create a circle.
+- Use `border-radius: 50%` to curve the borders of the element to create a circle.
 - Since a circle has the same radius at any given point, the `width` and `height` must be the same. Differing values will create an ellipse.
 
 ```html
@@ -15,8 +15,8 @@ Creates a circle shape with pure CSS.
 ```css
 .circle {
   border-radius: 50%;
-  width: 2rem;
-  height: 2rem;
-  background: #333;
+  width: 32px;
+  height: 32px;
+  background: #9C27B0;
 }
 ```

snippets/clearfix.md

@@ -5,10 +5,10 @@ tags: layout,beginner
 
 Ensures that an element self-clears its children.
 
-- `.clearfix:after` defines a pseudo-element.
-- `content: ''` allows the pseudo-element to affect layout.
-- `clear: both` indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.
-- This is only useful if you are still using `float` to build layouts. Please consider using a modern approach with flexbox layout or grid layout. 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).
+- Use the `:after` pseudo-element and apply `content: ''` to allow it to affect layout.
+- Use `clear: both` to make the element clear past both left and right floats.
+- For this technique to work properly, make sure 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).
+- **Note:** This is only useful if you are using `float` to build layouts. Consider using a more modern approach, such as the flexbox or grid layout.
 
 ```html
 <div class="clearfix">
@@ -27,5 +27,6 @@ Ensures that an element self-clears its children.
 
 .floated {
   float: left;
+  padding: 4px;
 }
 ```

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

@@ -3,18 +3,18 @@ title: Constant width to height ratio
 tags: layout,beginner
 ---
 
-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).
+Ensures that an element with variable `width` will retain a proportionate `height` value.
 
-- `padding-top` on the `:before` pseudo-element causes the height of the element to equal a percentage of its width. `100%` therefore means the element's height will always be `100%` of the width, creating a responsive square.
-- This method also allows content to be placed inside the element normally.
+- Apply `padding-top` on the `:before` pseudo-element, making the `height` of the element equal to a percentage of its `width`.
+- The proportion of `height` to `width` can be altered as necessary. For example a `padding-top` of `100%` will create a responsive square (1:1 ratio).
 
 ```html
 <div class="constant-width-to-height-ratio"></div>
 ```
 
 ```css
 .constant-width-to-height-ratio {
-  background: #333;
+  background: #9C27B0;
   width: 50%;
 }
 

snippets/counter.md

@@ -3,14 +3,11 @@ title: Counter
 tags: visual,advanced
 ---
 
-Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
+Creates a custom list counter that accounts for nested list elements.
 
-- `counter-reset` is used to initialize a counter, the name of which is the value of the attribute. By default, the counter starts at `0`. This property can also be used to change its value to any specific number.
-- `counter-increment` is used for an element that will be countable. Once `counter-reset` is initialized, a counter's value can be increased or decreased.
-- `counter(name, style)` displays the value of a section counter. Generally used with the `content` property. This function can receive two parameters, the first being the name of the counter and the second one either `decimal` or `upper-roman` (`decimal` by default).
-- `counters(counter, string, style)` displays the value of a section counter. Generally used with the `content` property. This function can receive three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be `decimal` or `upper-roman` (`decimal` by default).
-- A CSS counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. Using the `counters()` function, separating text can be inserted between different levels of nested counters.
-- Note that you can create an ordered list using any type of HTML.
+- Use `counter-reset` to initialize a variable counter (default `0`), the name of which is the value of the attribute (i.e. `counter`).
+- Use `counter-increment` on the variable counter for each countable element (i.e. each `<li>`).
+- Use `counters()` to display the value of each variable counter as part of the `content` of the `:before` pseudo-element for each countable element (i.e. each `<li>`). The second value passed to it (`'.'`) acts as the delimiter for nested counters.
 
 ```html
 <ul>
@@ -30,6 +27,7 @@ Counters are, in essence, variables maintained by CSS whose values may be increm
 ```css
 ul {
   counter-reset: counter;
+  list-style: none;
 }
 
 li:before {

snippets/custom-scrollbar.md

@@ -3,13 +3,12 @@ title: Custom scrollbar
 tags: visual,advanced
 ---
 
-Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
+Customizes the scrollbar style for the an elements with scrollable overflow.
 
-- `::-webkit-scrollbar` targets the whole scrollbar element.
-- `::-webkit-scrollbar-track` targets only the scrollbar track.
-- `::-webkit-scrollbar-thumb` targets the scrollbar thumb.
-- Apply the same selectors and styles without `.custom-scrollbar` to style the document scrollbar.
-- Scrollbar styling doesn't appear to be on any standards track. 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/).
+- Use `::-webkit-scrollbar` to style the scrollbar element.
+- Use `::-webkit-scrollbar-track` to style the scrollbar track (the background of the scrollbar).
+- Use `::-webkit-scrollbar-thumb` to style the scrollbar thumb (the draggable element).
+- **Note:** Scrollbar styling doesn't appear to be on any standards track. This technique only works on WebKit-based browsers.
 
 ```html
 <div class="custom-scrollbar">

snippets/custom-text-selection.md

@@ -5,8 +5,7 @@ tags: visual,beginner
 
 Changes the styling of text selection.
 
-- `::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.
-- Requires prefixes for full support and is not actually in any specification.
+- Use the `::selection` pseudo-selector to style text within it when selected.
 
 ```html
 <p class="custom-text-selection">Select some of this text.</p>

snippets/disable-selection.md

@@ -5,8 +5,8 @@ tags: interactivity,beginner
 
 Makes the content unselectable.
 
-- `user-select: none` specifies that the text cannot be selected.
-- This is not a secure method to prevent users from copying content.
+- Use `user-select: none` to make the content of the element not selectable.
+- **Note:** This is not a secure method to prevent users from copying content.
 
 ```html
 <p>You can select me.</p>

snippets/display-table-centering.md

@@ -3,14 +3,13 @@ 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`).
+Vertically and horizontally centers a child element within its parent element, using `display: table`.
 
-- `display: table` on '.center' allows the element to behave like a `<table>` HTML element.
-- 100% height and width on '.center' allows the element to fill the available space within its parent element.
-- `display: table-cell` on '.center > span' allows the element to behave like an <td> HTML element.
-- `text-align: center` on '.center > span' centers the child element horizontally.
-- `vertical-align: middle` on '.center > span' centers the child element vertically.
-- The outer parent ('.container' in this case) must have a fixed height and width.
+- Use `display: table` to make the `.center` element behave like a `<table>` element.
+- Set `height` and `width` to `100%` to make the element fill the available space within its parent element.
+- Use `display: table-cell` on the child element to make it behave like a `<td>` elements.
+- Use `text-align: center` and `vertical-align: middle` on the child element to center it horizontally and vertically.
+- The outer parent (`.container`) must have a fixed `width` and `height`.
 
 ```html
 <div class="container">
@@ -20,7 +19,7 @@ Vertically and horizontally centers a child element within its parent element us
 
 ```css
 .container {
-  border: 1px solid #333;
+  border: 1px solid #9C27B0;
   height: 250px;
   width: 250px;
 }

snippets/donut-spinner.md

@@ -5,7 +5,8 @@ tags: animation,intermediate
 
 Creates a donut spinner that can be used to indicate the loading of content.
 
-- Use a semi-transparent `border` for the whole element, except one side that will serve as the loading indicator for the donut. Use `animation` to rotate the element.
+- Use a semi-transparent `border` for the whole element, except one side that will serve as the loading indicator for the donut.
+- Define and use an appropriate animation, using `transform: rotate()` to rotate the element.
 
 ```html
 <div class="donut"></div>

snippets/drop-cap.md

@@ -3,9 +3,10 @@ title: Drop cap
 tags: visual,beginner
 ---
 
-Makes the first letter in the first paragraph bigger than the rest of the text - often used to signify the beginning of a new section.
+Makes the first letter of the first paragraph bigger than the rest of the text.
 
-- Use the `::first-letter` pseudo-element to style the first element of the paragraph, use the `:first-child` selector to select only the first paragraph.
+- Use the `:first-child` selector to select only the first paragraph.
+- Use the `::first-letter` pseudo-element to style the first element of the paragraph.
 
 ```html
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.</p>

snippets/dynamic-shadow.md

@@ -5,16 +5,10 @@ tags: visual,intermediate
 
 Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
 
-- `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements.
-- `z-index: 1` establishes a new stacking context.
-- `:after` defines a pseudo-element.
-- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
-- `width: 100%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size.
-- `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element.
-- `top: 0.5rem` offsets the pseudo-element down slightly from its parent.
-- `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath.
-- `opacity: 0.7` makes the pseudo-element partially transparent.
-- `z-index: -1` positions the pseudo-element behind the parent but in front of the background.
+- Use the `:after` pseudo-element with `position: absolute` and `width` and `height` equal to `100%` to fill the available space in the parent element.
+- Use `background: inherit` to inherit the `background` of the parent element.
+- Use `top` to slightly offset the pseudo-element, `filter: blur()` to create a shadow and `opacity` to make it semi-transparent.
+- Use `z-index: 1` on the parent and `z-index: -1` on the pseudo-element to position it behind its parent.
 
 ```html
 <div class="dynamic-shadow"></div>

snippets/easing-variables.md

@@ -3,10 +3,10 @@ title: Easing variables
 tags: animation,beginner
 ---
 
-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`.
+List of variables that can be reused for `transition-timing-function` properties.
 
-- 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.
+- Use the custom property syntax to define appropriate timing functions for transitions.
+- The variables can be defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document or inside any other selector.
 
 ```html
 <div class="easing-variables">Hover</div>
@@ -45,7 +45,7 @@ Variables that can be reused for `transition-timing-function` properties, more p
   color: white;
   line-height: 50px;
   text-align: center;
-  background: #333;
+  background: #9C27B0;
   transition: transform 1s var(--ease-out-quart);
 }
 

snippets/etched-text.md

@@ -5,7 +5,7 @@ tags: visual,intermediate
 
 Creates an effect where text appears to be "etched" or engraved into the background.
 
-- `text-shadow: 0 2px white` creates a white shadow offset `0px` horizontally and `2px` vertically from the origin position.
+- Use `text-shadow` to create a white shadow offset `0px` horizontally and `2px` vertically from the origin position.
 - The background must be darker than the shadow for the effect to work.
 - The text color should be slightly faded to make it look like it's engraved/carved out of the background.
 

snippets/evenly-distributed-children.md

@@ -5,9 +5,9 @@ tags: layout,intermediate
 
 Evenly distributes child elements within a parent element.
 
-- `display: flex` enables flexbox.
-- `justify-content: space-between` evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
-- Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them.
+- Use `display: flex` to use the flexbox layout.
+- Use `justify-content: space-between` to evenly distributes child elements horizontally. The first item is positioned at the left edge, while the last item is positioned at the right edge.
+- Alternatively, you can use `justify-content: space-around` to distribute the children with space around them, rather than between them.
 
 ```html
 <div class="evenly-distributed-children">