From 6e8df35acb5f3f990409f8d452c6e0d71b710f90 Mon Sep 17 00:00:00 2001 From: Veekas Shrivastava Date: Thu, 8 Feb 2018 11:47:35 -0500 Subject: [PATCH 01/12] feat: update z-index css to fit minimum width requirements From 2c8199f9b54f9dc86e0c1cf33e18cb63821ecd36 Mon Sep 17 00:00:00 2001 From: Veekas Shrivastava Date: Thu, 8 Feb 2018 15:37:31 -0500 Subject: [PATCH 02/12] feat: modify z-index live demo to accomodate small screen widths --- .../css-examples/transitions/z-index.css | 32 ++++----- .../css-examples/transitions/z-index.html | 68 ++++++++++--------- 2 files changed, 52 insertions(+), 48 deletions(-) diff --git a/live-examples/css-examples/transitions/z-index.css b/live-examples/css-examples/transitions/z-index.css index 3ba000dd4..71c7a862d 100644 --- a/live-examples/css-examples/transitions/z-index.css +++ b/live-examples/css-examples/transitions/z-index.css @@ -3,46 +3,44 @@ } #example-element { - top: 0; - left: 0; + position: absolute; display: inline-block; - background-color: #000; + background-color: #74992E; color: #fff; - padding: 10px; border: 10px solid #fadb8c; width: 100%; - height: 100%; - font-size: 1.2em; + height: 80px; + font-size: 1em; } -.box { +.container { position: absolute; - top: 70px; - display: inline-block; - padding: 30px 40px; - width: 100px; + display: flex; + justify-content: space-between; + flex-direction: row; + width: 100%; +} + +.box { + margin: auto; + border: 5px solid #fff; + width: 50px; height: 100px; font-size: 2em; } .level2 { - left: 80px; background-color: #edecec; - border: 5px solid #fff; z-index: 2; } .level4 { - left: 200px; background-color: #999; - border: 5px solid #fff; z-index: 4; } .level6 { - left: 320px; background-color: #333; color: #fff; - border: 5px solid #fff; z-index: 6; } diff --git a/live-examples/css-examples/transitions/z-index.html b/live-examples/css-examples/transitions/z-index.html index c7b7a9e67..4723ccf18 100644 --- a/live-examples/css-examples/transitions/z-index.html +++ b/live-examples/css-examples/transitions/z-index.html @@ -1,38 +1,44 @@ -
-
-
z-index: 1;
- -
+
-
-
z-index: 3;
- -
+
+ 
z-index: 1;
+ +
-
-
z-index: 5;
- -
+
+ 
z-index: 3;
+ +
+ +
+ 
z-index: 5;
+ +
+ +
+ 
z-index: 7;
+ +
-
-
z-index: 7;
- -
- From f90a0d3f14ef6980231021a6d68987eeff0d82dc Mon Sep 17 00:00:00 2001 From: Veekas Shrivastava Date: Thu, 8 Feb 2018 15:54:17 -0500 Subject: [PATCH 03/12] merge with mdn master --- CONTRIBUTING.md | 16 ++-- .../css-examples/animation/animation.html | 8 +- .../background-clip.html | 8 +- .../background-color.html | 12 +-- .../background-image.html | 8 +- .../background-position-x.html | 10 +-- .../background-position-y.html | 10 +-- .../background-position.html | 12 +-- .../background-repeat.html | 16 ++-- .../background-size.html | 10 +-- .../border-bottom-color.html | 10 +-- .../border-bottom-style.html | 12 +-- .../border-bottom-width.html | 10 +-- .../border-bottom.html | 10 +-- .../backgrounds-and-borders/border-color.html | 10 +-- .../backgrounds-and-borders/border-image.html | 6 +- .../border-left-color.html | 10 +-- .../border-left-style.html | 12 +-- .../border-left-width.html | 10 +-- .../backgrounds-and-borders/border-left.html | 10 +-- .../border-radius.html | 12 +-- .../border-right-color.html | 10 +-- .../border-right-style.html | 12 +-- .../border-right-width.html | 10 +-- .../backgrounds-and-borders/border-right.html | 10 +-- .../backgrounds-and-borders/border-style.html | 12 +-- .../border-top-color.html | 10 +-- .../border-top-style.html | 12 +-- .../border-top-width.html | 10 +-- .../backgrounds-and-borders/border-top.html | 10 +-- .../backgrounds-and-borders/border-width.html | 10 +-- .../backgrounds-and-borders/border.html | 10 +-- .../backgrounds-and-borders/box-shadow.html | 10 +-- .../css-examples/basic-box-model/margin.html | 10 +-- .../basic-box-model/overflow-x.html | 8 +- .../basic-box-model/overflow-y.html | 8 +- .../basic-box-model/overflow.html | 8 +- .../basic-box-model/padding-bottom.html | 10 +-- .../basic-box-model/padding-left.html | 10 +-- .../basic-box-model/padding-right.html | 10 +-- .../basic-box-model/padding-top.html | 10 +-- .../css-examples/basic-box-model/padding.html | 10 +-- .../basic-user-interface/box-sizing.html | 6 +- .../basic-user-interface/outline-color.html | 10 +-- .../basic-user-interface/outline-offset.html | 6 +- .../basic-user-interface/outline-style.html | 10 +-- .../basic-user-interface/outline-width.html | 8 +- .../basic-user-interface/outline.html | 10 +-- .../basic-user-interface/text-overflow.html | 8 +- live-examples/css-examples/color/color.html | 16 ++-- live-examples/css-examples/color/opacity.html | 6 +- .../css-examples/filter-effects/blur.html | 6 +- .../filter-effects/brightness.html | 8 +- .../css-examples/filter-effects/contrast.html | 8 +- .../filter-effects/drop-shadow.html | 6 +- .../css-examples/filter-effects/filter.html | 12 +-- .../filter-effects/grayscale.html | 8 +- .../filter-effects/hue-rotate.html | 8 +- .../css-examples/filter-effects/invert.html | 10 +-- .../css-examples/filter-effects/opacity.html | 10 +-- .../css-examples/filter-effects/saturate.html | 8 +- .../css-examples/filter-effects/sepia.html | 8 +- .../css-examples/flexbox/flex-basis.css | 17 ++++ .../css-examples/flexbox/flex-basis.html | 32 +++++++ .../css-examples/flexbox/flex-direction.css | 14 +++ .../css-examples/flexbox/flex-direction.html | 39 +++++++++ .../css-examples/flexbox/flex-flow.css | 15 ++++ .../css-examples/flexbox/flex-flow.html | 42 +++++++++ .../css-examples/flexbox/flex-grow.css | 17 ++++ .../css-examples/flexbox/flex-grow.html | 32 +++++++ .../css-examples/flexbox/flex-shrink.css | 17 ++++ .../css-examples/flexbox/flex-shrink.html | 32 +++++++ .../css-examples/flexbox/flex-wrap.html | 8 +- live-examples/css-examples/flexbox/meta.json | 50 +++++++++++ .../css-examples/fonts/font-family.html | 12 +-- .../css-examples/fonts/font-style.html | 6 +- .../css-examples/fonts/font-weight.html | 12 +-- live-examples/css-examples/fonts/font.html | 10 +-- .../fragmentation/box-decoration-break.html | 4 +- .../generated-content/quotes.html | 10 +-- .../css-examples/images/object-fit.html | 10 +-- .../lists-and-counters/list-style.css | 15 ++++ .../lists-and-counters/list-style.html | 58 +++++++++++++ .../css-examples/lists-and-counters/meta.json | 14 +++ .../multi-column-layout/column-count.css | 4 + .../multi-column-layout/column-count.html | 36 ++++++++ .../multi-column-layout/column-fill.css | 6 ++ .../multi-column-layout/column-fill.html | 21 +++++ .../multi-column-layout/column-gap.css | 4 + .../multi-column-layout/column-gap.html | 35 ++++++++ .../column-rule-color.html | 35 ++++++++ .../column-rule-style.html | 43 ++++++++++ .../column-rule-width.html | 35 ++++++++ .../multi-column-layout/column-rule.css | 5 ++ .../multi-column-layout/column-rule.html | 35 ++++++++ .../multi-column-layout/column-width.css | 5 ++ .../multi-column-layout/column-width.html | 35 ++++++++ .../multi-column-layout/columns.css | 4 + .../multi-column-layout/columns.html | 35 ++++++++ .../multi-column-layout/meta.json | 85 +++++++++++++++++++ .../positioned-layout/position.html | 8 +- .../css-examples/table/border-collapse.html | 4 +- .../css-examples/table/border-spacing.html | 6 +- .../css-examples/table/caption-side.html | 4 +- .../css-examples/table/empty-cells.html | 4 +- .../css-examples/table/table-layout.html | 8 +- .../text-decoration-color.html | 10 +-- .../text-decoration/text-decoration-line.html | 12 +-- .../text-decoration-skip-ink.html | 4 +- .../text-decoration-style.html | 10 +-- .../text-decoration/text-decoration.html | 10 +-- .../text-decoration/text-shadow.html | 12 +-- live-examples/css-examples/text/hyphens.html | 6 +- .../css-examples/text/letter-spacing.html | 8 +- .../css-examples/text/overflow-wrap.html | 4 +- .../css-examples/text/text-align.html | 8 +- .../css-examples/text/text-transform.html | 10 +-- .../css-examples/text/white-space.html | 10 +-- .../css-examples/text/word-break.html | 8 +- .../css-examples/text/word-spacing.html | 10 +-- .../transforms/backface-visibility.html | 4 +- .../css-examples/transforms/perspective.html | 8 +- .../css-examples/transforms/rotate.html | 8 +- .../css-examples/transforms/rotate3d.html | 8 +- .../css-examples/transforms/rotateX.html | 8 +- .../css-examples/transforms/rotateY.html | 8 +- .../css-examples/transforms/rotateZ.html | 8 +- .../css-examples/transforms/scale.html | 8 +- .../css-examples/transforms/scale3d.html | 8 +- .../css-examples/transforms/scaleX.html | 8 +- .../css-examples/transforms/scaleY.html | 8 +- .../css-examples/transforms/scaleZ.html | 8 +- .../css-examples/transforms/skew.html | 8 +- .../css-examples/transforms/skewX.html | 8 +- .../css-examples/transforms/skewY.html | 8 +- .../css-examples/transforms/transform.html | 12 +-- .../css-examples/transforms/translate.html | 8 +- .../css-examples/transforms/translate3d.html | 8 +- .../css-examples/transforms/translateX.html | 8 +- .../css-examples/transforms/translateY.html | 8 +- .../css-examples/transforms/translateZ.html | 8 +- .../css-examples/transitions/line-height.html | 10 +-- .../transitions/transition-delay.html | 8 +- .../transitions/transition-duration.html | 8 +- .../transitions/transition-property.html | 8 +- .../transition-timing-function.html | 8 +- .../css-examples/transitions/transition.html | 12 +-- .../css-examples/transitions/z-index.html | 8 +- .../css-examples/values-and-units/angle.html | 8 +- .../values-and-units/basic-shape.html | 10 +-- media/examples/rocket.svg | 1 + 151 files changed, 1357 insertions(+), 541 deletions(-) create mode 100644 live-examples/css-examples/flexbox/flex-basis.css create mode 100644 live-examples/css-examples/flexbox/flex-basis.html create mode 100644 live-examples/css-examples/flexbox/flex-direction.css create mode 100644 live-examples/css-examples/flexbox/flex-direction.html create mode 100644 live-examples/css-examples/flexbox/flex-flow.css create mode 100644 live-examples/css-examples/flexbox/flex-flow.html create mode 100644 live-examples/css-examples/flexbox/flex-grow.css create mode 100644 live-examples/css-examples/flexbox/flex-grow.html create mode 100644 live-examples/css-examples/flexbox/flex-shrink.css create mode 100644 live-examples/css-examples/flexbox/flex-shrink.html create mode 100644 live-examples/css-examples/lists-and-counters/list-style.css create mode 100644 live-examples/css-examples/lists-and-counters/list-style.html create mode 100644 live-examples/css-examples/lists-and-counters/meta.json create mode 100644 live-examples/css-examples/multi-column-layout/column-count.css create mode 100644 live-examples/css-examples/multi-column-layout/column-count.html create mode 100644 live-examples/css-examples/multi-column-layout/column-fill.css create mode 100644 live-examples/css-examples/multi-column-layout/column-fill.html create mode 100644 live-examples/css-examples/multi-column-layout/column-gap.css create mode 100644 live-examples/css-examples/multi-column-layout/column-gap.html create mode 100644 live-examples/css-examples/multi-column-layout/column-rule-color.html create mode 100644 live-examples/css-examples/multi-column-layout/column-rule-style.html create mode 100644 live-examples/css-examples/multi-column-layout/column-rule-width.html create mode 100644 live-examples/css-examples/multi-column-layout/column-rule.css create mode 100644 live-examples/css-examples/multi-column-layout/column-rule.html create mode 100644 live-examples/css-examples/multi-column-layout/column-width.css create mode 100644 live-examples/css-examples/multi-column-layout/column-width.html create mode 100644 live-examples/css-examples/multi-column-layout/columns.css create mode 100644 live-examples/css-examples/multi-column-layout/columns.html create mode 100644 live-examples/css-examples/multi-column-layout/meta.json create mode 100644 media/examples/rocket.svg diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ac7df8d03..55c94570f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -53,7 +53,7 @@ Inside this newly created file, copy and paste the following code:
- 
Your CSS goes here
+ 
Your CSS goes here
@@ -96,21 +96,21 @@ Next, let's add the example CSS choices. Think of a few different ways that `bor
- 
border-radius: 10px;
+ 
border-radius: 10px;
- 
border-radius: 10px 50%;
+ 
border-radius: 10px 50%;
- 
border-radius: 10px 5px 6em / 20px 25px 30%;
+ 
border-radius: 10px 5px 6em / 20px 25px 30%;
@@ -121,7 +121,7 @@ Next, let's add the example CSS choices. Think of a few different ways that `bor The first thing to note is that the `section` element has a `data-property` attribute whose value is the name of the property, `border-radius` in this case. The editor uses this to test whether the user's browser supports the property. If it doesn't, then an interactive example won't work, and we just display the CSS options without their output. If you know that the example property has good cross-browser support, you can omit this attribute (for example, the `border-radius` example could certainly omit it). -Next, we have three `div` elements, one for each example CSS choice. Note that each choice gets its own ID: `example_one`, `example_two`, `example_three` and so on. You can choose which option will be shown at first by setting the `initial-choice` attribute to `true` (only one choice should have this). +Next, we have three `div` elements, one for each example CSS choice. You can choose which option will be shown at first by setting the `initial-choice` attribute to `true` (only one choice should have this). Now we've finished writing the HTML for the example. The final version of `border-radius.html` should look like this: @@ -129,21 +129,21 @@ Now we've finished writing the HTML for the example. The final version of `borde
- 
border-radius: 10px;
+ 
border-radius: 10px;
- 
border-radius: 10px 50%;
+ 
border-radius: 10px 50%;
- 
border-radius: 10px 5px 6em / 20px 25px 30%;
+ 
border-radius: 10px 5px 6em / 20px 25px 30%;
diff --git a/live-examples/css-examples/animation/animation.html b/live-examples/css-examples/animation/animation.html index 3d23d8fca..996af442e 100644 --- a/live-examples/css-examples/animation/animation.html +++ b/live-examples/css-examples/animation/animation.html @@ -1,27 +1,27 @@
-
animation: slidein 3s ease-in 1s infinite reverse both running;
+
animation: slidein 3s ease-in 1s infinite reverse both running;
-
animation: slidein 3s linear 1s infinite running;
+
animation: slidein 3s linear 1s infinite running;
-
animation: slidein 3s linear 1s infinite alternate;
+
animation: slidein 3s linear 1s infinite alternate;
-
animation: slidein .5s linear 1s infinite alternate;
+
animation: slidein .5s linear 1s infinite alternate;
diff --git a/live-examples/css-examples/backgrounds-and-borders/background-clip.html b/live-examples/css-examples/backgrounds-and-borders/background-clip.html index 97f4eee19..15609624f 100644 --- a/live-examples/css-examples/backgrounds-and-borders/background-clip.html +++ b/live-examples/css-examples/backgrounds-and-borders/background-clip.html @@ -1,27 +1,27 @@
-
background-clip: border-box;
+
background-clip: border-box;
-
background-clip: padding-box;
+
background-clip: padding-box;
-
background-clip: content-box;
+
background-clip: content-box;
-
background-clip: text;
+
background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
-
background-color: #74992e;
+
background-color: #74992e;
-
background-color: rgb(255, 255, 128);
+
background-color: rgb(255, 255, 128);
-
background-color: rgba(255, 255, 128, .5);
+
background-color: rgba(255, 255, 128, .5);
-
background-color: hsl(50, 33%, 25%);
+
background-color: hsl(50, 33%, 25%);
-
background-color: hsla(50, 33%, 25%, .75);
+
background-color: hsla(50, 33%, 25%, .75);
diff --git a/live-examples/css-examples/backgrounds-and-borders/background-image.html b/live-examples/css-examples/backgrounds-and-borders/background-image.html index 7b2388a13..cb7370b63 100644 --- a/live-examples/css-examples/backgrounds-and-borders/background-image.html +++ b/live-examples/css-examples/backgrounds-and-borders/background-image.html @@ -1,13 +1,13 @@
-
background-image: url("../../media/examples/lizard.png");
+
background-image: url("../../media/examples/lizard.png");
-
background-image: url("../../media/examples/lizard.png"),
+
background-image: url("../../media/examples/lizard.png"),
                   url("../../media/examples/star.png");
-
background-image: url("../../media/examples/star.png"),
+
background-image: url("../../media/examples/star.png"),
                   url("../../media/examples/lizard.png");
-
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
+
background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                   url("../../media/examples/lizard.png");
-
background-position-x: center;
+
background-position-x: center;
-
background-position-x: 25%;
+
background-position-x: 25%;
-
background-position-x: 2rem;
+
background-position-x: 2rem;
-
background-position-x: right 32px;
+
background-position-x: right 32px;
diff --git a/live-examples/css-examples/backgrounds-and-borders/background-position-y.html b/live-examples/css-examples/backgrounds-and-borders/background-position-y.html index 24f6c404f..cd06117ba 100644 --- a/live-examples/css-examples/backgrounds-and-borders/background-position-y.html +++ b/live-examples/css-examples/backgrounds-and-borders/background-position-y.html @@ -1,34 +1,34 @@
-
background-position-y: top;
+
background-position-y: top;
-
background-position-y: center;
+
background-position-y: center;
-
background-position-y: 25%;
+
background-position-y: 25%;
-
background-position-y: 2rem;
+
background-position-y: 2rem;
-
background-position-y: bottom 32px;
+
background-position-y: bottom 32px;
diff --git a/live-examples/css-examples/backgrounds-and-borders/background-position.html b/live-examples/css-examples/backgrounds-and-borders/background-position.html index 591ceae0c..a305107a6 100644 --- a/live-examples/css-examples/backgrounds-and-borders/background-position.html +++ b/live-examples/css-examples/backgrounds-and-borders/background-position.html @@ -1,41 +1,41 @@
-
background-position: top;
+
background-position: top;
-
background-position: left;
+
background-position: left;
-
background-position: center;
+
background-position: center;
-
background-position: 25% 75%;
+
background-position: 25% 75%;
-
background-position: bottom 50px right 100px;
+
background-position: bottom 50px right 100px;
-
background-position: right 35% bottom 45%;
+
background-position: right 35% bottom 45%;
diff --git a/live-examples/css-examples/backgrounds-and-borders/background-repeat.html b/live-examples/css-examples/backgrounds-and-borders/background-repeat.html index 056fe3332..cad85bd75 100644 --- a/live-examples/css-examples/backgrounds-and-borders/background-repeat.html +++ b/live-examples/css-examples/backgrounds-and-borders/background-repeat.html @@ -1,48 +1,48 @@
-
background-repeat: repeat-x;
+
background-repeat: repeat-x;
-
background-repeat: repeat-y;
+
background-repeat: repeat-y;
-
background-repeat: repeat;
+
background-repeat: repeat;
-
background-repeat: space;
+
background-repeat: space;
-
background-repeat: round;
+
background-repeat: round;
-
background-repeat: no-repeat;
+
background-repeat: no-repeat;
-
/* Two-value syntax: horizontal | vertical */
+
/* Two-value syntax: horizontal | vertical */
 background-repeat: repeat space;
-
background-repeat: space round;
+
background-repeat: space round;
diff --git a/live-examples/css-examples/backgrounds-and-borders/background-size.html b/live-examples/css-examples/backgrounds-and-borders/background-size.html index e31ca8d00..7514d31c5 100644 --- a/live-examples/css-examples/backgrounds-and-borders/background-size.html +++ b/live-examples/css-examples/backgrounds-and-borders/background-size.html @@ -1,13 +1,13 @@
-
background-size: contain;
+
background-size: contain;
-
background-size: contain;
+
background-size: contain;
 background-repeat: no-repeat;
-
background-size: cover;
+
background-size: cover;
-
background-size: 30%;
+
background-size: 30%;
-
background-size: 200px 100px;
+
background-size: 200px 100px;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-bottom-color.html b/live-examples/css-examples/backgrounds-and-borders/border-bottom-color.html index aca88a416..9db764f4c 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-bottom-color.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-bottom-color.html @@ -1,35 +1,35 @@
- 
border-bottom-color: red;
+ 
border-bottom-color: red;
- 
border-bottom-color: #32a1ce;
+ 
border-bottom-color: #32a1ce;
- 
border-bottom-color: rgb(170, 50, 220, .6);
+ 
border-bottom-color: rgb(170, 50, 220, .6);
- 
border-bottom-color: hsl(60, 90%, 50%, .8);
+ 
border-bottom-color: hsl(60, 90%, 50%, .8);
- 
border-bottom-color: transparent;
+ 
border-bottom-color: transparent;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-bottom-style.html b/live-examples/css-examples/backgrounds-and-borders/border-bottom-style.html index d19f5bb65..428e74112 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-bottom-style.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-bottom-style.html @@ -1,41 +1,41 @@
-
border-bottom-style: none;
+
border-bottom-style: none;
-
border-bottom-style: dotted;
+
border-bottom-style: dotted;
-
border-bottom-style: dashed;
+
border-bottom-style: dashed;
-
border-bottom-style: solid;
+
border-bottom-style: solid;
-
border-bottom-style: groove;
+
border-bottom-style: groove;
-
border-bottom-style: inset;
+
border-bottom-style: inset;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-bottom-width.html b/live-examples/css-examples/backgrounds-and-borders/border-bottom-width.html index 549ea0e05..c09a4c415 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-bottom-width.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-bottom-width.html @@ -1,35 +1,35 @@
- 
border-bottom-width: thick;
+ 
border-bottom-width: thick;
- 
border-bottom-width: 2em;
+ 
border-bottom-width: 2em;
- 
border-bottom-width: 4px;
+ 
border-bottom-width: 4px;
- 
border-bottom-width: 2ex;
+ 
border-bottom-width: 2ex;
- 
border-bottom-width: 0;
+ 
border-bottom-width: 0;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-bottom.html b/live-examples/css-examples/backgrounds-and-borders/border-bottom.html index 5cf326bb3..f460a1115 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-bottom.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-bottom.html @@ -1,35 +1,35 @@
- 
border-bottom: solid;
+ 
border-bottom: solid;
- 
border-bottom: dashed red;
+ 
border-bottom: dashed red;
- 
border-bottom: 1rem solid;
+ 
border-bottom: 1rem solid;
- 
border-bottom: thick double #32a1ce;
+ 
border-bottom: thick double #32a1ce;
- 
border-bottom: 4mm ridge rgb(170, 50, 220, .6);
+ 
border-bottom: 4mm ridge rgb(170, 50, 220, .6);
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-color.html b/live-examples/css-examples/backgrounds-and-borders/border-color.html index 0c6132bb2..661290f8e 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-color.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-color.html @@ -1,35 +1,35 @@
- 
border-color: red;
+ 
border-color: red;
- 
border-color: red #32a1ce;
+ 
border-color: red #32a1ce;
- 
border-color: red rgb(170, 50, 220, .6) green;
+ 
border-color: red rgb(170, 50, 220, .6) green;
- 
border-color: red yellow green hsl(60, 90%, 50%, .8);
+ 
border-color: red yellow green hsl(60, 90%, 50%, .8);
- 
border-color: red yellow green transparent;
+ 
border-color: red yellow green transparent;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-image.html b/live-examples/css-examples/backgrounds-and-borders/border-image.html index c92b3a30c..797eb7c7e 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-image.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-image.html @@ -1,6 +1,6 @@
-
/* image-source | height | width | repeat */
+
/* image-source | height | width | repeat */
 border-image: url('https://mdn.mozillademos.org/files/4127/border.png') 40 40 repeat;
-
border-image: linear-gradient(#51174e, #fff) 20;
+
border-image: linear-gradient(#51174e, #fff) 20;
-
/* image-source | border-image-slice | border-image-width | border-image-outset */
+
/* image-source | border-image-slice | border-image-width | border-image-outset */
 border-image: linear-gradient(#74992E, #fff) 50 / 12 / 10;
- 
border-left-color: #32a1ce;
+ 
border-left-color: #32a1ce;
- 
border-left-color: rgb(170, 50, 220, .6);
+ 
border-left-color: rgb(170, 50, 220, .6);
- 
border-left-color: hsl(60, 90%, 50%, .8);
+ 
border-left-color: hsl(60, 90%, 50%, .8);
- 
border-left-color: transparent;
+ 
border-left-color: transparent;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-left-style.html b/live-examples/css-examples/backgrounds-and-borders/border-left-style.html index 8c4b2a4a5..858395c51 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-left-style.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-left-style.html @@ -1,41 +1,41 @@
-
border-left-style: none;
+
border-left-style: none;
-
border-left-style: dotted;
+
border-left-style: dotted;
-
border-left-style: dashed;
+
border-left-style: dashed;
-
border-left-style: solid;
+
border-left-style: solid;
-
border-left-style: groove;
+
border-left-style: groove;
-
border-left-style: inset;
+
border-left-style: inset;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-left-width.html b/live-examples/css-examples/backgrounds-and-borders/border-left-width.html index c0d9a67ff..d6c1f58f0 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-left-width.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-left-width.html @@ -1,35 +1,35 @@
- 
border-left-width: thick;
+ 
border-left-width: thick;
- 
border-left-width: 2em;
+ 
border-left-width: 2em;
- 
border-left-width: 4px;
+ 
border-left-width: 4px;
- 
border-left-width: 2ex;
+ 
border-left-width: 2ex;
- 
border-left-width: 0;
+ 
border-left-width: 0;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-left.html b/live-examples/css-examples/backgrounds-and-borders/border-left.html index 474406c0c..09ee1804c 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-left.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-left.html @@ -1,35 +1,35 @@
- 
border-left: solid;
+ 
border-left: solid;
- 
border-left: dashed red;
+ 
border-left: dashed red;
- 
border-left: 1rem solid;
+ 
border-left: 1rem solid;
- 
border-left: thick double #32a1ce;
+ 
border-left: thick double #32a1ce;
- 
border-left: 4mm ridge rgb(170, 50, 220, .6);
+ 
border-left: 4mm ridge rgb(170, 50, 220, .6);
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-radius.html b/live-examples/css-examples/backgrounds-and-borders/border-radius.html index 7bd4bf0ac..e66c32665 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-radius.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-radius.html @@ -1,42 +1,42 @@
- 
border-radius: 30px;
+ 
border-radius: 30px;
- 
border-radius: 25% 10%;
+ 
border-radius: 25% 10%;
- 
border-radius: 10% 30% 50% 70%;
+ 
border-radius: 10% 30% 50% 70%;
- 
border-radius: 10% / 50%;
+ 
border-radius: 10% / 50%;
- 
border-radius: 10px 100px / 120px;
+ 
border-radius: 10px 100px / 120px;
- 
border-radius: 50% 20% / 10% 40%;
+ 
border-radius: 50% 20% / 10% 40%;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-right-color.html b/live-examples/css-examples/backgrounds-and-borders/border-right-color.html index b4b29aae0..efcc99826 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-right-color.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-right-color.html @@ -1,35 +1,35 @@
- 
border-right-color: red;
+ 
border-right-color: red;
- 
border-right-color: #32a1ce;
+ 
border-right-color: #32a1ce;
- 
border-right-color: rgb(170, 50, 220, .6);
+ 
border-right-color: rgb(170, 50, 220, .6);
- 
border-right-color: hsl(60, 90%, 50%, .8);
+ 
border-right-color: hsl(60, 90%, 50%, .8);
- 
border-right-color: transparent;
+ 
border-right-color: transparent;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-right-style.html b/live-examples/css-examples/backgrounds-and-borders/border-right-style.html index f13e90fa7..c69a2e898 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-right-style.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-right-style.html @@ -1,41 +1,41 @@
-
border-right-style: none;
+
border-right-style: none;
-
border-right-style: dotted;
+
border-right-style: dotted;
-
border-right-style: dashed;
+
border-right-style: dashed;
-
border-right-style: solid;
+
border-right-style: solid;
-
border-right-style: groove;
+
border-right-style: groove;
-
border-right-style: inset;
+
border-right-style: inset;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-right-width.html b/live-examples/css-examples/backgrounds-and-borders/border-right-width.html index e21d633ab..35ce646ed 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-right-width.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-right-width.html @@ -1,35 +1,35 @@
- 
border-right-width: thick;
+ 
border-right-width: thick;
- 
border-right-width: 2em;
+ 
border-right-width: 2em;
- 
border-right-width: 4px;
+ 
border-right-width: 4px;
- 
border-right-width: 2ex;
+ 
border-right-width: 2ex;
- 
border-right-width: 0;
+ 
border-right-width: 0;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-right.html b/live-examples/css-examples/backgrounds-and-borders/border-right.html index 17ca8b302..cfa70b8ea 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-right.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-right.html @@ -1,35 +1,35 @@
- 
border-right: solid;
+ 
border-right: solid;
- 
border-right: dashed red;
+ 
border-right: dashed red;
- 
border-right: 1rem solid;
+ 
border-right: 1rem solid;
- 
border-right: thick double #32a1ce;
+ 
border-right: thick double #32a1ce;
- 
border-right: 4mm ridge rgb(170, 50, 220, .6);
+ 
border-right: 4mm ridge rgb(170, 50, 220, .6);
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-style.html b/live-examples/css-examples/backgrounds-and-borders/border-style.html index ec1e56ca7..9e3407934 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-style.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-style.html @@ -1,41 +1,41 @@
-
border-style: none;
+
border-style: none;
-
border-style: dotted;
+
border-style: dotted;
-
border-style: inset;
+
border-style: inset;
-
border-style: dashed solid;
+
border-style: dashed solid;
-
border-style: dashed double none;
+
border-style: dashed double none;
-
border-style: dashed groove none dotted;
+
border-style: dashed groove none dotted;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-top-color.html b/live-examples/css-examples/backgrounds-and-borders/border-top-color.html index 82d933fd2..35962f6ef 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-top-color.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-top-color.html @@ -1,35 +1,35 @@
- 
border-top-color: red;
+ 
border-top-color: red;
- 
border-top-color: #32a1ce;
+ 
border-top-color: #32a1ce;
- 
border-top-color: rgb(170, 50, 220, .6);
+ 
border-top-color: rgb(170, 50, 220, .6);
- 
border-top-color: hsl(60, 90%, 50%, .8);
+ 
border-top-color: hsl(60, 90%, 50%, .8);
- 
border-top-color: transparent;
+ 
border-top-color: transparent;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-top-style.html b/live-examples/css-examples/backgrounds-and-borders/border-top-style.html index e8ed59eb4..2e7d29f57 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-top-style.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-top-style.html @@ -1,41 +1,41 @@
-
border-top-style: none;
+
border-top-style: none;
-
border-top-style: dotted;
+
border-top-style: dotted;
-
border-top-style: dashed;
+
border-top-style: dashed;
-
border-top-style: solid;
+
border-top-style: solid;
-
border-top-style: groove;
+
border-top-style: groove;
-
border-top-style: inset;
+
border-top-style: inset;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-top-width.html b/live-examples/css-examples/backgrounds-and-borders/border-top-width.html index ff3f269b0..96b303f32 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-top-width.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-top-width.html @@ -1,35 +1,35 @@
- 
border-top-width: thick;
+ 
border-top-width: thick;
- 
border-top-width: 2em;
+ 
border-top-width: 2em;
- 
border-top-width: 4px;
+ 
border-top-width: 4px;
- 
border-top-width: 2ex;
+ 
border-top-width: 2ex;
- 
border-top-width: 0;
+ 
border-top-width: 0;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-top.html b/live-examples/css-examples/backgrounds-and-borders/border-top.html index 9325ed81f..b7fd87734 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-top.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-top.html @@ -1,35 +1,35 @@
- 
border-top: solid;
+ 
border-top: solid;
- 
border-top: dashed red;
+ 
border-top: dashed red;
- 
border-top: 1rem solid;
+ 
border-top: 1rem solid;
- 
border-top: thick double #32a1ce;
+ 
border-top: thick double #32a1ce;
- 
border-top: 4mm ridge rgb(170, 50, 220, .6);
+ 
border-top: 4mm ridge rgb(170, 50, 220, .6);
diff --git a/live-examples/css-examples/backgrounds-and-borders/border-width.html b/live-examples/css-examples/backgrounds-and-borders/border-width.html index 74c131291..164384252 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border-width.html +++ b/live-examples/css-examples/backgrounds-and-borders/border-width.html @@ -1,35 +1,35 @@
- 
border-width: thick;
+ 
border-width: thick;
- 
border-width: 1em;
+ 
border-width: 1em;
- 
border-width: 4px 1.25em;
+ 
border-width: 4px 1.25em;
- 
border-width: 2ex 1.25ex 0.5ex;
+ 
border-width: 2ex 1.25ex 0.5ex;
- 
border-width: 0 4px 8px 12px;
+ 
border-width: 0 4px 8px 12px;
diff --git a/live-examples/css-examples/backgrounds-and-borders/border.html b/live-examples/css-examples/backgrounds-and-borders/border.html index 4487671fd..ad888e8e7 100644 --- a/live-examples/css-examples/backgrounds-and-borders/border.html +++ b/live-examples/css-examples/backgrounds-and-borders/border.html @@ -1,35 +1,35 @@
- 
border: solid;
+ 
border: solid;
- 
border: dashed red;
+ 
border: dashed red;
- 
border: 1rem solid;
+ 
border: 1rem solid;
- 
border: thick double #32a1ce;
+ 
border: thick double #32a1ce;
- 
border: 4mm ridge rgb(170, 50, 220, .6);
+ 
border: 4mm ridge rgb(170, 50, 220, .6);
diff --git a/live-examples/css-examples/backgrounds-and-borders/box-shadow.html b/live-examples/css-examples/backgrounds-and-borders/box-shadow.html index 4cf44b588..c092c4576 100644 --- a/live-examples/css-examples/backgrounds-and-borders/box-shadow.html +++ b/live-examples/css-examples/backgrounds-and-borders/box-shadow.html @@ -1,34 +1,34 @@
-
box-shadow: 10px 5px 5px red;
+
box-shadow: 10px 5px 5px red;
-
box-shadow: 60px -16px teal;
+
box-shadow: 60px -16px teal;
-
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
+
box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
-
box-shadow: inset 5em 1em gold;
+
box-shadow: inset 5em 1em gold;
-
box-shadow: 3px 3px red, -1em 0 .4em olive;
+
box-shadow: 3px 3px red, -1em 0 .4em olive;
diff --git a/live-examples/css-examples/basic-box-model/margin.html b/live-examples/css-examples/basic-box-model/margin.html index fb3b32303..1f7bd8eda 100644 --- a/live-examples/css-examples/basic-box-model/margin.html +++ b/live-examples/css-examples/basic-box-model/margin.html @@ -1,34 +1,34 @@
-
margin: 1em;
+
margin: 1em;
-
margin: 5% 0;
+
margin: 5% 0;
-
margin: 10px 50px 20px;
+
margin: 10px 50px 20px;
-
margin: 10px 50px 20px 0;
+
margin: 10px 50px 20px 0;
-
margin: 0;
+
margin: 0;
diff --git a/live-examples/css-examples/basic-box-model/overflow-x.html b/live-examples/css-examples/basic-box-model/overflow-x.html index ad5ee2bcd..87bb77e13 100644 --- a/live-examples/css-examples/basic-box-model/overflow-x.html +++ b/live-examples/css-examples/basic-box-model/overflow-x.html @@ -1,28 +1,28 @@
- 
overflow-x: visible;
+ 
overflow-x: visible;
- 
overflow-x: hidden;
+ 
overflow-x: hidden;
- 
overflow-x: scroll;
+ 
overflow-x: scroll;
- 
overflow-x: auto;
+ 
overflow-x: auto;
diff --git a/live-examples/css-examples/basic-box-model/overflow-y.html b/live-examples/css-examples/basic-box-model/overflow-y.html index 7171434de..a26fc8198 100644 --- a/live-examples/css-examples/basic-box-model/overflow-y.html +++ b/live-examples/css-examples/basic-box-model/overflow-y.html @@ -1,28 +1,28 @@
- 
overflow-y: visible;
+ 
overflow-y: visible;
- 
overflow-y: hidden;
+ 
overflow-y: hidden;
- 
overflow-y: scroll;
+ 
overflow-y: scroll;
- 
overflow-y: auto;
+ 
overflow-y: auto;
diff --git a/live-examples/css-examples/basic-box-model/overflow.html b/live-examples/css-examples/basic-box-model/overflow.html index 11960fd2e..5f92ed189 100644 --- a/live-examples/css-examples/basic-box-model/overflow.html +++ b/live-examples/css-examples/basic-box-model/overflow.html @@ -1,28 +1,28 @@
- 
overflow: visible;
+ 
overflow: visible;
- 
overflow: hidden;
+ 
overflow: hidden;
- 
overflow: scroll;
+ 
overflow: scroll;
- 
overflow: auto;
+ 
overflow: auto;
diff --git a/live-examples/css-examples/basic-box-model/padding-bottom.html b/live-examples/css-examples/basic-box-model/padding-bottom.html index 0e14d75fd..7b9c200b0 100644 --- a/live-examples/css-examples/basic-box-model/padding-bottom.html +++ b/live-examples/css-examples/basic-box-model/padding-bottom.html @@ -1,34 +1,34 @@
-
padding-bottom: 1em;
+
padding-bottom: 1em;
-
padding-bottom: 10%;
+
padding-bottom: 10%;
-
padding-bottom: 20px;
+
padding-bottom: 20px;
-
padding-bottom: 1ch;
+
padding-bottom: 1ch;
-
padding-bottom: 0;
+
padding-bottom: 0;
diff --git a/live-examples/css-examples/basic-box-model/padding-left.html b/live-examples/css-examples/basic-box-model/padding-left.html index 83fbad92a..e62f75221 100644 --- a/live-examples/css-examples/basic-box-model/padding-left.html +++ b/live-examples/css-examples/basic-box-model/padding-left.html @@ -1,34 +1,34 @@
-
padding-left: 1.5em;
+
padding-left: 1.5em;
-
padding-left: 10%;
+
padding-left: 10%;
-
padding-left: 20px;
+
padding-left: 20px;
-
padding-left: 1ch;
+
padding-left: 1ch;
-
padding-left: 0;
+
padding-left: 0;
diff --git a/live-examples/css-examples/basic-box-model/padding-right.html b/live-examples/css-examples/basic-box-model/padding-right.html index 710fab893..8e763c78a 100644 --- a/live-examples/css-examples/basic-box-model/padding-right.html +++ b/live-examples/css-examples/basic-box-model/padding-right.html @@ -1,34 +1,34 @@
-
padding-right: 1.5em;
+
padding-right: 1.5em;
-
padding-right: 10%;
+
padding-right: 10%;
-
padding-right: 20px;
+
padding-right: 20px;
-
padding-right: 1ch;
+
padding-right: 1ch;
-
padding-right: 0;
+
padding-right: 0;
diff --git a/live-examples/css-examples/basic-box-model/padding-top.html b/live-examples/css-examples/basic-box-model/padding-top.html index 4a4c66b54..7ed20a09b 100644 --- a/live-examples/css-examples/basic-box-model/padding-top.html +++ b/live-examples/css-examples/basic-box-model/padding-top.html @@ -1,34 +1,34 @@
-
padding-top: 1em;
+
padding-top: 1em;
-
padding-top: 10%;
+
padding-top: 10%;
-
padding-top: 20px;
+
padding-top: 20px;
-
padding-top: 1ch;
+
padding-top: 1ch;
-
padding-top: 0;
+
padding-top: 0;
diff --git a/live-examples/css-examples/basic-box-model/padding.html b/live-examples/css-examples/basic-box-model/padding.html index a9fa64c64..fa900f4b5 100644 --- a/live-examples/css-examples/basic-box-model/padding.html +++ b/live-examples/css-examples/basic-box-model/padding.html @@ -1,34 +1,34 @@
-
padding: 1em;
+
padding: 1em;
-
padding: 10% 0;
+
padding: 10% 0;
-
padding: 10px 50px 20px;
+
padding: 10px 50px 20px;
-
padding: 10px 50px 30px 0;
+
padding: 10px 50px 30px 0;
-
padding: 0;
+
padding: 0;
diff --git a/live-examples/css-examples/basic-user-interface/box-sizing.html b/live-examples/css-examples/basic-user-interface/box-sizing.html index 8fe254c76..286eaede7 100644 --- a/live-examples/css-examples/basic-user-interface/box-sizing.html +++ b/live-examples/css-examples/basic-user-interface/box-sizing.html @@ -1,6 +1,6 @@
-
box-sizing: content-box;
+
box-sizing: content-box;
 width: 100%;
-
box-sizing: content-box;
+
box-sizing: content-box;
 width: 100%;
 border: solid #5B6DCD 10px;
 padding: 5px;

@@ -18,7 +18,7 @@
-
box-sizing: border-box;
+
box-sizing: border-box;
 width: 100%;
 border: solid #5B6DCD 10px;
 padding: 5px;

diff --git a/live-examples/css-examples/basic-user-interface/outline-color.html b/live-examples/css-examples/basic-user-interface/outline-color.html
index fab2e274b..449738213 100644
--- a/live-examples/css-examples/basic-user-interface/outline-color.html
+++ b/live-examples/css-examples/basic-user-interface/outline-color.html
@@ -1,35 +1,35 @@
 

 
     

-        
outline-color: red;

+        
outline-color: red;

         
     

 
     

-        
outline-color: #32a1ce;

+        
outline-color: #32a1ce;

         
     

 
     

-        
outline-color: rgba(170, 50, 220, .6);

+        
outline-color: rgba(170, 50, 220, .6);

         
     

 
     

-        
outline-color: hsla(60, 90%, 50%, .8);

+        
outline-color: hsla(60, 90%, 50%, .8);

         
     

 
     

-        
outline-color: currentcolor;

+        
outline-color: currentcolor;

         
diff --git a/live-examples/css-examples/basic-user-interface/outline-offset.html b/live-examples/css-examples/basic-user-interface/outline-offset.html
index ea091205f..ecdb67b99 100644
--- a/live-examples/css-examples/basic-user-interface/outline-offset.html
+++ b/live-examples/css-examples/basic-user-interface/outline-offset.html
@@ -1,21 +1,21 @@
 

 
     

-        
outline-offset: 4px;

+        
outline-offset: 4px;

         
     

 
     

-        
outline-offset: .6rem;

+        
outline-offset: .6rem;

         
     

 
     

-        
outline-offset: 12px;
+        
outline-offset: 12px;
 outline: 5px dashed blue;

         
     

 
     

-        
outline-style: dotted;

+        
outline-style: dotted;

         
     

 
     

-        
outline-style: solid;

+        
outline-style: solid;

         
     

 
     

-        
outline-style: groove;

+        
outline-style: groove;

         
     

 
     

-        
outline-style: inset;

+        
outline-style: inset;

         
diff --git a/live-examples/css-examples/basic-user-interface/outline-width.html b/live-examples/css-examples/basic-user-interface/outline-width.html
index b3238d0d2..06eb7884a 100644
--- a/live-examples/css-examples/basic-user-interface/outline-width.html
+++ b/live-examples/css-examples/basic-user-interface/outline-width.html
@@ -1,28 +1,28 @@
 

 
     

-        
outline-width: 12px;

+        
outline-width: 12px;

         
     

 
     

-        
outline-width: thin;

+        
outline-width: thin;

         
     

 
     

-        
outline-width: medium;

+        
outline-width: medium;

         
     

 
     

-        
outline-width: thick;

+        
outline-width: thick;

         
diff --git a/live-examples/css-examples/basic-user-interface/outline.html b/live-examples/css-examples/basic-user-interface/outline.html
index 5c531d200..f20da5d75 100644
--- a/live-examples/css-examples/basic-user-interface/outline.html
+++ b/live-examples/css-examples/basic-user-interface/outline.html
@@ -1,35 +1,35 @@
 

 
     

-        
outline: solid;

+        
outline: solid;

         
     

 
     

-        
outline: dashed red;

+        
outline: dashed red;

         
     

 
     

-        
outline: 1rem solid;

+        
outline: 1rem solid;

         
     

 
     

-        
outline: thick double #32a1ce;

+        
outline: thick double #32a1ce;

         
     

 
     

-        
outline: 8px ridge rgba(170, 50, 220, .6);
+        
outline: 8px ridge rgba(170, 50, 220, .6);
 border-radius: 2rem;

         
 

 
 

-
text-overflow: ellipsis;

+
text-overflow: ellipsis;

 
 

 
 

-
text-overflow: "-";

+
text-overflow: "-";

 
 

 
 

-
text-overflow: "";

+
text-overflow: "";

 
diff --git a/live-examples/css-examples/color/color.html b/live-examples/css-examples/color/color.html
index 7b2282a74..5f2aaa613 100644
--- a/live-examples/css-examples/color/color.html
+++ b/live-examples/css-examples/color/color.html
@@ -1,55 +1,55 @@
 

 

-
color: currentcolor;

+
color: currentcolor;

 
 

 
 

-
color: rebeccapurple;

+
color: rebeccapurple;

 
 

 
 

-
color: #00ff00;

+
color: #00ff00;

 
 

 
 

-
color: rgb(34, 12, 64);

+
color: rgb(34, 12, 64);

 
 

 
 

-
color: rgba(34, 12, 64, 0.3);

+
color: rgba(34, 12, 64, 0.3);

 
 

 
 

-
color: hsl(30, 100%, 50%);

+
color: hsl(30, 100%, 50%);

 
 

 
 

-
color: hsla(30, 100%, 50%, 0.3);

+
color: hsla(30, 100%, 50%, 0.3);

 
 

 
 

-
color: initial;

+
color: initial;

 
diff --git a/live-examples/css-examples/color/opacity.html b/live-examples/css-examples/color/opacity.html
index faedd39fe..299843952 100644
--- a/live-examples/css-examples/color/opacity.html
+++ b/live-examples/css-examples/color/opacity.html
@@ -1,19 +1,19 @@
 

 
     

-        
opacity: 0;

+        
opacity: 0;

         
     

     

-        
opacity: 0.33;

+        
opacity: 0.33;

         
     

     

-        
opacity: 1;

+        
opacity: 1;

         
diff --git a/live-examples/css-examples/filter-effects/blur.html b/live-examples/css-examples/filter-effects/blur.html
index e186ec0df..f6edfffd5 100644
--- a/live-examples/css-examples/filter-effects/blur.html
+++ b/live-examples/css-examples/filter-effects/blur.html
@@ -1,20 +1,20 @@
 

 

-
filter: blur(0);

+
filter: blur(0);

 
 

 
 

-
filter: blur(4px);

+
filter: blur(4px);

 
 

 
 

-
filter: blur(1.5rem);

+
filter: blur(1.5rem);

 
diff --git a/live-examples/css-examples/filter-effects/brightness.html b/live-examples/css-examples/filter-effects/brightness.html
index 4981c9b78..cb736b7f0 100644
--- a/live-examples/css-examples/filter-effects/brightness.html
+++ b/live-examples/css-examples/filter-effects/brightness.html
@@ -1,27 +1,27 @@
 

 

-
filter: brightness(1);

+
filter: brightness(1);

 
 

 
 

-
filter: brightness(1.75);

+
filter: brightness(1.75);

 
 

 
 

-
filter: brightness(50%);

+
filter: brightness(50%);

 
 

 
 

-
filter: brightness(0);

+
filter: brightness(0);

 
diff --git a/live-examples/css-examples/filter-effects/contrast.html b/live-examples/css-examples/filter-effects/contrast.html
index b6c73bf2e..b7c0891d1 100644
--- a/live-examples/css-examples/filter-effects/contrast.html
+++ b/live-examples/css-examples/filter-effects/contrast.html
@@ -1,27 +1,27 @@
 

 

-
filter: contrast(1);

+
filter: contrast(1);

 
 

 
 

-
filter: contrast(1.75);

+
filter: contrast(1.75);

 
 

 
 

-
filter: contrast(50%);

+
filter: contrast(50%);

 
 

 
 

-
filter: contrast(0);

+
filter: contrast(0);

 
diff --git a/live-examples/css-examples/filter-effects/drop-shadow.html b/live-examples/css-examples/filter-effects/drop-shadow.html
index 7d706615c..8eb59ad3b 100644
--- a/live-examples/css-examples/filter-effects/drop-shadow.html
+++ b/live-examples/css-examples/filter-effects/drop-shadow.html
@@ -1,20 +1,20 @@
 

 

-
filter: drop-shadow(30px 10px 4px #4444dd);

+
filter: drop-shadow(30px 10px 4px #4444dd);

 
 

 
 

-
filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));

+
filter: drop-shadow(0 -6mm 4mm rgb(160, 0, 210));

 
 

 
 

-
filter: drop-shadow(0 0 0.75rem crimson);

+
filter: drop-shadow(0 0 0.75rem crimson);

 
diff --git a/live-examples/css-examples/filter-effects/filter.html b/live-examples/css-examples/filter-effects/filter.html
index d5b0c8693..eddf0c5e0 100644
--- a/live-examples/css-examples/filter-effects/filter.html
+++ b/live-examples/css-examples/filter-effects/filter.html
@@ -1,41 +1,41 @@
 

 

-
filter: url("../../media/examples/shadow.svg#element-id");

+
filter: url("../../media/examples/shadow.svg#element-id");

 
 

 
 

-
filter: blur(5px);

+
filter: blur(5px);

 
 

 
 

-
filter: contrast(200%);

+
filter: contrast(200%);

 
 

 
 

-
filter: grayscale(80%);

+
filter: grayscale(80%);

 
 

 
 

-
filter: hue-rotate(90deg);

+
filter: hue-rotate(90deg);

 
 

 
 

-
filter: drop-shadow(16px 16px 20px red) invert(75%);

+
filter: drop-shadow(16px 16px 20px red) invert(75%);

 
diff --git a/live-examples/css-examples/filter-effects/grayscale.html b/live-examples/css-examples/filter-effects/grayscale.html
index c52532fea..9eccf5a19 100644
--- a/live-examples/css-examples/filter-effects/grayscale.html
+++ b/live-examples/css-examples/filter-effects/grayscale.html
@@ -1,27 +1,27 @@
 

 

-
filter: grayscale(0);

+
filter: grayscale(0);

 
 

 
 

-
filter: grayscale(0.20);

+
filter: grayscale(0.20);

 
 

 
 

-
filter: grayscale(60%);

+
filter: grayscale(60%);

 
 

 
 

-
filter: grayscale(1);

+
filter: grayscale(1);

 
diff --git a/live-examples/css-examples/filter-effects/hue-rotate.html b/live-examples/css-examples/filter-effects/hue-rotate.html
index c28fe09de..f8842d884 100644
--- a/live-examples/css-examples/filter-effects/hue-rotate.html
+++ b/live-examples/css-examples/filter-effects/hue-rotate.html
@@ -1,27 +1,27 @@
 

 

-
filter: hue-rotate(0);

+
filter: hue-rotate(0);

 
 

 
 

-
filter: hue-rotate(90deg);

+
filter: hue-rotate(90deg);

 
 

 
 

-
filter: hue-rotate(-0.25turn);

+
filter: hue-rotate(-0.25turn);

 
 

 
 

-
filter: hue-rotate(3.142rad);

+
filter: hue-rotate(3.142rad);

 
diff --git a/live-examples/css-examples/filter-effects/invert.html b/live-examples/css-examples/filter-effects/invert.html
index 6edb080b4..08797624b 100644
--- a/live-examples/css-examples/filter-effects/invert.html
+++ b/live-examples/css-examples/filter-effects/invert.html
@@ -1,34 +1,34 @@
 

 

-
filter: invert(0);

+
filter: invert(0);

 
 

 
 

-
filter: invert(0.30);

+
filter: invert(0.30);

 
 

 
 

-
filter: invert(50%);

+
filter: invert(50%);

 
 

 
 

-
filter: invert(70%);

+
filter: invert(70%);

 
 

 
 

-
filter: invert(1);

+
filter: invert(1);

 
diff --git a/live-examples/css-examples/filter-effects/opacity.html b/live-examples/css-examples/filter-effects/opacity.html
index 18d5bf8a8..e430f283a 100644
--- a/live-examples/css-examples/filter-effects/opacity.html
+++ b/live-examples/css-examples/filter-effects/opacity.html
@@ -1,34 +1,34 @@
 

 

-
filter: opacity(1);

+
filter: opacity(1);

 
 

 
 

-
filter: opacity(80%);

+
filter: opacity(80%);

 
 

 
 

-
filter: opacity(50%);

+
filter: opacity(50%);

 
 

 
 

-
filter: opacity(0.20);

+
filter: opacity(0.20);

 
 

 
 

-
filter: opacity(0);

+
filter: opacity(0);

 
diff --git a/live-examples/css-examples/filter-effects/saturate.html b/live-examples/css-examples/filter-effects/saturate.html
index 830418b19..8dc92ca62 100644
--- a/live-examples/css-examples/filter-effects/saturate.html
+++ b/live-examples/css-examples/filter-effects/saturate.html
@@ -1,27 +1,27 @@
 

 

-
filter: saturate(1);

+
filter: saturate(1);

 
 

 
 

-
filter: saturate(4);

+
filter: saturate(4);

 
 

 
 

-
filter: saturate(50%);

+
filter: saturate(50%);

 
 

 
 

-
filter: saturate(0);

+
filter: saturate(0);

 
diff --git a/live-examples/css-examples/filter-effects/sepia.html b/live-examples/css-examples/filter-effects/sepia.html
index 43e386dd6..ec28846c7 100644
--- a/live-examples/css-examples/filter-effects/sepia.html
+++ b/live-examples/css-examples/filter-effects/sepia.html
@@ -1,27 +1,27 @@
 

 

-
filter: sepia(0);

+
filter: sepia(0);

 
 

 
 

-
filter: sepia(0.20);

+
filter: sepia(0.20);

 
 

 
 

-
filter: sepia(60%);

+
filter: sepia(60%);

 
 

 
 

-
filter: sepia(1);

+
filter: sepia(1);

 
diff --git a/live-examples/css-examples/flexbox/flex-basis.css b/live-examples/css-examples/flexbox/flex-basis.css
new file mode 100644
index 000000000..f99b14abd
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-basis.css
@@ -0,0 +1,17 @@
+.example-container {
+    background-color: #eee;
+    border: .75em solid;
+    padding: .75em;
+    width: 80%;
+    max-height: 300px;
+    display: flex;
+}
+
+.example-container > div {
+    background-color: rgba(0, 0, 255, 0.2);
+    border: 3px solid blue;
+    margin: 10px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+}
diff --git a/live-examples/css-examples/flexbox/flex-basis.html b/live-examples/css-examples/flexbox/flex-basis.html
new file mode 100644
index 000000000..6e88a805c
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-basis.html
@@ -0,0 +1,32 @@
+

+    

+        
flex-basis: auto;

+        
+    

+
+    

+        
flex-basis: 0;

+        
+    

+
+    

+        
flex-basis: 200px;

+        
+    
 
+

+
+
diff --git a/live-examples/css-examples/flexbox/flex-direction.css b/live-examples/css-examples/flexbox/flex-direction.css
new file mode 100644
index 000000000..af5d4fc0a
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-direction.css
@@ -0,0 +1,14 @@
+#example-element {
+    background-color: #eee;
+    border: .75em solid;
+    padding: .75em;
+    width: 80%;
+    display: flex;
+}
+
+#example-element > div {
+    background-color: rgba(0, 0, 255, 0.2);
+    border: 3px solid blue;
+    width: 60px;
+    margin: 10px;
+}
diff --git a/live-examples/css-examples/flexbox/flex-direction.html b/live-examples/css-examples/flexbox/flex-direction.html
new file mode 100644
index 000000000..8fd2ef20c
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-direction.html
@@ -0,0 +1,39 @@
+

+    

+        
flex-direction: row;

+        
+    

+
+    

+        
flex-direction: row-reverse;

+        
+    

+
+    

+        
flex-direction: column;

+        
+    

+
+    

+        
flex-direction: column-reverse;

+        
+    

+

+
+
diff --git a/live-examples/css-examples/flexbox/flex-flow.css b/live-examples/css-examples/flexbox/flex-flow.css
new file mode 100644
index 000000000..a22547850
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-flow.css
@@ -0,0 +1,15 @@
+#example-element {
+    background-color: #eee;
+    border: .75em solid;
+    padding: .75em;
+    width: 80%;
+    max-height: 300px;
+    display: flex;
+}
+
+#example-element > div {
+    background-color: rgba(0, 0, 255, 0.2);
+    border: 3px solid blue;
+    width: 60px;
+    margin: 10px;
+}
diff --git a/live-examples/css-examples/flexbox/flex-flow.html b/live-examples/css-examples/flexbox/flex-flow.html
new file mode 100644
index 000000000..c323da120
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-flow.html
@@ -0,0 +1,42 @@
+

+    

+        
flex-flow: row wrap;

+        
+    

+
+    

+        
flex-flow: row-reverse no-wrap;

+        
+    

+
+    

+        
flex-flow: column wrap-reverse;

+        
+    

+
+    

+        
flex-flow: column wrap;

+        
+    

+

+
+
diff --git a/live-examples/css-examples/flexbox/flex-grow.css b/live-examples/css-examples/flexbox/flex-grow.css
new file mode 100644
index 000000000..72d2802e2
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-grow.css
@@ -0,0 +1,17 @@
+.example-container {
+    background-color: #eee;
+    border: .75em solid;
+    padding: .75em;
+    width: 80%;
+    max-height: 300px;
+    display: flex;
+}
+
+.example-container > div {
+    background-color: rgba(0, 0, 255, 0.2);
+    border: 3px solid blue;
+    margin: 10px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+}
diff --git a/live-examples/css-examples/flexbox/flex-grow.html b/live-examples/css-examples/flexbox/flex-grow.html
new file mode 100644
index 000000000..152eebd57
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-grow.html
@@ -0,0 +1,32 @@
+

+    

+        
flex-grow: 1;

+        
+    

+
+    

+        
flex-grow: 2;

+        
+    

+
+    

+        
flex-grow: 3;

+        
+    

+

+
+
diff --git a/live-examples/css-examples/flexbox/flex-shrink.css b/live-examples/css-examples/flexbox/flex-shrink.css
new file mode 100644
index 000000000..c4991e052
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-shrink.css
@@ -0,0 +1,17 @@
+.example-container {
+    background-color: #eee;
+    border: .75em solid;
+    padding: .75em;
+    width: 80%;
+    max-height: 300px;
+    display: flex;
+}
+
+.example-container > div {
+    background-color: rgba(0, 0, 255, 0.2);
+    border: 3px solid blue;
+    margin: 10px;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 300px;
+}
diff --git a/live-examples/css-examples/flexbox/flex-shrink.html b/live-examples/css-examples/flexbox/flex-shrink.html
new file mode 100644
index 000000000..dbe24c478
--- /dev/null
+++ b/live-examples/css-examples/flexbox/flex-shrink.html
@@ -0,0 +1,32 @@
+

+    

+        
flex-shrink: 0;

+        
+    

+
+    

+        
flex-shrink: 1;

+        
+    

+
+    

+        
flex-shrink: 2;

+        
+    

+

+
+
diff --git a/live-examples/css-examples/flexbox/flex-wrap.html b/live-examples/css-examples/flexbox/flex-wrap.html
index b4024edd8..8214218e2 100644
--- a/live-examples/css-examples/flexbox/flex-wrap.html
+++ b/live-examples/css-examples/flexbox/flex-wrap.html
@@ -1,26 +1,24 @@
 

-
     

-        
flex-wrap: nowrap;

+        
flex-wrap: nowrap;

         
     

 
     

-        
flex-wrap: wrap;

+        
flex-wrap: wrap;

         
     

 
     

-        
flex-wrap: wrap-reverse;

+        
flex-wrap: wrap-reverse;

         
     

-