properties.yml

---
- title: align-content
  is_shorthand: false
  description: "<p>Defines how each line is aligned within a flexbox container. It
    only applies if <code>flex-wrap: wrap</code> is present, and if there are <strong>multiple
    lines</strong> of flexbox items.</p>"
  styles:
  - ".align-content { background: hsl(0, 0%, 95%);display: flex;flex-wrap: wrap;height:
    300px;padding: 0; }"
  - '.align-content .square { height: 46px;margin: 2px;width: 30%; }.align-content
    .square:nth-child(2) { height: 96px; }.align-content .box { height: 150px;left:
    0;position: absolute;right: 0;top: 0; }.align-content .box.is-red:before { content:
    "First line"; }.align-content .box.is-green { top: 150px; }.align-content .box.is-green:before
    { content: "Second line"; }'
  - "#align-content-stretch{ align-content:stretch;}"
  - "#align-content-flex-start{ align-content:flex-start;}"
  - "#align-content-flex-start .box.is-red { height: 100px; }#align-content-flex-start
    .box.is-green { height: 50px;top: 100px; }"
  - "#align-content-flex-end{ align-content:flex-end;}"
  - "#align-content-flex-end .box.is-red { height: 100px;top: 150px; }#align-content-flex-end
    .box.is-green { height: 50px;top: 250px; }"
  - "#align-content-center{ align-content:center;}"
  - "#align-content-center .box.is-red { height: 100px;top: 75px; }#align-content-center
    .box.is-green { height: 50px;top: 175px; }"
  - "#align-content-space-between{ align-content:space-between;}"
  - "#align-content-space-between .box.is-red { height: 100px;top: 0; }#align-content-space-between
    .box.is-green { height: 50px;top: 250px; }"
  - "#align-content-space-around{ align-content:space-around;}"
  - "#align-content-space-around .box.is-red { height: 100px;top: 38px; }#align-content-space-around
    .box.is-green { height: 50px;top: 213px; }"
  actions: []
  examples:
  - is_default: true
    title: 'align-content: stretch;'
    description: "<p>Each line will stretch to <em>fill</em> the remaining space.</p>
      <p>In this case, the container is <code>300px</code> high. All boxes are <code>50px</code>
      high, apart from the second one who is <code>100px</code> high.</p>"
    output: <div class="example-output-div align-content" id="align-content-stretch"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="box is-red"></div><div class="box is-green"></div></div>
  - is_default: false
    title: 'align-content: flex-start;'
    description: "<p>Each line will only fill the space it <em>needs</em>. They will
      all move towards the <strong>start</strong> of the flexbox container's cross
      axis.</p>"
    output: <div class="example-output-div align-content" id="align-content-flex-start"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="box is-red"></div><div class="box is-green"></div></div>
  - is_default: false
    title: 'align-content: flex-end;'
    description: "<p>Each line will only fill the space it <em>needs</em>. They will
      all move towards the <strong>end</strong> of the flexbox container's cross axis.</p>"
    output: <div class="example-output-div align-content" id="align-content-flex-end"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="box is-red"></div><div class="box is-green"></div></div>
  - is_default: false
    title: 'align-content: center;'
    description: "<p>Each line will only fill the space it <em>needs</em>. They will
      all move towards the <strong>center</strong> of the flexbox container's cross
      axis.</p>"
    output: <div class="example-output-div align-content" id="align-content-center"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="box is-red"></div><div class="box is-green"></div></div>
  - is_default: false
    title: 'align-content: space-between;'
    description: "<p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em>
      space will appear <strong>between</strong> the lines.</p>"
    output: <div class="example-output-div align-content" id="align-content-space-between"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="box is-red"></div><div class="box is-green"></div></div>
  - is_default: false
    title: 'align-content: space-around;'
    description: "<p>Each line will only fill the space it <em>needs</em>. The <em>remaining</em>
      space will be distributed equally <strong>around</strong> the lines: before
      the first line, between the two, and after the last one.</p>"
    output: <div class="example-output-div align-content" id="align-content-space-around"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="box is-red"></div><div class="box is-green"></div></div>
- title: align-items
  is_shorthand: false
  description: "<p>Defines how flexbox items are aligned according to the <strong>cross</strong>
    axis, within a line of a flexbox container.</p>"
  styles:
  - ".align-items { background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content:
    center;padding: 0; }"
  - ".align-items .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-items
    .square:nth-child(2) { height: 100px; }.align-items .square:nth-child(4) { height:
    75px; }.align-items .line { left: 2px;position: absolute;right: 2px; }"
  - "#align-items-flex-start{ align-items:flex-start;}"
  - "#align-items-flex-start .line { top: 0; }"
  - "#align-items-flex-end{ align-items:flex-end;}"
  - "#align-items-flex-end .line { bottom: 0; }"
  - "#align-items-center{ align-items:center;}"
  - "#align-items-center .line { top: 50%; }"
  - "#align-items-baseline{ align-items:baseline;}"
  - "#align-items-baseline .line { top: 55px; }"
  - "#align-items-stretch{ align-items:stretch;}"
  - "#align-items-stretch .square { height: auto; }#align-items-stretch .square:nth-child(2)
    { height: auto; }#align-items-stretch .square:nth-child(4) { height: auto; }#align-items-stretch
    .line { display: none; }"
  actions: []
  examples:
  - is_default: false
    title: 'align-items: flex-start;'
    description: "<p>The flexbox items are aligned at the <strong>start</strong> of
      the <strong>cross axis</strong>.</p> <p>By default, the cross axis is vertical.
      This means the flexbox items will be aligned <em>vertically</em> at the <em>top</em>.</p>"
    output: <div class="example-output-div align-items" id="align-items-flex-start"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-red"></div></div>
  - is_default: false
    title: 'align-items: flex-end;'
    description: "<p>The flexbox items are aligned at the <strong>end</strong> of
      the <strong>cross axis</strong>.</p> <p>By default, the cross axis is vertical.
      This means the flexbox items will be aligned <em>vertically</em> at the _bottom.</p>"
    output: <div class="example-output-div align-items" id="align-items-flex-end"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-red"></div></div>
  - is_default: false
    title: 'align-items: center;'
    description: "<p>The flexbox items are aligned at the <strong>center</strong>
      of the <strong>cross axis</strong>.</p> <p>By default, the cross axis is vertical.
      This means the flexbox items will be <strong>centered</strong> <em>vertically</em>.</p>"
    output: <div class="example-output-div align-items" id="align-items-center"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-red"></div></div>
  - is_default: false
    title: 'align-items: baseline;'
    description: "<p>The flexbox items are aligned at the <strong>baseline</strong>
      of the <strong>cross axis</strong>.</p> <p>By default, the cross axis is vertical.
      This means the flexbox items will align themselves in order to have the <em>baseline</em>
      of their <em>text</em> align along a horizontal line.</p>"
    output: <div class="example-output-div align-items" id="align-items-baseline"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-red"></div></div>
  - is_default: false
    title: 'align-items: stretch;'
    description: "<p>The flexbox items will stretch across the whole <strong>cross
      axis</strong>.</p> <p>By default, the cross axis is vertical. This means the
      flexbox items will fill up the whole vertical space.</p>"
    output: <div class="example-output-div align-items" id="align-items-stretch"><p
      class="square is-plum">1</p><p class="square is-plum">2</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-red"></div></div>
- title: align-self
  is_shorthand: false
  description: "<p>Works like <code>align-items</code>, but applies only to a <strong>single</strong>
    flexbox item, instead of <em>all</em> of them.</p>"
  styles:
  - ".align-self { align-items: center;background: hsl(0, 0%, 95%);display: flex;height:
    200px;justify-content: center;padding: 0; }"
  - '.align-self .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-self
    .square:nth-child(2) { background: #05ffb0;color: #310736; }.align-self .square:nth-child(4)
    { height: 75px; }.align-self .line { left: 2px;position: absolute;right: 2px;
    }.align-self .line.is-default { top: 50%; }.align-self .line.is-default:before
    { content: "Items"; }.align-self .line.is-red:before { content: "Self"; }'
  - "#align-self-flex-start{ align-self:flex-start;}"
  - "#align-self-flex-start .target { align-self: flex-start; }"
  - "#align-self-flex-end{ align-self:flex-end;}"
  - "#align-self-flex-end .line.is-red { bottom: 0; }#align-self-flex-end .target
    { align-self: flex-end; }"
  - "#align-self-center{ align-self:center;}"
  - "#align-self-center{ align-items: flex-start; }"
  - "#align-self-center .line.is-default { top: 0; }#align-self-center .line.is-red
    { top: 50%; }#align-self-center .target { align-self: center; }"
  - "#align-self-baseline{ align-self:baseline;}"
  - "#align-self-baseline .line.is-default { top: 50%; }#align-self-baseline .line.is-red
    { top: 30px; }#align-self-baseline .target { align-self: baseline; }"
  - "#align-self-stretch{ align-self:stretch;}"
  - "#align-self-stretch .line.is-default { top: 50%; }#align-self-stretch .line.is-red
    { display: none; }#align-self-stretch .target { align-self: stretch;height: auto;
    }"
  actions: []
  examples:
  - is_default: false
    title: 'align-self: flex-start;'
    description: "<p>If the container has <code>align-items: center</code> and the
      <strong>target</strong> has <code>align-items: flex-start</code>, only the target
      will be at the start of the cross axis.</p> <p>By default, this means it will
      be aligned <strong>vertically</strong> at the <strong>top</strong>.</p>"
    output: <div class="example-output-div align-self" id="align-self-flex-start"><p
      class="square is-plum">1</p><p class="square target">Target</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-default"></div><div class="line is-red"></div></div>
  - is_default: false
    title: 'align-self: flex-end;'
    description: "<p>If the container has <code>align-items: center</code> and the
      <strong>target</strong> has <code>align-items: flex-end</code>, only the target
      will be at the end of the cross axis.</p> <p>By default, this means it will
      be aligned <strong>vertically</strong> at the <strong>bottom</strong>.</p>"
    output: <div class="example-output-div align-self" id="align-self-flex-end"><p
      class="square is-plum">1</p><p class="square target">Target</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-default"></div><div class="line is-red"></div></div>
  - is_default: false
    title: 'align-self: center;'
    description: "<p>If the container has <code>align-items: flex-start</code> and
      the <strong>target</strong> has <code>align-items: center</code>, only the target
      will be at the center of the cross axis.</p> <p>By default, this means it will
      be <strong>vertically centered</strong>.</p>"
    output: <div class="example-output-div align-self" id="align-self-center"><p
      class="square is-plum">1</p><p class="square target">Target</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-default"></div><div class="line is-red"></div></div>
  - is_default: false
    title: 'align-self: baseline;'
    description: "<p>If the container has <code>align-items: center</code> and the
      <strong>target</strong> has <code>align-items: baseline</code>, only the target
      will be at the baseline of the cross axis.</p> <p>By default, this means it
      will be aligned along the basline of the text.</p>"
    output: <div class="example-output-div align-self" id="align-self-baseline"><p
      class="square is-plum">1</p><p class="square target">Target</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-default"></div><div class="line is-red"></div></div>
  - is_default: false
    title: 'align-self: stretch;'
    description: "<p>If the container has <code>align-items: center</code> and the
      <strong>target</strong> has <code>align-items: stretch</code>, only the target
      will stretch along the whole cross axis.</p>"
    output: <div class="example-output-div align-self" id="align-self-stretch"><p
      class="square is-plum">1</p><p class="square target">Target</p><p class="square
      is-plum">3</p><p class="square is-plum">4</p><p class="square is-plum">5</p><div
      class="line is-default"></div><div class="line is-red"></div></div>
- title: animation-delay
  is_shorthand: false
  description: "<p>Defines how long the animation has to wait before <strong>starting</strong>.
    The animation will only be delayed on its <em>first</em> iteration.</p>"
  styles:
  - ".animation-delay { animation-duration: 5s;animation-iteration-count: infinite;
    }"
  - ".animation-delay.is-animated { animation-name: fadeAndMove; }"
  - "#animation-delay-0s{ animation-delay:0s;}"
  - "#animation-delay-12s{ animation-delay:1.2s;}"
  - "#animation-delay-2400ms{ animation-delay:2400ms;}"
  - "#animation-delay--500ms{ animation-delay:-500ms;}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-delay"></a>
  examples:
  - is_default: true
    title: 'animation-delay: 0s;'
    description: "<p>The animation will wait <strong>zero seconds</strong>, and thus
      start right away.</p>"
    output: <div class="example-output-div animation-delay square is-plum" id="animation-delay-0s">Hello<br>World</div>
  - is_default: false
    title: 'animation-delay: 1.2s;'
    description: "<p>You can use <strong>decimal</strong> values in <strong>seconds</strong>
      with the keyword <code>s</code>.</p>"
    output: <div class="example-output-div animation-delay square is-plum" id="animation-delay-12s">Hello<br>World</div>
  - is_default: false
    title: 'animation-delay: 2400ms;'
    description: "<p>You can use <strong>milliseconds</strong> instead of seconds,
      with the keyword <code>ms</code>.</p>"
    output: <div class="example-output-div animation-delay square is-plum" id="animation-delay-2400ms">Hello<br>World</div>
  - is_default: false
    title: 'animation-delay: -500ms;'
    description: "<p>You can use <strong>negative values</strong>: the animation will
      start as if it had <em>already been playing</em> for <code>500ms</code>.</p>"
    output: <div class="example-output-div animation-delay square is-plum" id="animation-delay--500ms">Hello<br>World</div>
- title: animation-direction
  is_shorthand: false
  description: "<p>Defines in which direction the animation is played.</p>"
  styles:
  - ".animation-direction { animation-duration: 2s;animation-iteration-count: infinite;
    }"
  - ".animation-direction.is-animated { animation-name: fadeAndMove; }"
  - "#animation-direction-normal{ animation-direction:normal;}"
  - "#animation-direction-reverse{ animation-direction:reverse;}"
  - "#animation-direction-alternate{ animation-direction:alternate;}"
  - "#animation-direction-alternate-reverse{ animation-direction:alternate-reverse;}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-direction"></a>
  examples:
  - is_default: true
    title: 'animation-direction: normal;'
    description: "<p>The animation is played <strong>forwards</strong>. When it reaches
      the end, it starts over at the first keyframe.</p>"
    output: <div class="example-output-div animation-direction square is-plum" id="animation-direction-normal">Hello<br>World</div>
  - is_default: false
    title: 'animation-direction: reverse;'
    description: "<p>The animation is played <strong>backwards</strong>: begins at
      the last keyframe, finishes at the first keyframe.</p>"
    output: <div class="example-output-div animation-direction square is-plum" id="animation-direction-reverse">Hello<br>World</div>
  - is_default: false
    title: 'animation-direction: alternate;'
    description: "<p>The animation is played <strong>forwards</strong> first, then
      <strong>backwards</strong>:</p> <ul><li>starts at the first keyframe</li><li>stops
      at the last keyframe</li><li>starts again, but at the last keyframe</li><li>stops
      at the first keyframe</li></ul>"
    output: <div class="example-output-div animation-direction square is-plum" id="animation-direction-alternate">Hello<br>World</div>
  - is_default: false
    title: 'animation-direction: alternate-reverse;'
    description: "<p>The animation is played <strong>backwards</strong> first, then
      <strong>forwards</strong>:</p> <ul><li>starts at the last keyframe</li><li>stops
      at the first keyframe</li><li>starts again, but at the first keyframe</li><li>stops
      at the last keyframe</li></ul>"
    output: <div class="example-output-div animation-direction square is-plum" id="animation-direction-alternate-reverse">Hello<br>World</div>
- title: animation-duration
  is_shorthand: false
  description: "<p>Defines how long the animation lasts.</p>"
  styles:
  - ".animation-duration { animation-iteration-count: infinite; }"
  - ".animation-duration.is-animated { animation-name: fadeAndMove; }"
  - "#animation-duration-0s{ animation-duration:0s;}"
  - "#animation-duration-12s{ animation-duration:1.2s;}"
  - "#animation-duration-2400ms{ animation-duration:2400ms;}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-duration"></a>
  examples:
  - is_default: true
    title: 'animation-duration: 0s;'
    description: "<p>The default value is <strong>zero seconds</strong>: the animation
      will simply not play.</p>"
    output: <div class="example-output-div animation-duration square is-plum" id="animation-duration-0s">Hello<br>World</div>
  - is_default: false
    title: 'animation-duration: 1.2s;'
    description: "<p>You can use <strong>decimal</strong> values in <strong>seconds</strong>
      with the keyword <code>s</code>.</p>"
    output: <div class="example-output-div animation-duration square is-plum" id="animation-duration-12s">Hello<br>World</div>
  - is_default: false
    title: 'animation-duration: 2400ms;'
    description: "<p>You can use <strong>milliseconds</strong> instead of seconds,
      with the keyword <code>ms</code>.</p>"
    output: <div class="example-output-div animation-duration square is-plum" id="animation-duration-2400ms">Hello<br>World</div>
- title: animation-fill-mode
  is_shorthand: false
  description: "<p>Defines what happens <strong>before</strong> an animation starts
    and <strong>after</strong> it ends. The fill mode allows to tell the browser if
    the animation’s styles should also be applied <em>outside</em> of the animation.</p>"
  styles:
  - ".animation-fill-mode { animation-delay: 1s;animation-duration: 2s;animation-iteration-count:
    1;animation-name: kf-animation-fill-mode;animation-play-state: paused; }"
  - ".animation-fill-mode.is-animated { animation-play-state: running; }"
  - "#animation-fill-mode-none{ animation-fill-mode:none;}"
  - "#animation-fill-mode-forwards{ animation-fill-mode:forwards;}"
  - "#animation-fill-mode-backwards{ animation-fill-mode:backwards;}"
  - "#animation-fill-mode-both{ animation-fill-mode:both;}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-fill-mode"></a>
  examples:
  - is_default: true
    title: 'animation-fill-mode: none;'
    description: "<p>The <em>animation</em> styles do not affect the <em>default</em>
      style: the element is set to its default state before the animation starts,
      and returns to that default state after the animation ends.</p>"
    output: <div class="example-output-div animation-fill-mode square is-pink" id="animation-fill-mode-none">Hello<br>World</div>
  - is_default: false
    title: 'animation-fill-mode: forwards;'
    description: "<p>The last styles applied at the end of the animation are retained
      <em>afterwards</em>.</p>"
    output: <div class="example-output-div animation-fill-mode square is-pink" id="animation-fill-mode-forwards">Hello<br>World</div>
  - is_default: false
    title: 'animation-fill-mode: backwards;'
    description: "<p>The animation's styles will already be applied <em>before</em>
      the animation actually starts.</p>"
    output: <div class="example-output-div animation-fill-mode square is-pink" id="animation-fill-mode-backwards">Hello<br>World</div>
  - is_default: false
    title: 'animation-fill-mode: both;'
    description: "<p>The styles are applied <em>before</em> and <em>after</em> the
      animation plays.</p>"
    output: <div class="example-output-div animation-fill-mode square is-pink" id="animation-fill-mode-both">Hello<br>World</div>
- title: animation-iteration-count
  is_shorthand: false
  description: "<p>Defines how many times the animation is played.</p>"
  styles:
  - ".animation-iteration-count { animation-duration: 2s; }"
  - ".animation-iteration-count.is-animated { animation-name: fadeAndMove; }"
  - "#animation-iteration-count-1{ animation-iteration-count:1;}"
  - "#animation-iteration-count-2{ animation-iteration-count:2;}"
  - "#animation-iteration-count-infinite{ animation-iteration-count:infinite;}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-iteration-count"></a>
  examples:
  - is_default: true
    title: 'animation-iteration-count: 1;'
    description: "<p>The animation will only play <strong>once</strong>.</p>"
    output: <div class="example-output-div animation-iteration-count square is-plum"
      id="animation-iteration-count-1">Hello<br>World</div>
  - is_default: false
    title: 'animation-iteration-count: 2;'
    description: "<p>You can use <strong>integer values</strong> to define a <em>specific</em>
      amount of times the animation will play.</p>"
    output: <div class="example-output-div animation-iteration-count square is-plum"
      id="animation-iteration-count-2">Hello<br>World</div>
  - is_default: false
    title: 'animation-iteration-count: infinite;'
    description: "<p>By using the keyword <code>infinite</code>, the animation will
      play indefinitely.</p>"
    output: <div class="example-output-div animation-iteration-count square is-plum"
      id="animation-iteration-count-infinite">Hello<br>World</div>
- title: animation-name
  is_shorthand: false
  description: "<p>Defines <em>which</em> animation keyframes to use.</p>"
  styles:
  - ".animation-name { animation-iteration-count: infinite; }"
  - ".animation-name.is-animated { animation-duration: 2s; }"
  - "#animation-name-none{ animation-name:none;}"
  - "#animation-name-fadein{ animation-name:fadeIn;}"
  - "#animation-name-moveright{ animation-name:moveRight;}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-name"></a>
  examples:
  - is_default: true
    title: 'animation-name: none;'
    description: "<p>If no animation name is specified, no animation is played.</p>"
    output: <div class="example-output-div animation-name square is-plum" id="animation-name-none">Hello<br>World</div>
  - is_default: false
    title: 'animation-name: fadeIn;'
    description: "<p>If a name is specified, the <strong>keyframes</strong> matching
      that name will be used.</p> <p>For example, the <code>fadeIn</code> animation
      looks like this:</p> <p></p><pre>@keyframes fadeIn { from { opacity: 0; } to
      { opacity: 1; } }</pre><p></p>"
    output: <div class="example-output-div animation-name square is-plum" id="animation-name-fadein">Hello<br>World</div>
  - is_default: false
    title: 'animation-name: moveRight;'
    description: "<p>Another example: the <code>moveRight</code> animation:</p> <p></p><pre>@keyframes
      moveRight { from { transform: translateX(0); } to { transform: translateX(100px);
      } }</pre><p></p>"
    output: <div class="example-output-div animation-name square is-plum" id="animation-name-moveright">Hello<br>World</div>
- title: animation-play-state
  is_shorthand: false
  description: "<p>Defines if an animation is playing or not.</p>"
  styles:
  - ".animation-play-state { animation-duration: 2s;animation-iteration-count: infinite;
    }"
  - ".animation-play-state.is-animated { animation-name: fadeAndMove; }"
  - "#animation-play-state-running{ animation-play-state:running;}"
  - "#animation-play-state-paused{ animation-play-state:paused;}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-play-state"></a>
  examples:
  - is_default: true
    title: 'animation-play-state: running;'
    description: "<p>If the <code>animation-duration</code> and <code>animation-name</code>
      are defined, the animation will start playing automatically.</p>"
    output: <div class="example-output-div animation-play-state square is-plum" id="animation-play-state-running">Hello<br>World</div>
  - is_default: false
    title: 'animation-play-state: paused;'
    description: '<p>The animation is set paused at the <strong>first keyframe</strong>.</p>
      <p>This is different than having either no <code>animation-duration</code> or
      <code>animation-name</code> at all. If the animation is paused, the style applied
      is that of the <em>first</em> keyframe, and <strong>not</strong> the default
      style.</p> <p>In this example, the square is visible by default, but the on
      the first keyframe of <code>fadeAndMove</code>, the <code>opacity</code> is
      set to <code>0</code>. When paused, the animation will be "stuck" on this first
      keyframe, and will thus be invisible.</p> <p></p><pre>@keyframes fadeAndMove
      { from { opacity: 0; transform: translateX(0); } to { opacity: 0; transform:
      translateX(100px); } }</pre><p></p>'
    output: <div class="example-output-div animation-play-state square is-plum" id="animation-play-state-paused">Hello<br>World</div>
- title: animation-timing-function
  is_shorthand: false
  description: "<p>Defines how the values between the <em>start</em> and the <em>end</em>
    of the animation are calculated.</p>"
  styles:
  - ".animation-timing-function { animation-duration: 3s;animation-fill-mode: forwards;
    }"
  - ".animation-timing-function.is-animated { animation-name: moveRight; }"
  - "#animation-timing-function-ease{ animation-timing-function:ease;}"
  - "#animation-timing-function-ease-in{ animation-timing-function:ease-in;}"
  - "#animation-timing-function-ease-out{ animation-timing-function:ease-out;}"
  - "#animation-timing-function-ease-in-out{ animation-timing-function:ease-in-out;}"
  - "#animation-timing-function-linear{ animation-timing-function:linear;}"
  - "#animation-timing-function-step-start{ animation-timing-function:step-start;}"
  - "#animation-timing-function-step-end{ animation-timing-function:step-end;}"
  - "#animation-timing-function-steps4-end{ animation-timing-function:steps(4, end);}"
  actions:
  - <a class="button property-animation-toggle" data-property-name="animation-timing-function"></a>
  examples:
  - is_default: true
    title: 'animation-timing-function: ease;'
    description: "<p>The animation starts slowly, accelerates in the middle, and slows
      down at the end.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-ease">Hello<br>World</div>
  - is_default: false
    title: 'animation-timing-function: ease-in;'
    description: "<p>The animation starts slowly, and accelerates gradually until
      the end.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-ease-in">Hello<br>World</div>
  - is_default: false
    title: 'animation-timing-function: ease-out;'
    description: "<p>The animation starts quickly, and decelerates gradually until
      the end.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-ease-out">Hello<br>World</div>
  - is_default: false
    title: 'animation-timing-function: ease-in-out;'
    description: "<p>Like <code>ease</code>, but more pronounced.</p> <p>The animation
      starts quickly, and decelerates gradually until the end.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-ease-in-out">Hello<br>World</div>
  - is_default: false
    title: 'animation-timing-function: linear;'
    description: "<p>The animation has a <em>*constant speed</em>.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-linear">Hello<br>World</div>
  - is_default: false
    title: 'animation-timing-function: step-start;'
    description: "<p>The animation jumps <em>instantly</em> to the <strong>final state</strong>.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-step-start">Hello<br>World</div>
  - is_default: false
    title: 'animation-timing-function: step-end;'
    description: "<p>The animation stays at the <strong>initial state</strong> until
      the end, when it <em>instantly</em> jumps to the <strong>final state</strong>.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-step-end">Hello<br>World</div>
  - is_default: false
    title: 'animation-timing-function: steps(4, end);'
    description: "<p>By using <code>steps()</code> with an <strong>integer</strong>,
      you can define a specific <em>number</em> of steps before reaching the end.
      The state of the element will <em>not</em> vary gradually, but rather <strong>jump</strong>
      from state to state in separate instants.</p>"
    output: <div class="example-output-div animation-timing-function square is-plum"
      id="animation-timing-function-steps4-end">Hello<br>World</div>
- title: animation
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#animation-name"
    data-property-name="animation-name">animation-name</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#animation-duration" data-property-name="animation-duration">animation-duration</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#animation-timing-function"
    data-property-name="animation-timing-function">animation-timing-function</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#animation-delay"
    data-property-name="animation-delay">animation-delay</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#animation-iteration-count" data-property-name="animation-iteration-count">animation-iteration-count</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#animation-direction"
    data-property-name="animation-direction">animation-direction</a></code> <code
    class="shorthand"><a class="hash" href="http://localhost:4000/#animation-fill-mode"
    data-property-name="animation-fill-mode">animation-fill-mode</a></code> and <code
    class="shorthand"><a class="hash" href="http://localhost:4000/#animation-play-state"
    data-property-name="animation-play-state">animation-play-state</a></code>.</p>
    <p>Only <code>animation-duration</code> and <code>animation-name</code> are <strong>required</strong>.</p>
  styles: []
  actions: []
  examples: []
- title: background-attachment
  is_shorthand: false
  description: "<p>Defines <em>how</em> the background image will behave when scrolling
    the page.</p>"
  styles:
  - ".background-attachment { background-image: url(/images/landscape.jpg);background-position:
    center center;background-size: cover;height: 200px; }"
  - ".background-attachment p { background: white;padding: 0.8em 1em; }"
  - "#background-attachment-scroll{ background-attachment:scroll;}"
  - "#background-attachment-fixed{ background-attachment:fixed;}"
  actions: []
  examples:
  - is_default: true
    title: 'background-attachment: scroll;'
    description: "<p>The background image will scroll with the page. It will also
      position and resize itself according to the element it's applied to.</p>"
    output: <div class="example-output-div background-attachment" id="background-attachment-scroll"><p>Hello
      world</p></div>
  - is_default: false
    title: 'background-attachment: fixed;'
    description: "<p>The background image will <em>not</em> scroll with the page,
      and remain positioned according to the viewport. It will also position and resize
      itself according to the viewport. As a result, the background image will probably
      only be partially visible.</p>"
    output: <div class="example-output-div background-attachment" id="background-attachment-fixed"><p>Hello
      world</p></div>
- title: background-clip
  is_shorthand: false
  description: "<p>Defines how far the background should <strong>extend</strong> within
    the element.</p>"
  styles:
  - ".background-clip { background: #05ffb0;border: 4px dashed;padding: 2em; }"
  - "#background-clip-border-box{ background-clip:border-box;}"
  - "#background-clip-padding-box{ background-clip:padding-box;}"
  - "#background-clip-content-box{ background-clip:content-box;}"
  actions: []
  examples:
  - is_default: true
    title: 'background-clip: border-box;'
    description: "<p>The background extends completely throughout the element, even
      <strong>under</strong> the border.</p>"
    output: <div class="example-output-div background-clip" id="background-clip-border-box">Hello
      world</div>
  - is_default: false
    title: 'background-clip: padding-box;'
    description: "<p>The background only extends to the <em>edge</em> of the border:
      it includes the padding but <em>not</em> the border.</p>"
    output: <div class="example-output-div background-clip" id="background-clip-padding-box">Hello
      world</div>
  - is_default: false
    title: 'background-clip: content-box;'
    description: "<p>The background only extends to the edge of the <em>content</em>:
      it doesn't include the padding, nor the border.</p>"
    output: <div class="example-output-div background-clip" id="background-clip-content-box">Hello
      world</div>
- title: background-color
  is_shorthand: false
  description: "<p>Defines the color of the element's background.</p>"
  styles:
  - "#background-color-transparent{ background-color:transparent;}"
  - "#background-color-red{ background-color:red;}"
  - "#background-color-05ffb0{ background-color:#05ffb0;}"
  - "#background-color-rgb50-115-220{ background-color:rgb(50, 115, 220);}"
  - "#background-color-rgba50-115-220-03{ background-color:rgba(50, 115, 220, 0.3);}"
  - "#background-color-hsl14-100-53{ background-color:hsl(14, 100%, 53%);}"
  - "#background-color-hsla14-100-53-06{ background-color:hsla(14, 100%, 53%, 0.6);}"
  actions: []
  examples:
  - is_default: true
    title: 'background-color: transparent;'
    description: "<p>By default, the background color is <strong>transparent</strong>,
      basically meaning that there is <strong>no</strong> background color.</p>"
    output: <div class="example-output-div background-color" id="background-color-transparent">Hello
      World</div>
  - is_default: false
    title: 'background-color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div background-color" id="background-color-red">Hello
      World</div>
  - is_default: false
    title: 'background-color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes.</p>"
    output: <div class="example-output-div background-color" id="background-color-05ffb0">Hello
      World</div>
  - is_default: false
    title: 'background-color: rgb(50, 115, 220);'
    description: "<p>You can use <strong>rgb()</strong> color codes:</p> <ul><li>the
      first value is for <code>red</code></li><li>the second value is for <code>green</code></li><li>the
      third value is for <code>blue</code></li></ul><p>Each of them can have a value
      between <strong>0</strong> and <strong>255</strong>.</p>"
    output: <div class="example-output-div background-color" id="background-color-rgb50-115-220">Hello
      World</div>
  - is_default: false
    title: 'background-color: rgba(50, 115, 220, 0.3);'
    description: "<p>You can use <strong>rgba()</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>rgb</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div background-color" id="background-color-rgba50-115-220-03">Hello
      World</div>
  - is_default: false
    title: 'background-color: hsl(14, 100%, 53%);'
    description: "<p>You can use <strong>hsl()</strong> color codes:</p> <ul><li>the
      first value is for <code>hue</code> and can go from <strong>0</strong> to <strong>359</strong></li><li>the
      second value is for <code>saturation</code> and go from <strong>0%</strong>
      to <strong>100%</strong></li><li>the third value is for <code>luminosity</code>
      and go from <strong>0%</strong> to <strong>100%</strong></li></ul>"
    output: <div class="example-output-div background-color" id="background-color-hsl14-100-53">Hello
      World</div>
  - is_default: false
    title: 'background-color: hsla(14, 100%, 53%, 0.6);'
    description: "<p>You can use <strong>hsl()a</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>hsl</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div background-color" id="background-color-hsla14-100-53-06">Hello
      World</div>
- title: background-image
  is_shorthand: false
  description: "<p>Defines an image as the background of the element.</p>"
  styles:
  - ".background-image { background-repeat: no-repeat;height: 200px; }"
  - "#background-image-none{ background-image:none;}"
  - "#background-image-urlimagesjtpng{ background-image:url(/images/jt.png);}"
  - "#background-image-urlimagesjtpng{ background-size: 64px 64px; }"
  - "#background-image-linear-gradientred-blue{ background-image:linear-gradient(red,
    blue);}"
  - "#background-image-linear-gradient45deg-red-blue{ background-image:linear-gradient(45deg,
    red, blue);}"
  - "#background-image-radial-gradientgreen-purple{ background-image:radial-gradient(green,
    purple);}"
  - "#background-image-radial-gradientcircle-green-purple{ background-image:radial-gradient(circle,
    green, purple);}"
  - "#background-image-radial-gradientcircle-green-0-purple-20-orange-100{ background-image:radial-gradient(circle,
    green 0%, purple 20%, orange 100%);}"
  - "#background-image-radial-gradientcircle-closest-side-green-0-purple-20-orange-100{
    background-image:radial-gradient(circle closest-side, green 0%, purple 20%, orange
    100%);}"
  - "#background-image-radial-gradientcircle-closest-side-at-45px-45px-green-0-purple-20-orange-100{
    background-image:radial-gradient(circle closest-side at 45px 45px, green 0%, purple
    20%, orange 100%);}"
  actions: []
  examples:
  - is_default: true
    title: 'background-image: none;'
    description: "<p>Removes any background image.</p>"
    output: <div class="example-output-div background-image" id="background-image-none">Hello
      world</div>
  - is_default: false
    title: 'background-image: url(/images/jt.png);'
    description: "<p>Uses the image defined in the <strong>url</strong> path. This
      path can either be <em>relative</em> (to the css file) or <em>absolute</em>
      (like <code>http://cssreference.io/images/jt.png</code>).</p>"
    output: <div class="example-output-div background-image" id="background-image-urlimagesjtpng">Hello
      world</div>
  - is_default: false
    title: 'background-image: linear-gradient(red, blue);'
    description: "<p>You can define a <strong>linear gradient</strong> as the background
      image.</p> <p>You need to define at least <strong>two colors</strong>. The first
      one will start at the top, the second one at the bottom.</p> <p>The default
      angle is <code>to bottom</code> (or <code>180deg</code>), which means the gradient
      is <strong>vertical</strong>, starting at the top, ending at the bottom of the
      element.</p>"
    output: <div class="example-output-div background-image" id="background-image-linear-gradientred-blue">Hello
      world</div>
  - is_default: false
    title: 'background-image: linear-gradient(45deg, red, blue);'
    description: "<p>You can specify an <strong>angle</strong>, either in <strong>degrees</strong>,
      or with keywords.</p> <p>When using degress, you specify the <em>direction</em>
      of the gradient, or when it ends. So <code>0deg</code> means the the <strong>top</strong>
      of the element, like 12:00 on a clock.</p> <p>In this example, <code>45deg</code>
      means 2:30, or the top right corner.</p>"
    output: <div class="example-output-div background-image" id="background-image-linear-gradient45deg-red-blue">Hello
      world</div>
  - is_default: false
    title: 'background-image: radial-gradient(green, purple);'
    description: "<p>You can define a <strong>radial gradient</strong> as the background
      image.</p> <p>You need to define at least <strong>two colors</strong>. The first
      one will be at the center, the second one at the edges.</p>"
    output: <div class="example-output-div background-image" id="background-image-radial-gradientgreen-purple">Hello
      world</div>
  - is_default: false
    title: 'background-image: radial-gradient(circle, green, purple);'
    description: "<p>You can specify the <strong>shape</strong> of the radial gradient:
      <strong>circle</strong> or <strong>ellipse</strong> (default).</p>"
    output: <div class="example-output-div background-image" id="background-image-radial-gradientcircle-green-purple">Hello
      world</div>
  - is_default: false
    title: 'background-image: radial-gradient(circle, green 0%, purple 20%, orange
      100%);'
    description: "<p>You can specify <strong>color stops</strong> using percentage
      values.</p>"
    output: <div class="example-output-div background-image" id="background-image-radial-gradientcircle-green-0-purple-20-orange-100">Hello
      world</div>
  - is_default: false
    title: 'background-image: radial-gradient(circle closest-side, green 0%, purple
      20%, orange 100%);'
    description: "<p>You can specify <em>where</em> the gradient should <strong>end</strong>:</p>
      <ul><li><code>closest-side</code></li><li><code>closest-corner</code></li><li><code>farthest-side</code></li><li><code>farthest-corner</code></li></ul>"
    output: <div class="example-output-div background-image" id="background-image-radial-gradientcircle-closest-side-green-0-purple-20-orange-100">Hello
      world</div>
  - is_default: false
    title: 'background-image: radial-gradient(circle closest-side at 45px 45px, green
      0%, purple 20%, orange 100%);'
    description: <p>Like with the <a href="http://cssreference.io/#background-position"><code>background-position</code></a>,
      you can specify the <strong>position</strong> of the gradient.</p>
    output: <div class="example-output-div background-image" id="background-image-radial-gradientcircle-closest-side-at-45px-45px-green-0-purple-20-orange-100">Hello
      world</div>
- title: background-origin
  is_shorthand: false
  description: "<p>Defines the origin of the background image.</p>"
  styles:
  - ".background-origin { background-image: url(/images/jt.png);background-repeat:
    no-repeat;background-size: 64px 64px;border: 4px dashed;padding: 2em; }"
  - ".background-origin p { background-color: rgba(5, 255, 176, 0.5);padding: 1em;
    }"
  - "#background-origin-padding-box{ background-origin:padding-box;}"
  - "#background-origin-border-box{ background-origin:border-box;}"
  - "#background-origin-content-box{ background-origin:content-box;}"
  actions: []
  examples:
  - is_default: true
    title: 'background-origin: padding-box;'
    description: "<p>The background image starts at the <em>edge</em> of the border:
      within padding but <em>not</em> the border.</p>"
    output: <div class="example-output-div background-origin" id="background-origin-padding-box"><p>Hello
      world</p></div>
  - is_default: false
    title: 'background-origin: border-box;'
    description: "<p>The background image starts <strong>under</strong> the border.</p>"
    output: <div class="example-output-div background-origin" id="background-origin-border-box"><p>Hello
      world</p></div>
  - is_default: false
    title: 'background-origin: content-box;'
    description: "<p>The background image only starts at the edge of the <em>content</em>:
      it doesn't include the padding, nor the border.</p>"
    output: <div class="example-output-div background-origin" id="background-origin-content-box"><p>Hello
      world</p></div>
- title: background-position
  is_shorthand: false
  description: "<p>Defines the position of the background image.</p>"
  styles:
  - ".background-position { background-image: url(/images/jt.png);background-repeat:
    no-repeat;background-size: 64px 64px;height: 150px; }"
  - "#background-position-0-0{ background-position:0% 0%;}"
  - "#background-position-bottom-right{ background-position:bottom right;}"
  - "#background-position-center-center{ background-position:center center;}"
  actions: []
  examples:
  - is_default: true
    title: 'background-position: 0% 0%;'
    description: "<p>The background image will be positioned at <strong>0%</strong>
      on the horizontal axis and <strong>0%</strong> on the vertical axis, which means
      the top left corner of the element.</p>"
    output: <div class="example-output-div background-position" id="background-position-0-0">Hello
      world</div>
  - is_default: false
    title: 'background-position: bottom right;'
    description: "<p>You can use a combination of <strong>position keywords</strong>:
      <code>center</code>, <code>top</code>, <code>bottom</code>, <code>left</code>
      and <code>right</code>.</p>"
    output: <div class="example-output-div background-position" id="background-position-bottom-right">Hello
      world</div>
  - is_default: false
    title: 'background-position: center center;'
    description: "<p>The background image will be positioned in the center of the
      element.</p>"
    output: <div class="example-output-div background-position" id="background-position-center-center">Hello
      world</div>
- title: background-repeat
  is_shorthand: false
  description: "<p>Defines how the background image repeats itself across the element's
    background, starting from the background position.</p>"
  styles:
  - ".background-repeat { background-image: url(/images/jt.png);background-size: 64px
    64px;height: 150px; }"
  - "#background-repeat-repeat{ background-repeat:repeat;}"
  - "#background-repeat-repeat-x{ background-repeat:repeat-x;}"
  - "#background-repeat-repeat-y{ background-repeat:repeat-y;}"
  - "#background-repeat-no-repeat{ background-repeat:no-repeat;}"
  actions: []
  examples:
  - is_default: true
    title: 'background-repeat: repeat;'
    description: "<p>The background image will repeat itself both <strong>horizontally</strong>
      and <strong>vertically</strong>.</p>"
    output: <div class="example-output-div background-repeat" id="background-repeat-repeat">Hello
      world</div>
  - is_default: false
    title: 'background-repeat: repeat-x;'
    description: "<p>The background image will only repeat itself <strong>horizontally</strong>.</p>"
    output: <div class="example-output-div background-repeat" id="background-repeat-repeat-x">Hello
      world</div>
  - is_default: false
    title: 'background-repeat: repeat-y;'
    description: "<p>The background image will only repeat itself <strong>vertically</strong>.</p>"
    output: <div class="example-output-div background-repeat" id="background-repeat-repeat-y">Hello
      world</div>
  - is_default: false
    title: 'background-repeat: no-repeat;'
    description: "<p>The background image will only appear <strong>once</strong>.</p>"
    output: <div class="example-output-div background-repeat" id="background-repeat-no-repeat">Hello
      world</div>
- title: background-size
  is_shorthand: false
  description: "<p>Defines the size of the background image.</p>"
  styles:
  - ".background-size { background-image: url(/images/landscape.jpg);background-repeat:
    no-repeat;height: 150px;padding: 0; }"
  - "#background-size-auto-auto{ background-size:auto auto;}"
  - "#background-size-120px-80px{ background-size:120px 80px;}"
  - "#background-size-100-50{ background-size:100% 50%;}"
  - "#background-size-contain{ background-size:contain;}"
  - "#background-size-cover{ background-size:cover;}"
  actions: []
  examples:
  - is_default: true
    title: 'background-size: auto auto;'
    description: "<p>The background image will retain its <strong>original</strong>
      size.</p> <p>For example, this background image is <strong>960px by 640px</strong>
      large. Its aspect ratio is <strong>3 by 2</strong>. It's bigger than its container
      (which is 150px high) and will thus be <strong>clipped</strong>.</p>"
    output: <div class="example-output-div background-size" id="background-size-auto-auto">Hello
      world</div>
  - is_default: false
    title: 'background-size: 120px 80px;'
    description: "<p>You can specify a size in <strong>pixels</strong>:</p> <ul><li>the
      first value is the <strong>horizontal</strong> size</li><li>the second is the
      <strong>vertical</strong> size</li></ul>"
    output: <div class="example-output-div background-size" id="background-size-120px-80px">Hello
      world</div>
  - is_default: false
    title: 'background-size: 100% 50%;'
    description: "<p>You can use <strong>percentage</strong> values as well. Beware
      that this can alter the <strong>aspect ratio</strong> of the background image,
      and lead to unexpected results.</p>"
    output: <div class="example-output-div background-size" id="background-size-100-50">Hello
      world</div>
  - is_default: false
    title: 'background-size: contain;'
    description: "<p>The keyword <code>contain</code> will resize the background image
      to make sure it remains <strong>fully visible</strong>.</p>"
    output: <div class="example-output-div background-size" id="background-size-contain">Hello
      world</div>
  - is_default: false
    title: 'background-size: cover;'
    description: "<p>The keyword <code>cover</code> will resize the background image
      to make sure the element is <strong>fully covered</strong>.</p>"
    output: <div class="example-output-div background-size" id="background-size-cover">Hello
      world</div>
- title: background
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#background-image"
    data-property-name="background-image">background-image</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#background-position" data-property-name="background-position">background-position</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#background-size"
    data-property-name="background-size">background-size</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#background-repeat" data-property-name="background-repeat">background-repeat</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#background-origin"
    data-property-name="background-origin">background-origin</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#background-clip" data-property-name="background-clip">background-clip</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#background-attachment"
    data-property-name="background-attachment">background-attachment</a></code> and
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#background-color"
    data-property-name="background-color">background-color</a></code>.</p>
  styles: []
  actions: []
  examples: []
- title: border-bottom-color
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>,
    but for the <strong>bottom</strong> border only.</p>
  styles:
  - ".border-bottom-color { border-bottom-style: solid;border-bottom-width: 4px; }"
  - "#border-bottom-color-transparent{ border-bottom-color:transparent;}"
  - "#border-bottom-color-red{ border-bottom-color:red;}"
  - "#border-bottom-color-05ffb0{ border-bottom-color:#05ffb0;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-bottom-color: transparent;'
    description: "<p>Applies a <strong>transparent</strong> color to the bottom border.
      The bottom border will still take up the <em>space</em> defined by the <code>border-width</code>
      value.</p>"
    output: <div class="example-output-div border-bottom-color" id="border-bottom-color-transparent">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div border-bottom-color" id="border-bottom-color-red">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>,
      <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>"
    output: <div class="example-output-div border-bottom-color" id="border-bottom-color-05ffb0">Hello
      world</div>
- title: border-bottom-left-radius
  is_shorthand: false
  description: "<p>Defines the <strong>radius</strong> of the bottom left corner.</p>"
  styles:
  - ".border-bottom-left-radius { border-bottom-color: #05ffb0;border-left-color:
    hsl(348, 100%, 61%);border-style: solid;border-width: 4px; }"
  - "#border-bottom-left-radius-0{ border-bottom-left-radius:0;}"
  - "#border-bottom-left-radius-20px{ border-bottom-left-radius:20px;}"
  - "#border-bottom-left-radius-50{ border-bottom-left-radius:50%;}"
  - "#border-bottom-left-radius-20px-50{ border-bottom-left-radius:20px 50%;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-bottom-left-radius: 0;'
    description: "<p>Removes any border radius.</p>"
    output: <div class="example-output-div border-bottom-left-radius" id="border-bottom-left-radius-0">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-left-radius: 20px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-bottom-left-radius" id="border-bottom-left-radius-20px">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-left-radius: 50%;'
    description: "<p>You can use <strong>percentage</strong> values. In this example,
      the radius starts halfway on the <em>bottom</em> border, and ends halfway on
      the <em>left</em> border.</p>"
    output: <div class="example-output-div border-bottom-left-radius" id="border-bottom-left-radius-50">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-left-radius: 20px 50%;'
    description: "<p>If you set <strong>two values</strong>, the first one is for
      the <em>bottom</em> border, the second one for the <em>left</em> border.</p>"
    output: <div class="example-output-div border-bottom-left-radius" id="border-bottom-left-radius-20px-50">Hello
      world</div>
- title: border-bottom-right-radius
  is_shorthand: false
  description: "<p>Defines the <strong>radius</strong> of the bottom right corner.</p>"
  styles:
  - ".border-bottom-right-radius { border-bottom-color: #05ffb0;border-right-color:
    hsl(348, 100%, 61%);border-style: solid;border-width: 4px; }"
  - "#border-bottom-right-radius-0{ border-bottom-right-radius:0;}"
  - "#border-bottom-right-radius-20px{ border-bottom-right-radius:20px;}"
  - "#border-bottom-right-radius-50{ border-bottom-right-radius:50%;}"
  - "#border-bottom-right-radius-20px-50{ border-bottom-right-radius:20px 50%;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-bottom-right-radius: 0;'
    description: "<p>Removes any border radius.</p>"
    output: <div class="example-output-div border-bottom-right-radius" id="border-bottom-right-radius-0">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-right-radius: 20px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-bottom-right-radius" id="border-bottom-right-radius-20px">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-right-radius: 50%;'
    description: "<p>You can use <strong>percentage</strong> values. In this example,
      the radius starts halfway on the <em>bottom</em> border, and ends halfway on
      the <em>right</em> border.</p>"
    output: <div class="example-output-div border-bottom-right-radius" id="border-bottom-right-radius-50">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-right-radius: 20px 50%;'
    description: "<p>If you set <strong>two values</strong>, the first one is for
      the <em>bottom</em> border, the second one for the <em>right</em> border.</p>"
    output: <div class="example-output-div border-bottom-right-radius" id="border-bottom-right-radius-20px-50">Hello
      world</div>
- title: border-bottom-style
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-style">border-style</a></code>,
    but for the <strong>bottom</strong> border only.</p>
  styles:
  - ".border-bottom-style { border-bottom-width: 4px; }"
  - "#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-double{ border-bottom-style:double;}"
  - "#border-bottom-style-groove{ border-bottom-style:groove;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-bottom-style: none;'
    description: "<p>Removes the bottom border.</p>"
    output: <div class="example-output-div border-bottom-style" id="border-bottom-style-none">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-style: dotted;'
    description: "<p>Turns the bottom border into a sequence of dots.</p>"
    output: <div class="example-output-div border-bottom-style" id="border-bottom-style-dotted">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-style: dashed;'
    description: "<p>Turns the bottom border into a sequence of dashes.</p>"
    output: <div class="example-output-div border-bottom-style" id="border-bottom-style-dashed">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-style: solid;'
    description: "<p>Turns the bottom border into a solid line.</p>"
    output: <div class="example-output-div border-bottom-style" id="border-bottom-style-solid">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-style: double;'
    description: "<p>Splits the bottom border into two lines.</p>"
    output: <div class="example-output-div border-bottom-style" id="border-bottom-style-double">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-style: groove;'
    description: "<p>Sets an inset style to the bottom border.</p>"
    output: <div class="example-output-div border-bottom-style" id="border-bottom-style-groove">Hello
      world</div>
- title: border-bottom-width
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>,
    but for the <strong>bottom</strong> border only.</p>
  styles:
  - ".border-bottom-width { border-bottom-style: solid; }"
  - "#border-bottom-width-0{ border-bottom-width:0;}"
  - "#border-bottom-width-4px{ border-bottom-width:4px;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-bottom-width: 0;'
    description: "<p>Removes the bottom border.</p>"
    output: <div class="example-output-div border-bottom-width" id="border-bottom-width-0">Hello
      world</div>
  - is_default: false
    title: 'border-bottom-width: 4px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-bottom-width" id="border-bottom-width-4px">Hello
      world</div>
- title: border-bottom
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-bottom-width"
    data-property-name="border-bottom-width">border-bottom-width</a></code> <code
    class="shorthand"><a class="hash" href="http://localhost:4000/#border-bottom-style"
    data-property-name="border-bottom-style">border-bottom-style</a></code> and <code
    class="shorthand"><a class="hash" href="http://localhost:4000/#border-bottom-color"
    data-property-name="border-bottom-color">border-bottom-color</a></code>.</p>
  styles:
  - "#border-bottom-4px-dotted-red{ border-bottom:4px dotted red;}"
  - "#border-bottom-2px-solid{ border-bottom:2px solid;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-bottom: 4px dotted red;'
    description: "<p>The <strong>order</strong> is important:</p> <ul><li>width</li><li>style</li><li>color</li></ul>"
    output: <div class="example-output-div border-bottom" id="border-bottom-4px-dotted-red">Hello
      world</div>
  - is_default: false
    title: 'border-bottom: 2px solid;'
    description: "<p>Only the <em>color</em> is <strong>optional</strong>. If you
      omit it, the color applied will be the color of the <strong>text</strong>.</p>"
    output: <div class="example-output-div border-bottom" id="border-bottom-2px-solid">Hello
      world</div>
- title: border-collapse
  is_shorthand: false
  description: "<p>Defines whether <strong>table</strong> borders should be separated
    or collapsed.</p>"
  styles:
  - ".border-collapse table { width: 100%; }.border-collapse td { border-bottom: 4px
    solid hsl(348, 100%, 61%);border-left: 4px solid #05ffb0;border-right: 4px solid
    hsl(48, 100%, 67%);border-top: 4px solid hsl(217, 71%, 53%);padding: 0.4em 0.5em;
    }"
  - "#border-collapse-separate{ border-collapse:separate;}"
  - "#border-collapse-separate table { border-collapse: separate; }"
  - "#border-collapse-collapse{ border-collapse:collapse;}"
  - "#border-collapse-collapse table { border-collapse: collapse; }"
  actions: []
  examples:
  - is_default: true
    title: 'border-collapse: separate;'
    description: "<p>Each table <strong>cell</strong> will display its own borders.</p>
      <p>In this example, each cell has a <code>border-width</code> of <strong>4px</strong>.
      As a result, the border between <em>two</em> cells will be <strong>8px</strong>.</p>"
    output: <div class="example-output-div border-collapse" id="border-collapse-separate"><table><tbody><tr><td><strong>Name</strong></td><td><strong>Instrument</strong></td></tr><tr><td>John
      Lennon</td><td>Rhythm Guitar</td></tr><tr><td>Paul McCartney</td><td>Bass</td></tr><tr><td>George
      Harrison</td><td>Lead Guitar</td></tr><tr><td>Ringo Starr</td><td>Drums</td></tr></tbody></table></div>
  - is_default: false
    title: 'border-collapse: collapse;'
    description: '<p>Adjacent table cells will <strong>merge</strong> their borders
      together.</p> <p>The cell that appears <em>first</em> in the code will "win":
      its borders will <em>mask</em> those of the following cells.</p>'
    output: <div class="example-output-div border-collapse" id="border-collapse-collapse"><table><tbody><tr><td><strong>Name</strong></td><td><strong>Instrument</strong></td></tr><tr><td>John
      Lennon</td><td>Rhythm Guitar</td></tr><tr><td>Paul McCartney</td><td>Bass</td></tr><tr><td>George
      Harrison</td><td>Lead Guitar</td></tr><tr><td>Ringo Starr</td><td>Drums</td></tr></tbody></table></div>
- title: border-color
  is_shorthand: false
  description: "<p>Defines the color of the element's borders.</p>"
  styles:
  - ".border-color { border-style: solid;border-width: 4px; }"
  - "#border-color-transparent{ border-color:transparent;}"
  - "#border-color-red{ border-color:red;}"
  - "#border-color-05ffb0{ border-color:#05ffb0;}"
  - "#border-color-rgb50-115-220{ border-color:rgb(50, 115, 220);}"
  - "#border-color-rgba50-115-220-03{ border-color:rgba(50, 115, 220, 0.3);}"
  - "#border-color-hsl14-100-53{ border-color:hsl(14, 100%, 53%);}"
  - "#border-color-hsla14-100-53-06{ border-color:hsla(14, 100%, 53%, 0.6);}"
  actions: []
  examples:
  - is_default: true
    title: 'border-color: transparent;'
    description: "<p>Applies a <strong>transparent</strong> color to the borders.
      The borders will still take up the <em>space</em> defined by the <code>border-width</code>
      value.</p>"
    output: <div class="example-output-div border-color" id="border-color-transparent">Hello
      world</div>
  - is_default: false
    title: 'border-color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div border-color" id="border-color-red">Hello
      world</div>
  - is_default: false
    title: 'border-color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes.</p>"
    output: <div class="example-output-div border-color" id="border-color-05ffb0">Hello
      world</div>
  - is_default: false
    title: 'border-color: rgb(50, 115, 220);'
    description: "<p>You can use <strong>rgb()</strong> color codes:</p> <ul><li>the
      first value is for <code>red</code></li><li>the second value is for <code>green</code></li><li>the
      third value is for <code>blue</code></li></ul><p>Each of them can have a value
      between <strong>0</strong> and <strong>255</strong>.</p>"
    output: <div class="example-output-div border-color" id="border-color-rgb50-115-220">Hello
      world</div>
  - is_default: false
    title: 'border-color: rgba(50, 115, 220, 0.3);'
    description: "<p>You can use <strong>rgba()</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>rgb</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div border-color" id="border-color-rgba50-115-220-03">Hello
      world</div>
  - is_default: false
    title: 'border-color: hsl(14, 100%, 53%);'
    description: "<p>You can use <strong>hsl()</strong> color codes:</p> <ul><li>the
      first value is for <code>hue</code> and can go from <strong>0</strong> to <strong>359</strong></li><li>the
      second value is for <code>saturation</code> and go from <strong>0%</strong>
      to <strong>100%</strong></li><li>the third value is for <code>luminosity</code>
      and go from <strong>0%</strong> to <strong>100%</strong></li></ul>"
    output: <div class="example-output-div border-color" id="border-color-hsl14-100-53">Hello
      world</div>
  - is_default: false
    title: 'border-color: hsla(14, 100%, 53%, 0.6);'
    description: "<p>You can use <strong>hsl()a</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>hsl</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div border-color" id="border-color-hsla14-100-53-06">Hello
      world</div>
- title: border-left-color
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>,
    but for the <strong>left</strong> border only.</p>
  styles:
  - ".border-left-color { border-left-style: solid;border-left-width: 4px; }"
  - "#border-left-color-transparent{ border-left-color:transparent;}"
  - "#border-left-color-red{ border-left-color:red;}"
  - "#border-left-color-05ffb0{ border-left-color:#05ffb0;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-left-color: transparent;'
    description: "<p>Applies a <strong>transparent</strong> color to the left border.
      The left border will still take up the <em>space</em> defined by the <code>border-width</code>
      value.</p>"
    output: <div class="example-output-div border-left-color" id="border-left-color-transparent">Hello
      world</div>
  - is_default: false
    title: 'border-left-color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div border-left-color" id="border-left-color-red">Hello
      world</div>
  - is_default: false
    title: 'border-left-color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>,
      <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>"
    output: <div class="example-output-div border-left-color" id="border-left-color-05ffb0">Hello
      world</div>
- title: border-left-style
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-style">border-style</a></code>,
    but for the <strong>left</strong> border only.</p>
  styles:
  - ".border-left-style { border-left-width: 4px; }"
  - "#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-double{ border-left-style:double;}"
  - "#border-left-style-groove{ border-left-style:groove;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-left-style: none;'
    description: "<p>Removes the left border.</p>"
    output: <div class="example-output-div border-left-style" id="border-left-style-none">Hello
      world</div>
  - is_default: false
    title: 'border-left-style: dotted;'
    description: "<p>Turns the left border into a sequence of dots.</p>"
    output: <div class="example-output-div border-left-style" id="border-left-style-dotted">Hello
      world</div>
  - is_default: false
    title: 'border-left-style: dashed;'
    description: "<p>Turns the left border into a sequence of dashes.</p>"
    output: <div class="example-output-div border-left-style" id="border-left-style-dashed">Hello
      world</div>
  - is_default: false
    title: 'border-left-style: solid;'
    description: "<p>Turns the left border into a solid line.</p>"
    output: <div class="example-output-div border-left-style" id="border-left-style-solid">Hello
      world</div>
  - is_default: false
    title: 'border-left-style: double;'
    description: "<p>Splits the left border into two lines.</p>"
    output: <div class="example-output-div border-left-style" id="border-left-style-double">Hello
      world</div>
  - is_default: false
    title: 'border-left-style: groove;'
    description: "<p>Sets an inset style to the left border.</p>"
    output: <div class="example-output-div border-left-style" id="border-left-style-groove">Hello
      world</div>
- title: border-left-width
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>,
    but for the <strong>left</strong> border only.</p>
  styles:
  - ".border-left-width { border-left-style: solid; }"
  - "#border-left-width-0{ border-left-width:0;}"
  - "#border-left-width-4px{ border-left-width:4px;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-left-width: 0;'
    description: "<p>Removes the left border.</p>"
    output: <div class="example-output-div border-left-width" id="border-left-width-0">Hello
      world</div>
  - is_default: false
    title: 'border-left-width: 4px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-left-width" id="border-left-width-4px">Hello
      world</div>
- title: border-left
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-left-width"
    data-property-name="border-left-width">border-left-width</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#border-left-style" data-property-name="border-left-style">border-left-style</a></code>
    and <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-left-color"
    data-property-name="border-left-color">border-left-color</a></code>.</p>
  styles:
  - "#border-left-4px-dotted-red{ border-left:4px dotted red;}"
  - "#border-left-2px-solid{ border-left:2px solid;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-left: 4px dotted red;'
    description: "<p>The <strong>order</strong> is important:</p> <ul><li>width</li><li>style</li><li>color</li></ul>"
    output: <div class="example-output-div border-left" id="border-left-4px-dotted-red">Hello
      world</div>
  - is_default: false
    title: 'border-left: 2px solid;'
    description: "<p>Only the <em>color</em> is <strong>optional</strong>. If you
      omit it, the color applied will be the color of the <strong>text</strong>.</p>"
    output: <div class="example-output-div border-left" id="border-left-2px-solid">Hello
      world</div>
- title: border-radius
  is_shorthand: false
  description: "<p>Defines the <strong>radius</strong> of the element's corners.</p>"
  styles:
  - ".border-radius { border: 4px solid #05ffb0; }"
  - "#border-radius-0{ border-radius:0;}"
  - "#border-radius-20px{ border-radius:20px;}"
  - "#border-radius-50{ border-radius:50%;}"
  - "#border-radius-20px-50{ border-radius:20px 50%;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-radius: 0;'
    description: "<p>Removes any border radius.</p>"
    output: <div class="example-output-div border-radius" id="border-radius-0">Hello
      world</div>
  - is_default: false
    title: 'border-radius: 20px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-radius" id="border-radius-20px">Hello
      world</div>
  - is_default: false
    title: 'border-radius: 50%;'
    description: "<p>You can use <strong>percentage</strong> values. In this example,
      the radius starts halfway through each border.</p>"
    output: <div class="example-output-div border-radius" id="border-radius-50">Hello
      world</div>
  - is_default: false
    title: 'border-radius: 20px 50%;'
    description: "<p>If you set <strong>two values</strong>, the first one is for
      the <em>top</em> and <em>bottom</em> borders, the second one for the <em>left</em>
      and <em>right</em> borders.</p>"
    output: <div class="example-output-div border-radius" id="border-radius-20px-50">Hello
      world</div>
- title: border-right-color
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>,
    but for the <strong>right</strong> border only.</p>
  styles:
  - ".border-right-color { border-right-style: solid;border-right-width: 4px; }"
  - "#border-right-color-transparent{ border-right-color:transparent;}"
  - "#border-right-color-red{ border-right-color:red;}"
  - "#border-right-color-05ffb0{ border-right-color:#05ffb0;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-right-color: transparent;'
    description: "<p>Applies a <strong>transparent</strong> color to the right border.
      The right border will still take up the <em>space</em> defined by the <code>border-width</code>
      value.</p>"
    output: <div class="example-output-div border-right-color" id="border-right-color-transparent">Hello
      world</div>
  - is_default: false
    title: 'border-right-color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div border-right-color" id="border-right-color-red">Hello
      world</div>
  - is_default: false
    title: 'border-right-color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>,
      <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>"
    output: <div class="example-output-div border-right-color" id="border-right-color-05ffb0">Hello
      world</div>
- title: border-right-style
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-style">border-style</a></code>,
    but for the <strong>right</strong> border only.</p>
  styles:
  - ".border-right-style { border-right-width: 4px; }"
  - "#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-double{ border-right-style:double;}"
  - "#border-right-style-groove{ border-right-style:groove;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-right-style: none;'
    description: "<p>Removes the right border.</p>"
    output: <div class="example-output-div border-right-style" id="border-right-style-none">Hello
      world</div>
  - is_default: false
    title: 'border-right-style: dotted;'
    description: "<p>Turns the right border into a sequence of dots.</p>"
    output: <div class="example-output-div border-right-style" id="border-right-style-dotted">Hello
      world</div>
  - is_default: false
    title: 'border-right-style: dashed;'
    description: "<p>Turns the right border into a sequence of dashes.</p>"
    output: <div class="example-output-div border-right-style" id="border-right-style-dashed">Hello
      world</div>
  - is_default: false
    title: 'border-right-style: solid;'
    description: "<p>Turns the right border into a solid line.</p>"
    output: <div class="example-output-div border-right-style" id="border-right-style-solid">Hello
      world</div>
  - is_default: false
    title: 'border-right-style: double;'
    description: "<p>Splits the right border into two lines.</p>"
    output: <div class="example-output-div border-right-style" id="border-right-style-double">Hello
      world</div>
  - is_default: false
    title: 'border-right-style: groove;'
    description: "<p>Sets an inset style to the right border.</p>"
    output: <div class="example-output-div border-right-style" id="border-right-style-groove">Hello
      world</div>
- title: border-right-width
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>,
    but for the <strong>right</strong> border only.</p>
  styles:
  - ".border-right-width { border-right-style: solid; }"
  - "#border-right-width-0{ border-right-width:0;}"
  - "#border-right-width-4px{ border-right-width:4px;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-right-width: 0;'
    description: "<p>Removes the right border.</p>"
    output: <div class="example-output-div border-right-width" id="border-right-width-0">Hello
      world</div>
  - is_default: false
    title: 'border-right-width: 4px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-right-width" id="border-right-width-4px">Hello
      world</div>
- title: border-right
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-right-width"
    data-property-name="border-right-width">border-right-width</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#border-right-style" data-property-name="border-right-style">border-right-style</a></code>
    and <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-right-color"
    data-property-name="border-right-color">border-right-color</a></code>.</p>
  styles:
  - "#border-right-4px-dotted-red{ border-right:4px dotted red;}"
  - "#border-right-2px-solid{ border-right:2px solid;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-right: 4px dotted red;'
    description: "<p>The <strong>order</strong> is important:</p> <ul><li>width</li><li>style</li><li>color</li></ul>"
    output: <div class="example-output-div border-right" id="border-right-4px-dotted-red">Hello
      world</div>
  - is_default: false
    title: 'border-right: 2px solid;'
    description: "<p>Only the <em>color</em> is <strong>optional</strong>. If you
      omit it, the color applied will be the color of the <strong>text</strong>.</p>"
    output: <div class="example-output-div border-right" id="border-right-2px-solid">Hello
      world</div>
- title: border-style
  is_shorthand: false
  description: "<p>Defines the style of the element's borders.</p>"
  styles:
  - ".border-style { padding: 1em;border-width: 4px; }"
  - "#border-style-none{ border-style:none;}"
  - "#border-style-dotted{ border-style:dotted;}"
  - "#border-style-dashed{ border-style:dashed;}"
  - "#border-style-solid{ border-style:solid;}"
  - "#border-style-double{ border-style:double;}"
  - "#border-style-groove{ border-style:groove;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-style: none;'
    description: "<p>Removes the element's borders.</p>"
    output: <div class="example-output-div border-style" id="border-style-none">Hello
      world</div>
  - is_default: false
    title: 'border-style: dotted;'
    description: "<p>Turns the border into a sequence of dots.</p>"
    output: <div class="example-output-div border-style" id="border-style-dotted">Hello
      world</div>
  - is_default: false
    title: 'border-style: dashed;'
    description: "<p>Turns the border into a sequence of dashes.</p>"
    output: <div class="example-output-div border-style" id="border-style-dashed">Hello
      world</div>
  - is_default: false
    title: 'border-style: solid;'
    description: "<p>Turns the border into a solid line.</p>"
    output: <div class="example-output-div border-style" id="border-style-solid">Hello
      world</div>
  - is_default: false
    title: 'border-style: double;'
    description: "<p>Splits the border into two lines.</p>"
    output: <div class="example-output-div border-style" id="border-style-double">Hello
      world</div>
  - is_default: false
    title: 'border-style: groove;'
    description: "<p>Sets an inset style to the borders.</p>"
    output: <div class="example-output-div border-style" id="border-style-groove">Hello
      world</div>
- title: border-top-color
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-color">border-color</a></code>,
    but for the <strong>top</strong> border only.</p>
  styles:
  - ".border-top-color { border-top-style: solid;border-top-width: 4px; }"
  - "#border-top-color-transparent{ border-top-color:transparent;}"
  - "#border-top-color-red{ border-top-color:red;}"
  - "#border-top-color-05ffb0{ border-top-color:#05ffb0;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-top-color: transparent;'
    description: "<p>Applies a <strong>transparent</strong> color to the top border.
      The top border will still take up the <em>space</em> defined by the <code>border-width</code>
      value.</p>"
    output: <div class="example-output-div border-top-color" id="border-top-color-transparent">Hello
      world</div>
  - is_default: false
    title: 'border-top-color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div border-top-color" id="border-top-color-red">Hello
      world</div>
  - is_default: false
    title: 'border-top-color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes, <code>rgb()</code>,
      <code>rgba()</code>, <code>hsl()</code>, <code>hsla()</code>...</p>"
    output: <div class="example-output-div border-top-color" id="border-top-color-05ffb0">Hello
      world</div>
- title: border-top-left-radius
  is_shorthand: false
  description: "<p>Defines the <strong>radius</strong> of the top left corner.</p>"
  styles:
  - ".border-top-left-radius { border-top-color: #05ffb0;border-left-color: hsl(348,
    100%, 61%);border-style: solid;border-width: 4px; }"
  - "#border-top-left-radius-0{ border-top-left-radius:0;}"
  - "#border-top-left-radius-20px{ border-top-left-radius:20px;}"
  - "#border-top-left-radius-50{ border-top-left-radius:50%;}"
  - "#border-top-left-radius-20px-50{ border-top-left-radius:20px 50%;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-top-left-radius: 0;'
    description: "<p>Removes any border radius.</p>"
    output: <div class="example-output-div border-top-left-radius" id="border-top-left-radius-0">Hello
      world</div>
  - is_default: false
    title: 'border-top-left-radius: 20px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-top-left-radius" id="border-top-left-radius-20px">Hello
      world</div>
  - is_default: false
    title: 'border-top-left-radius: 50%;'
    description: "<p>You can use <strong>percentage</strong> values. In this example,
      the radius starts halfway on the <em>top</em> border, and ends halfway on the
      <em>left</em> border.</p>"
    output: <div class="example-output-div border-top-left-radius" id="border-top-left-radius-50">Hello
      world</div>
  - is_default: false
    title: 'border-top-left-radius: 20px 50%;'
    description: "<p>If you set <strong>two values</strong>, the first one is for
      the <em>top</em> border, the second one for the <em>left</em> border.</p>"
    output: <div class="example-output-div border-top-left-radius" id="border-top-left-radius-20px-50">Hello
      world</div>
- title: border-top-right-radius
  is_shorthand: false
  description: "<p>Defines the <strong>radius</strong> of the top right corner.</p>"
  styles:
  - ".border-top-right-radius { border-top-color: #05ffb0;border-right-color: hsl(348,
    100%, 61%);border-style: solid;border-width: 4px; }"
  - "#border-top-right-radius-0{ border-top-right-radius:0;}"
  - "#border-top-right-radius-20px{ border-top-right-radius:20px;}"
  - "#border-top-right-radius-50{ border-top-right-radius:50%;}"
  - "#border-top-right-radius-20px-50{ border-top-right-radius:20px 50%;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-top-right-radius: 0;'
    description: "<p>Removes any border radius.</p>"
    output: <div class="example-output-div border-top-right-radius" id="border-top-right-radius-0">Hello
      world</div>
  - is_default: false
    title: 'border-top-right-radius: 20px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-top-right-radius" id="border-top-right-radius-20px">Hello
      world</div>
  - is_default: false
    title: 'border-top-right-radius: 50%;'
    description: "<p>You can use <strong>percentage</strong> values. In this example,
      the radius starts halfway on the <em>top</em> border, and ends halfway on the
      <em>right</em> border.</p>"
    output: <div class="example-output-div border-top-right-radius" id="border-top-right-radius-50">Hello
      world</div>
  - is_default: false
    title: 'border-top-right-radius: 20px 50%;'
    description: "<p>If you set <strong>two values</strong>, the first one is for
      the <em>top</em> border, the second one for the <em>right</em> border.</p>"
    output: <div class="example-output-div border-top-right-radius" id="border-top-right-radius-20px-50">Hello
      world</div>
- title: border-top-style
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-style">border-style</a></code>,
    but for the <strong>top</strong> border only.</p>
  styles:
  - ".border-top-style { border-top-width: 4px; }"
  - "#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-double{ border-top-style:double;}"
  - "#border-top-style-groove{ border-top-style:groove;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-top-style: none;'
    description: "<p>Removes the top border.</p>"
    output: <div class="example-output-div border-top-style" id="border-top-style-none">Hello
      world</div>
  - is_default: false
    title: 'border-top-style: dotted;'
    description: "<p>Turns the top border into a sequence of dots.</p>"
    output: <div class="example-output-div border-top-style" id="border-top-style-dotted">Hello
      world</div>
  - is_default: false
    title: 'border-top-style: dashed;'
    description: "<p>Turns the top border into a sequence of dashes.</p>"
    output: <div class="example-output-div border-top-style" id="border-top-style-dashed">Hello
      world</div>
  - is_default: false
    title: 'border-top-style: solid;'
    description: "<p>Turns the top border into a solid line.</p>"
    output: <div class="example-output-div border-top-style" id="border-top-style-solid">Hello
      world</div>
  - is_default: false
    title: 'border-top-style: double;'
    description: "<p>Splits the top border into two lines.</p>"
    output: <div class="example-output-div border-top-style" id="border-top-style-double">Hello
      world</div>
  - is_default: false
    title: 'border-top-style: groove;'
    description: "<p>Sets an inset style to the top border.</p>"
    output: <div class="example-output-div border-top-style" id="border-top-style-groove">Hello
      world</div>
- title: border-top-width
  is_shorthand: false
  description: <p>Like <code class="shorthand"><a href="http://cssreference.io/#border-width">border-width</a></code>,
    but for the <strong>top</strong> border only.</p>
  styles:
  - ".border-top-width { border-top-style: solid; }"
  - "#border-top-width-0{ border-top-width:0;}"
  - "#border-top-width-4px{ border-top-width:4px;}"
  actions: []
  examples:
  - is_default: true
    title: 'border-top-width: 0;'
    description: "<p>Removes the top border.</p>"
    output: <div class="example-output-div border-top-width" id="border-top-width-0">Hello
      world</div>
  - is_default: false
    title: 'border-top-width: 4px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div border-top-width" id="border-top-width-4px">Hello
      world</div>
- title: border-top
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-top-width"
    data-property-name="border-top-width">border-top-width</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#border-top-style" data-property-name="border-top-style">border-top-style</a></code>
    and <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-top-color"
    data-property-name="border-top-color">border-top-color</a></code>.</p>
  styles:
  - "#border-top-4px-dotted-red{ border-top:4px dotted red;}"
  - "#border-top-2px-solid{ border-top:2px solid;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-top: 4px dotted red;'
    description: "<p>The <strong>order</strong> is important:</p> <ul><li>width</li><li>style</li><li>color</li></ul>"
    output: <div class="example-output-div border-top" id="border-top-4px-dotted-red">Hello
      world</div>
  - is_default: false
    title: 'border-top: 2px solid;'
    description: "<p>Only the <em>color</em> is <strong>optional</strong>. If you
      omit it, the color applied will be the color of the <strong>text</strong>.</p>"
    output: <div class="example-output-div border-top" id="border-top-2px-solid">Hello
      world</div>
- title: border-width
  is_shorthand: false
  description: "<p>Defines the width of the element's borders.</p>"
  styles:
  - ".border-width { border-style: solid; }"
  - "#border-width-1px{ border-width:1px;}"
  - "#border-width-2px-0{ border-width:2px 0;}"
  actions: []
  examples:
  - is_default: false
    title: 'border-width: 1px;'
    description: "<p>Defines the width of <strong>all</strong> borders to 1px.</p>"
    output: <div class="example-output-div border-width" id="border-width-1px">Hello
      world</div>
  - is_default: false
    title: 'border-width: 2px 0;'
    description: "<p>Defines the top and bottom borders to 2px, the left and right
      to 0.</p>"
    output: <div class="example-output-div border-width" id="border-width-2px-0">Hello
      world</div>
- title: border
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-width"
    data-property-name="border-width">border-width</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#border-style" data-property-name="border-style">border-style</a></code>
    and <code class="shorthand"><a class="hash" href="http://localhost:4000/#border-color"
    data-property-name="border-color">border-color</a></code>.</p>
  styles:
  - "#border-4px-dotted-red{ border:4px dotted red;}"
  - "#border-2px-solid{ border:2px solid;}"
  actions: []
  examples:
  - is_default: false
    title: 'border: 4px dotted red;'
    description: "<p>The <strong>order</strong> is important:</p> <ul><li>width</li><li>style</li><li>color</li></ul>"
    output: <div class="example-output-div border" id="border-4px-dotted-red">Hello
      world</div>
  - is_default: false
    title: 'border: 2px solid;'
    description: "<p>Only the <em>color</em> is <strong>optional</strong>. If you
      omit it, the color applied will be the color of the <strong>text</strong>.</p>"
    output: <div class="example-output-div border" id="border-2px-solid">Hello world</div>
- title: bottom
  is_shorthand: false
  description: "<p>Defines the position of the element according to its <strong>bottom</strong>
    edge.</p>"
  styles:
  - ".bottom { background: #310736;height: 200px;position: relative; }"
  - ".bottom p { color: #fff; }.bottom .natural { width: 200px; }.bottom .actual {
    animation-direction: alternate;animation-duration: 2s;animation-iteration-count:
    infinite;position: absolute;width: 200px; }"
  - "#bottom-auto{ bottom:auto;}"
  - "#bottom-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }"
  - "#bottom-20px{ bottom:20px;}"
  - "#bottom-20px .actual { animation-name: fadeIn;bottom: 20px;position: relative;transform:
    translateY(-100%); }"
  - "#bottom-0{ bottom:0;}"
  - "#bottom-0 .actual { bottom: 0; }"
  actions: []
  examples:
  - is_default: true
    title: 'bottom: auto;'
    description: "<p>The element will remain in its <strong>natural</strong> position.</p>"
    output: <div class="example-output-div bottom" id="bottom-auto"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
  - is_default: false
    title: 'bottom: 20px;'
    description: "<p>If the element is in position <strong>relative</strong>, the
      element will move <em>upwards</em> by the amount defined by the <strong>bottom</strong>
      value.</p>"
    output: <div class="example-output-div bottom" id="bottom-20px"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
  - is_default: false
    title: 'bottom: 0;'
    description: "<p>If the element is in position <strong>absolute</strong>, the
      element will position itself from the <em>bottom</em> of the first positioned
      <strong>ancestor</strong>.</p>"
    output: <div class="example-output-div bottom" id="bottom-0"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
- title: box-shadow
  is_shorthand: false
  description: "<p>Defines the shadow of the element.</p>"
  styles:
  - ".box-shadow { background: #05ffb0;margin: 1em; }"
  - "#box-shadow-none{ box-shadow:none;}"
  - "#box-shadow-2px-6px{ box-shadow:2px 6px;}"
  - "#box-shadow-2px-6px-red{ box-shadow:2px 6px red;}"
  - "#box-shadow-2px-4px-10px-red{ box-shadow:2px 4px 10px red;}"
  - "#box-shadow-2px-4px-10px-4px-red{ box-shadow:2px 4px 10px 4px red;}"
  actions: []
  examples:
  - is_default: true
    title: 'box-shadow: none;'
    description: "<p>Removes any box-shadow that was applied to the element.</p>"
    output: <div class="example-output-div box-shadow" id="box-shadow-none">Hello
      world</div>
  - is_default: false
    title: 'box-shadow: 2px 6px;'
    description: "<p>You need at least <strong>two values</strong>:</p> <ul><li>the
      first is the <em>horizontal</em> offset</li><li>the second is the <em>vertical</em>
      offset</li></ul><p>The shadow color will be inherited from the text color.</p>"
    output: <div class="example-output-div box-shadow" id="box-shadow-2px-6px">Hello
      world</div>
  - is_default: false
    title: 'box-shadow: 2px 6px red;'
    description: <p>You can define a <strong>color</strong> as the <em>last</em> value.</p>
      <p>As with <code class="shorthand"><a href="http://cssreference.io/#color">color</a></code>,
      you can use color names, hexadecimal, rgb, hsl...</p>
    output: <div class="example-output-div box-shadow" id="box-shadow-2px-6px-red">Hello
      world</div>
  - is_default: false
    title: 'box-shadow: 2px 4px 10px red;'
    description: "<p>The optional <strong>third value</strong> defines the <strong>blur</strong>
      of the shadow.</p> <p>The color will be diffused across 10px in this example,
      from opaque to transparent.</p>"
    output: <div class="example-output-div box-shadow" id="box-shadow-2px-4px-10px-red">Hello
      world</div>
  - is_default: false
    title: 'box-shadow: 2px 4px 10px 4px red;'
    description: "<p>The optional <strong>fourth value</strong> defines the <strong>spread</strong>
      of the shadow.</p> <p>The spread defines how much the shadow should <em>grow</em>:
      it enhances the shadow.</p>"
    output: <div class="example-output-div box-shadow" id="box-shadow-2px-4px-10px-4px-red">Hello
      world</div>
- title: box-sizing
  is_shorthand: false
  description: "<p>Defines how the width and height of the element are calculated:
    whether they include the <em>padding</em> and <em>borders</em> or not.</p>"
  styles:
  - '.box-sizing .actual { border: 12px solid #310736;display: block;padding: 30px;position:
    relative;width: 200px; }.box-sizing span { background: hsl(48, 100%, 67%);display:
    block;padding: 5px 0; }.box-sizing .box { height: 23px;position: absolute;text-align:
    left;width: 200px; }.box-sizing .box:before { content: "200px"; }'
  - "#box-sizing-content-box{ box-sizing:content-box;}"
  - "#box-sizing-content-box .actual { box-sizing: content-box; }#box-sizing-content-box
    .box { left: 30px;top: 30px;width: 196px; }"
  - "#box-sizing-border-box{ box-sizing:border-box;}"
  - "#box-sizing-border-box .actual { box-sizing: border-box; }#box-sizing-border-box
    .box { height: 27px;left: -12px;top: 30px; }"
  actions: []
  examples:
  - is_default: true
    title: 'box-sizing: content-box;'
    description: "<p>The <strong>width</strong> and <strong>height</strong> of the
      element only apply to the <strong>content</strong> of the element.</p> <p>For
      example, this element has</p> <ul><li><code>border-width: 12px</code></li><li><code>padding:
      30px</code></li><li><code>width: 200px</code></li></ul><p>The <em>full width</em>
      is 24px + 60px + 200px = <strong>284px</strong>.</p> <p>The content has the
      defined width. The box accomodates for those dimensions.</p>"
    output: <div class="example-output-div box-sizing" id="box-sizing-content-box"><div
      class="actual"><span>Hello world</span><div class="box is-red"></div></div></div>
  - is_default: false
    title: 'box-sizing: border-box;'
    description: "<p>The <strong>width</strong> and <strong>height</strong> of the
      element apply to all parts of the element: the <strong>content</strong>, the
      <strong>padding</strong> and the <strong>borders</strong>.</p> <p>For example,
      this element has</p> <ul><li><code>border-width: 12px</code></li><li><code>padding:
      30px</code></li><li><code>width: 200px</code></li></ul><p>The <em>full width</em>
      is <strong>200px</strong>, no matter what.</p> <p>The box has the defined width.
      The content accomodates for those dimensions, and ends up being 200px - 30px
      - 24px = <strong>146px</strong>.</p>"
    output: <div class="example-output-div box-sizing" id="box-sizing-border-box"><div
      class="actual"><span>Hello world</span><div class="box is-red"></div></div></div>
- title: clear
  is_shorthand: false
  description: "<p>Moves the element after all the preceding floating elements.</p>"
  styles:
  - ".clear .block.is-alpha { float: left;text-align: center; }.clear .block.is-beta
    { float: right;text-align: center; }"
  - "#clear-none{ clear:none;}"
  - "#clear-left{ clear:left;}"
  - "#clear-left .block.is-yellow { clear: left; }"
  - "#clear-right{ clear:right;}"
  - "#clear-right .block.is-yellow { clear: right; }"
  - "#clear-both{ clear:both;}"
  - "#clear-both .block.is-yellow { clear: both; }"
  actions: []
  examples:
  - is_default: false
    title: 'clear: none;'
    description: "<p>The <strong>clear</strong> property is only relevant when used
      with siblings that have a <strong>float</strong> value.</p> <p>The element will
      sit <strong>alongside</strong> any floated element that <em>precedes</em> it.</p>"
    output: <div class="example-output-div clear" id="clear-none"><p class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut.</p><p class="block is-alpha">Float left<br>block</p><p
      class="block is-beta">Float right</p><p class="block is-yellow"><strong>This
      is the clear none block</strong>. It lives alongside its floating siblings.
      It takes up the remaining space left in between.</p><p class="block">Maecenas
      imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque
      interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
      felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'clear: left;'
    description: "<p>The cleared element will move <em>after</em> any left floating
      element that precedes it, but will remain alongside right float elements.</p>"
    output: <div class="example-output-div clear" id="clear-left"><p class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut.</p><p class="block is-alpha">Float left</p><p class="block
      is-beta">Tall<br>float<br>right<br>block</p><p class="block is-yellow"><strong>This
      is the clear left element</strong>. It comes after the clear left, but remains
      alongside the float right.</p><p class="block">Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum
      maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'clear: right;'
    description: "<p>The cleared element will move <em>after</em> any right floating
      element that precedes it, but will remain alongside left float elements.</p>"
    output: <div class="example-output-div clear" id="clear-right"><p class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut.</p><p class="block is-alpha">Tall<br>float<br>left<br>block</p><p
      class="block is-beta">Float right</p><p class="block is-yellow"><strong>This
      is the clear left element</strong>. It comes after the clear right, but remains
      alongside the float left.</p><p class="block">Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum
      maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'clear: both;'
    description: "<p>The cleared element will move <em>after</em> any floating element
      that precedes it. This includes both left floating and right floating elements.</p>"
    output: <div class="example-output-div clear" id="clear-both"><p class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut.</p><p class="block is-alpha">Float left</p><p class="block
      is-beta">Float right</p><p class="block is-yellow"><strong>This is the clear
      both element</strong>. It comes after both floating elements.</p><p class="block">Maecenas
      imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque
      interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
      felis neque sit amet erat.</p></div>
- title: color
  is_shorthand: false
  description: "<p>Defines the color of the <strong>text</strong>.</p>"
  styles:
  - ".color { font-size: 1.5em; }"
  - "#color-transparent{ color:transparent;}"
  - "#color-red{ color:red;}"
  - "#color-05ffb0{ color:#05ffb0;}"
  - "#color-rgb50-115-220{ color:rgb(50, 115, 220);}"
  - "#color-rgba0-0-0-05{ color:rgba(0, 0, 0, 0.5);}"
  - "#color-rgba0-0-0-05{ background: #05ffb0; }"
  - "#color-hsl14-100-53{ color:hsl(14, 100%, 53%);}"
  - "#color-hsla14-100-53-06{ color:hsla(14, 100%, 53%, 0.6);}"
  actions: []
  examples:
  - is_default: false
    title: 'color: transparent;'
    description: "<p>Applies a <strong>transparent</strong> color to the text. The
      text will still take up the <em>space</em> it should.</p>"
    output: <div class="example-output-div color" id="color-transparent">Hello world</div>
  - is_default: false
    title: 'color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div color" id="color-red">Hello world</div>
  - is_default: false
    title: 'color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes.</p>"
    output: <div class="example-output-div color" id="color-05ffb0">Hello world</div>
  - is_default: false
    title: 'color: rgb(50, 115, 220);'
    description: "<p>You can use <strong>rgb()</strong> color codes:</p> <ul><li>the
      first value is for <code>red</code></li><li>the second value is for <code>green</code></li><li>the
      third value is for <code>blue</code></li></ul><p>Each of them can have a value
      between <strong>0</strong> and <strong>255</strong>.</p>"
    output: <div class="example-output-div color" id="color-rgb50-115-220">Hello
      world</div>
  - is_default: false
    title: 'color: rgba(0, 0, 0, 0.5);'
    description: "<p>You can use <strong>rgba()</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>rgb</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div color" id="color-rgba0-0-0-05">Hello world</div>
  - is_default: false
    title: 'color: hsl(14, 100%, 53%);'
    description: "<p>You can use <strong>hsl()</strong> color codes:</p> <ul><li>the
      first value is for <code>hue</code> and can go from <strong>0</strong> to <strong>359</strong></li><li>the
      second value is for <code>saturation</code> and go from <strong>0%</strong>
      to <strong>100%</strong></li><li>the third value is for <code>luminosity</code>
      and go from <strong>0%</strong> to <strong>100%</strong></li></ul>"
    output: <div class="example-output-div color" id="color-hsl14-100-53">Hello world</div>
  - is_default: false
    title: 'color: hsla(14, 100%, 53%, 0.6);'
    description: "<p>You can use <strong>hsl()a</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>hsl</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div color" id="color-hsla14-100-53-06">Hello
      world</div>
- title: column-count
  is_shorthand: false
  description: "<p>Defines the number of columns of the element.</p>"
  styles:
  - "#column-count-auto{ column-count:auto;}"
  - "#column-count-3{ column-count:3;}"
  - "#column-count-3{ -moz-column-count: 3;-webkit-column-count: 3; }"
  actions: []
  examples:
  - is_default: true
    title: 'column-count: auto;'
    description: "<p>Removes any columns from the element (unless another <code>column-</code>
      property was set).</p>"
    output: <div class="example-output-div column-count" id="column-count-auto"><p
      class="block is-alpha">Hello world</p><p class="block is-beta">Foo bar</p><p
      class="block is-pink">CSS Reference</p></div>
  - is_default: false
    title: 'column-count: 3;'
    description: "<p>When using an <strong>integer</strong> value, the element will
      distribute its child elements across the number of columns defined.</p>"
    output: <div class="example-output-div column-count" id="column-count-3"><p class="block
      is-alpha">Hello world</p><p class="block is-beta">Foo bar</p><p class="block
      is-pink">CSS Reference</p></div>
- title: column-gap
  is_shorthand: false
  description: "<p>Defines the gap between the columns of the element.</p>"
  styles:
  - ".column-gap { column-count: 3;-moz-column-count: 3;-webkit-column-count: 3; }"
  - "#column-gap-normal{ column-gap:normal;}"
  - "#column-gap-2px{ column-gap:2px;}"
  - "#column-gap-2px{ -moz-column-gap: 2px;-webkit-column-gap: 2px; }"
  actions: []
  examples:
  - is_default: true
    title: 'column-gap: normal;'
    description: "<p>The gap between the columns is set to the browser's <strong>default</strong>
      value, which usually is <strong>1em</strong>.</p>"
    output: <div class="example-output-div column-gap" id="column-gap-normal"><p
      class="block is-alpha">Hello world</p><p class="block is-beta">Foo bar</p><p
      class="block is-pink">CSS Reference</p></div>
  - is_default: false
    title: 'column-gap: 2px;'
    description: "<p>You can use <strong>pixel</strong> values for the gap.</p> <p>Note
      that the gap only appears <em>between</em> columns, and not on the exterior
      sides of the edge columns.</p>"
    output: <div class="example-output-div column-gap" id="column-gap-2px"><p class="block
      is-alpha">Hello world</p><p class="block is-beta">Foo bar</p><p class="block
      is-pink">CSS Reference</p></div>
- title: column-width
  is_shorthand: false
  description: "<p>Defines the number of columns of the element.</p>"
  styles:
  - "#column-width-auto{ column-width:auto;}"
  - "#column-width-10px{ column-width:10px;}"
  - "#column-width-10px{ -moz-column-width: 10px;-webkit-column-width: 10px; }"
  actions: []
  examples:
  - is_default: true
    title: 'column-width: auto;'
    description: <p>The element will <strong>not</strong> distribute its child elements
      into columns, unlesse a <code class="shorthand"><a href="http://cssreference.io/#column-count">column-count</a></code>
      value is defined. In that case, the column width will be infered from the column
      count.</p>
    output: <div class="example-output-div column-width" id="column-width-auto"><p
      class="block is-alpha">Hello world</p><p class="block is-beta">Foo bar</p><p
      class="block is-pink">CSS Reference</p></div>
  - is_default: false
    title: 'column-width: 10px;'
    description: "<p>You can use <strong>pixel</strong> values for the column width.</p>
      <p>The number of columns will be the minimum needed to distribute all the content
      across the element.</p>"
    output: <div class="example-output-div column-width" id="column-width-10px"><p
      class="block is-alpha">Hello world</p><p class="block is-beta">Foo bar</p><p
      class="block is-pink">CSS Reference</p></div>
- title: content
  is_shorthand: false
  description: "<p>Defines the text content of the <code>:before</code> and <code>:after</code>
    pseudo-elements.</p>"
  styles:
  - ".content p:before { content: normal; }"
  - "#content-normal{ content:normal;}"
  - "#content-foo-bar{ content:&quot;Foo bar&quot;;}"
  - '#content-foo-bar p:before { content: "Foo bar"; }'
  - "#content-urlimagesjtpng p:before { content: url(/images/jt.png); }"
  - "#content-attrdata-something{ content:attr(data-something);}"
  - "#content-attrdata-something p:before { content: attr(data-something); }"
  actions: []
  examples:
  - is_default: true
    title: 'content: normal;'
    description: "<p>No content is added to the element.</p>"
    output: <div class="example-output-div content" id="content-normal"><p data-something="cssreference">Hello
      world</p></div>
  - is_default: false
    title: 'content: "Foo bar";'
    description: '<p>Considering this HTML element:</p> <pre>&lt;p class="element"&gt;
      Hello world &lt;/p&gt;</pre><p>And this CSS:</p> <pre>.element:before { content:
      "Foo bar"; }</pre><p>The text content will be <strong>prepended</strong> to
      the element''s content.</p> <p>Notice how the end result <em>combines</em> text
      from the HTML and text from the CSS.</p>'
    output: <div class="example-output-div content" id="content-foo-bar"><p data-something="cssreference">Hello
      world</p></div>
  - is_default: false
    title: 'content: url(/images/jt.png);'
    description: "<p>You can insert <strong>images</strong> by using the <code>url()</code>
      function.</p>"
    output: <div class="example-output-div content" id="content-urlimagesjtpng"><p
      data-something="cssreference">Hello world</p></div>
  - is_default: false
    title: 'content: attr(data-something);'
    description: '<p>Considering this HTML element:</p> <pre>&lt;p class="element"
      data-something="cssreference"&gt; Hello world &lt;/p&gt;</pre><p>And this CSS:</p>
      <pre>.element:before { content: attr(data-something); }</pre><p>The element
      will grab the text content from the HTML <strong>attribute</strong>.</p>'
    output: <div class="example-output-div content" id="content-attrdata-something"><p
      data-something="cssreference">Hello world</p></div>
- title: cursor
  is_shorthand: false
  description: "<p>Sets the mouse cursor when hovering the element.</p>"
  styles:
  - "#cursor-default{ cursor:default;}"
  - "#cursor-auto{ cursor:auto;}"
  - "#cursor-pointer{ cursor:pointer;}"
  - "#cursor-move{ cursor:move;}"
  - "#cursor-crosshair{ cursor:crosshair;}"
  - "#cursor-text{ cursor:text;}"
  - "#cursor-wait{ cursor:wait;}"
  - "#cursor-helpe-resize{ cursor:helpe-resize;}"
  - "#cursor-ne-resize{ cursor:ne-resize;}"
  - "#cursor-nw-resize{ cursor:nw-resize;}"
  - "#cursor-n-resize{ cursor:n-resize;}"
  - "#cursor-se-resize{ cursor:se-resize;}"
  - "#cursor-sw-resize{ cursor:sw-resize;}"
  - "#cursor-s-resize{ cursor:s-resize;}"
  - "#cursor-w-resize{ cursor:w-resize;}"
  actions: []
  examples:
  - is_default: false
    title: 'cursor: default;'
    description: "<p>Sets the cursor to the element's default value. For a link, it
      would be a pointer. For text it would be a selection cursor.</p>"
    output: <div class="example-output-div cursor" id="cursor-default"><p>Hello world</p></div>
  - is_default: false
    title: 'cursor: auto;'
    description: "<p>auto</p>"
    output: <div class="example-output-div cursor" id="cursor-auto"><p>Hello world</p></div>
  - is_default: false
    title: 'cursor: pointer;'
    description: "<p>pointer</p>"
    output: <div class="example-output-div cursor" id="cursor-pointer"><p>Hello world</p></div>
  - is_default: false
    title: 'cursor: move;'
    description: "<p>move</p>"
    output: <div class="example-output-div cursor" id="cursor-move"><p>Hello world</p></div>
  - is_default: false
    title: 'cursor: crosshair;'
    description: "<p>crosshair</p>"
    output: <div class="example-output-div cursor" id="cursor-crosshair"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: text;'
    description: "<p>text</p>"
    output: <div class="example-output-div cursor" id="cursor-text"><p>Hello world</p></div>
  - is_default: false
    title: 'cursor: wait;'
    description: "<p>wait</p>"
    output: <div class="example-output-div cursor" id="cursor-wait"><p>Hello world</p></div>
  - is_default: false
    title: 'cursor: helpe-resize;'
    description: "<p>helpe-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-helpe-resize"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: ne-resize;'
    description: "<p>ne-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-ne-resize"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: nw-resize;'
    description: "<p>nw-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-nw-resize"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: n-resize;'
    description: "<p>n-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-n-resize"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: se-resize;'
    description: "<p>se-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-se-resize"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: sw-resize;'
    description: "<p>sw-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-sw-resize"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: s-resize;'
    description: "<p>s-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-s-resize"><p>Hello
      world</p></div>
  - is_default: false
    title: 'cursor: w-resize;'
    description: "<p>w-resize</p>"
    output: <div class="example-output-div cursor" id="cursor-w-resize"><p>Hello
      world</p></div>
- title: display
  is_shorthand: false
  description: "<p>Sets the display behavior of the element.</p>"
  styles:
  - ".display .block.is-alpha { padding: 0; }.display .block span { background: hsl(348,
    100%, 61%);color: #fff; }.display .block span:last-child { background: hsl(217,
    71%, 53%); }"
  - "#display-none .block.is-alpha { display: none; }"
  - "#display-inline .block.is-alpha { display: inline; }"
  - "#display-block .block.is-alpha { display: block; }"
  - "#display-inline-block .block.is-alpha { display: inline-block;height: 3em;width:
    60px; }"
  - "#display-list-item .block.is-alpha { display: list-item; }"
  - "#display-table .block.is-alpha { display: table; }"
  - "#display-table-cell .block.is-alpha { display: table-cell; }"
  - "#display-table-row .block.is-alpha { display: table-row; }"
  - "#display-flex .block.is-alpha { display: flex; }"
  - "#display-inline-flex .block.is-alpha { display: inline-flex;height: 3em;width:
    120px; }"
  actions: []
  examples:
  - is_default: false
    title: 'display: none;'
    description: "<p>The element is completely <strong>removed</strong>, as if it
      wasn't in the HTML code in the first place.</p>"
    output: <div class="example-output-div display" id="display-none"><div class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. <p class="block is-alpha">Hello
      world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: inline;'
    description: "<p>The element is turned into an <strong>inline</strong> element:
      it behaves like simple text.</p> <p>Any <code>height</code> and <code>width</code>
      applied will have <strong>no</strong> effect.</p>"
    output: <div class="example-output-div display" id="display-inline"><div class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. <p class="block is-alpha">Hello
      world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: block;'
    description: "<p>The element is turned into a <strong>block</strong> element:
      it starts on a new line, and takes up the whole width.</p>"
    output: <div class="example-output-div display" id="display-block"><div class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. <p class="block is-alpha">Hello
      world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: inline-block;'
    description: "<p>The element shares properties of both an <strong>inline</strong>
      and a <strong>block</strong> element:</p> <ul><li><strong>inline</strong> because
      the element behaves like simple text, and inserts itself in a block of text</li><li><strong>Block</strong>
      because you can apply <code>height</code> and <code>width</code> values</li></ul><p>For
      example, this element has:</p> <pre>.element{ height: 3em; width: 60px; }</pre>"
    output: <div class="example-output-div display" id="display-inline-block"><div
      class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block
      is-alpha">Hello world</p> Etiam semper diam at erat pulvinar, at pulvinar felis
      blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: list-item;'
    description: "<p>The element behaves like a <strong>list item</strong>: <code>&lt;li&gt;</code>.
      The only difference with <strong>block</strong> is that a list item has a <strong>bullet
      point</strong>.</p>"
    output: <div class="example-output-div display" id="display-list-item"><div class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. <p class="block is-alpha">Hello
      world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: table;'
    description: "<p>The element behaves like a <strong>table</strong>: <code>&lt;table&gt;</code>.</p>
      <p>Its content and child elements behave like table cells.</p>"
    output: <div class="example-output-div display" id="display-table"><div class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. <p class="block is-alpha">Target
      <span>First child</span> <span>Second child</span></p> Etiam semper diam at
      erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: table-cell;'
    description: "<p>The element behaves like a <strong>table cell</strong>: <code>&lt;td&gt;</code>
      or <code>&lt;th&gt;</code>.</p> <p>Its content and child elements behave like
      table cells.</p>"
    output: <div class="example-output-div display" id="display-table-cell"><div
      class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block
      is-alpha">Target <span>First child</span> <span>Second child</span></p> Etiam
      semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: table-row;'
    description: "<p>The element behaves like a <strong>table row</strong>: <code>&lt;tr&gt;</code>.</p>
      <p>Its content and child elements behave like table cells.</p>"
    output: <div class="example-output-div display" id="display-table-row"><div class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. <p class="block is-alpha">Target
      <span>First child</span> <span>Second child</span></p> Etiam semper diam at
      erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: flex;'
    description: "<p>The element is turned into an <strong>flexbox</strong> container.
      On its own, it behaves like a block element.</p> <p>Its child elements will
      be turned into <strong>flexbox items</strong>.</p>"
    output: <div class="example-output-div display" id="display-flex"><div class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. <p class="block is-alpha"><span>First
      child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar,
      at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida
      libero rhoncus ut.</div></div>
  - is_default: false
    title: 'display: inline-flex;'
    description: "<p>The element shares properties of both an <strong>inline</strong>
      and a <strong>flexbox</strong> element:</p> <ul><li><strong>inline</strong>
      because the element behaves like simple text, and inserts itself in a block
      of text</li><li><strong>flexbox</strong> because its child element will be turned
      into flexbox items</li></ul><p>For example, this element has:</p> <pre>.element{
      height: 3em; width: 120px; }</pre>"
    output: <div class="example-output-div display" id="display-inline-flex"><div
      class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block
      is-alpha"><span>First child</span> <span>Second child</span></p> Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut.</div></div>
- title: flex-basis
  is_shorthand: false
  description: "<p>Defines the initial size of a flexbox item.</p>"
  styles:
  - ".flex-basis { background: hsl(0, 0%, 95%);display: flex;padding: 1em;word-break:
    break-all; }"
  - "#flex-basis-auto{ flex-basis:auto;}"
  - "#flex-basis-auto .block { flex-basis: auto; }"
  - "#flex-basis-80px{ flex-basis:80px;}"
  - "#flex-basis-80px .block { flex-basis: 80px; }"
  actions: []
  examples:
  - is_default: true
    title: 'flex-basis: auto;'
    description: "<p>The element will be automatically sized based on its content,
      or on any <code>height</code> or <code>width</code> value if they are defined.</p>"
    output: <div class="example-output-div flex-basis" id="flex-basis-auto"><p class="block
      is-alpha">Flexbox item</p></div>
  - is_default: false
    title: 'flex-basis: 80px;'
    description: "<p>You can define <strong>pixel</strong> or <strong>(r)em</strong>
      values. The element will wrap its content to avoid any overflow.</p>"
    output: <div class="example-output-div flex-basis" id="flex-basis-80px"><p class="block
      is-alpha">Flexbox item</p></div>
- title: flex-direction
  is_shorthand: false
  description: "<p>Defines how flexbox items are ordered within a flexbox container.</p>"
  styles:
  - ".flex-direction { display: flex; }"
  - "#flex-direction-row{ flex-direction:row;}"
  - "#flex-direction-row-reverse{ flex-direction:row-reverse;}"
  - "#flex-direction-column{ flex-direction:column;}"
  - "#flex-direction-column-reverse{ flex-direction:column-reverse;}"
  actions: []
  examples:
  - is_default: true
    title: 'flex-direction: row;'
    description: "<p>The flexbox items are ordered the <strong>same</strong> way as
      the <strong>text direction</strong>, along the <strong>main axis</strong>.</p>"
    output: <div class="example-output-div flex-direction" id="flex-direction-row"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p><p class="block
      is-yellow"><strong>4.</strong> Four</p></div>
  - is_default: false
    title: 'flex-direction: row-reverse;'
    description: "<p>The flexbox items are ordered the <strong>opposite</strong> way
      as the <strong>text direction</strong>, along the <strong>main axis</strong>.</p>"
    output: <div class="example-output-div flex-direction" id="flex-direction-row-reverse"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p><p class="block
      is-yellow"><strong>4.</strong> Four</p></div>
  - is_default: false
    title: 'flex-direction: column;'
    description: "<p>The flexbox items are ordered the <strong>same</strong> way as
      the <strong>text direction</strong>, along the <strong>cross axis</strong>.</p>"
    output: <div class="example-output-div flex-direction" id="flex-direction-column"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p><p class="block
      is-yellow"><strong>4.</strong> Four</p></div>
  - is_default: false
    title: 'flex-direction: column-reverse;'
    description: "<p>The flexbox items are ordered the <strong>opposite</strong> way
      as the <strong>text direction</strong>, along the <strong>cross axis</strong>.</p>"
    output: <div class="example-output-div flex-direction" id="flex-direction-column-reverse"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p><p class="block
      is-yellow"><strong>4.</strong> Four</p></div>
- title: flex-flow
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#flex-direction"
    data-property-name="flex-direction">flex-direction</a></code> and <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#flex-flow" data-property-name="flex-flow">flex-flow</a></code>.</p>
  styles: []
  actions: []
  examples: []
- title: flex-grow
  is_shorthand: false
  description: "<p>Defines how much a flexbox item should <strong>grow</strong> if
    there's space available.</p>"
  styles:
  - ".flex-grow { background: #310736;border-radius: 3px;display: flex;padding: 1em;
    }"
  - "#flex-grow-0{ flex-grow:0;}"
  - "#flex-grow-1{ flex-grow:1;}"
  - "#flex-grow-1 .block.is-alpha { flex-grow: 1; }"
  - "#flex-grow-2{ flex-grow:2;}"
  - "#flex-grow-2 .block.is-alpha { flex-grow: 1; }#flex-grow-2 .block.is-pink { flex-grow:
    2; }"
  actions: []
  examples:
  - is_default: true
    title: 'flex-grow: 0;'
    description: "<p>The element will <strong>not</strong> grow if there's space available.
      It will only use the space it needs.</p>"
    output: <div class="example-output-div flex-grow" id="flex-grow-0"><p class="block
      is-alpha"><strong>Target</strong></p><p class="block is-pink">Item</p><p class="block
      is-yellow">Item</p></div>
  - is_default: false
    title: 'flex-grow: 1;'
    description: "<p>The element will <strong>grow</strong> by a factor of <strong>1</strong>.
      It will fill up the remaining space if no other flexbox item has a <code>flex-grow</code>
      value.</p>"
    output: <div class="example-output-div flex-grow" id="flex-grow-1"><p class="block
      is-alpha"><strong>Target</strong></p><p class="block is-pink">Item</p><p class="block
      is-yellow">Item</p></div>
  - is_default: false
    title: 'flex-grow: 2;'
    description: "<p>Because the flex-grow value is <strong>relative</strong>, its
      behaviour depends on the value of the flexbox item <strong>siblings</strong>.</p>
      <p>In this example, the remaining space is divided in <strong>3</strong>:</p>
      <ul><li><strong>1</strong> third goes to the <strong>green</strong> item</li><li><strong>2</strong>
      thirds go to the <strong>pink</strong> item</li><li>Nothing goes to the <strong>yellow</strong>
      item, who retains its initial width</li></ul>"
    output: <div class="example-output-div flex-grow" id="flex-grow-2"><p class="block
      is-alpha">Item<br><strong>1</strong></p><p class="block is-pink">Item<br><strong>2</strong></p><p
      class="block is-yellow">Item<br><strong>0</strong></p></div>
- title: flex-shrink
  is_shorthand: false
  description: "<p>Defines how much a flexbox item should <strong>shrink</strong>
    if there's <strong>not enough</strong> space available.</p>"
  styles:
  - ".flex-shrink { background: #310736;border-radius: 3px;display: flex;padding:
    1em;width: 300px; }"
  - ".flex-shrink .block { flex-shrink: 1; }"
  - "#flex-shrink-1{ flex-shrink:1;}"
  - "#flex-shrink-0{ flex-shrink:0;}"
  - "#flex-shrink-0 .block.is-alpha { flex-shrink: 0; }"
  - "#flex-shrink-2{ flex-shrink:2;}"
  - "#flex-shrink-2 .block.is-alpha { flex-grow: 1;width: 100%; }#flex-shrink-2 .block.is-pink
    { flex-shrink: 3;word-break: break-all; }#flex-shrink-2 .block.is-yellow { flex-shrink:
    1;word-break: break-all; }"
  actions: []
  examples:
  - is_default: true
    title: 'flex-shrink: 1;'
    description: "<p>If there's <strong>not enough</strong> space available in the
      container's main axis, the element will <strong>shrink</strong> by a factor
      of <strong>1</strong>, and will wrap its content.</p>"
    output: <div class="example-output-div flex-shrink" id="flex-shrink-1"><p class="block
      is-alpha"><strong>This is the flex-shrink target</strong></p><p class="block
      is-pink">Foo bar</p><p class="block is-yellow">Lorem ipsum</p></div>
  - is_default: false
    title: 'flex-shrink: 0;'
    description: "<p>The element will <strong>not</strong> shrink: it will retain
      the width it needs, and <strong>not</strong> wrap its content. Its siblings
      will shrink to give space to the target element.</p> <p>Because the target element
      will not wrap its content, there is a chance for the flexbox container's content
      to <strong>overflow</strong>.</p>"
    output: <div class="example-output-div flex-shrink" id="flex-shrink-0"><p class="block
      is-alpha"><strong>This is the flex-shrink target</strong></p><p class="block
      is-pink">Foo bar</p><p class="block is-yellow">Lorem ipsum</p></div>
  - is_default: false
    title: 'flex-shrink: 2;'
    description: "<p>Because the flex-shrink value is <strong>relative</strong>, its
      behaviour depends on the value of the flexbox item <strong>siblings</strong>.</p>
      <p>In this example, the green item wants to fill 100% of the width. The space
      it needs is <strong>taken from</strong> its two siblings, and is divided in
      <strong>4</strong>:</p> <ul><li><strong>3</strong> quarters are taken from the
      <strong>red</strong> item</li><li><strong>1</strong> quarter is taken from the
      <strong>yellow</strong> item</li></ul>"
    output: <div class="example-output-div flex-shrink" id="flex-shrink-2"><p class="block
      is-alpha">Width<br><strong>100%</strong></p><p class="block is-pink">Shrink<br><strong>3</strong></p><p
      class="block is-yellow">Shrink<br><strong>1</strong></p></div>
- title: flex-wrap
  is_shorthand: false
  description: "<p>Defines if flexbox items appear on a <strong>single line</strong>
    or on <strong>multiple lines</strong> within a flexbox container.</p>"
  styles:
  - ".flex-wrap { background: #310736;display: flex;max-width: 360px; }"
  - "#flex-wrap-nowrap{ flex-wrap:nowrap;}"
  - "#flex-wrap-wrap{ flex-wrap:wrap;}"
  - "#flex-wrap-wrap-reverse{ flex-wrap:wrap-reverse;}"
  actions: []
  examples:
  - is_default: true
    title: 'flex-wrap: nowrap;'
    description: "<p>The flexbox items will remain on a <strong>single line</strong>,
      no matter what, and will eventually overflow if needed.</p>"
    output: <div class="example-output-div flex-wrap" id="flex-wrap-nowrap"><p class="block
      is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p><p class="block
      is-yellow"><strong>4.</strong> Four</p><p class="block is-orange"><strong>5.</strong>
      Five</p><p class="block is-purple"><strong>6.</strong> Six</p></div>
  - is_default: false
    title: 'flex-wrap: wrap;'
    description: "<p>The flexbox items will be distributed among <strong>multiple
      lines</strong> if needed.</p>"
    output: <div class="example-output-div flex-wrap" id="flex-wrap-wrap"><p class="block
      is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p><p class="block
      is-yellow"><strong>4.</strong> Four</p><p class="block is-orange"><strong>5.</strong>
      Five</p><p class="block is-purple"><strong>6.</strong> Six</p></div>
  - is_default: false
    title: 'flex-wrap: wrap-reverse;'
    description: "<p>The flexbox items will be distributed among <strong>multiple
      lines</strong> if needed. Any additional line will appear <strong>before</strong>
      the previous one.</p>"
    output: <div class="example-output-div flex-wrap" id="flex-wrap-wrap-reverse"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p><p class="block
      is-yellow"><strong>4.</strong> Four</p><p class="block is-orange"><strong>5.</strong>
      Five</p><p class="block is-purple"><strong>6.</strong> Six</p></div>
- title: float
  is_shorthand: false
  description: "<p>Pushes the element to either the <strong>left</strong> or <strong>right</strong>
    side. The following siblings will <strong>wrap around</strong> the floating element</p>"
  styles:
  - "#float-none .block.is-alpha { float: none; }"
  - "#float-left .block.is-alpha { float: left; }"
  - "#float-right .block.is-alpha { float: right; }"
  actions: []
  examples:
  - is_default: true
    title: 'float: none;'
    description: "<p>Removes any previously defined <code>float</code> value. The
      element will remain in the natural flow of the page.</p>"
    output: <div class="example-output-div float" id="float-none"><p class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit.</p><p class="block is-alpha">Target element</p><p
      class="block">Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
      sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor
      lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'float: left;'
    description: "<p>Moves the element to the <strong>left</strong> side of its container.
      The following elements will wrap around it and fill the space remaining on the
      right.</p>"
    output: <div class="example-output-div float" id="float-left"><p class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit.</p><p class="block is-alpha">Target element</p><p
      class="block">Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
      sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor
      lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'float: right;'
    description: "<p>Moves the element to the <strong>right</strong> side of its container.
      The following elements will wrap around it and fill the space remaining on the
      left.</p>"
    output: <div class="example-output-div float" id="float-right"><p class="block">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit.</p><p class="block is-alpha">Target element</p><p
      class="block">Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit
      sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor
      lorem, et sollicitudin felis neque sit amet erat.</p></div>
- title: font-family
  is_shorthand: false
  description: ''
  styles:
  - ".font-family { font-size: 1.5em;line-height: 1.2; }"
  - "#font-family-source-sans-pro-arial-sans-serif{ font-family:&quot;Source Sans
    Pro&quot;, &quot;Arial&quot;, sans-serif;}"
  - "#font-family-serif{ font-family:serif;}"
  - "#font-family-sans-serif{ font-family:sans-serif;}"
  - "#font-family-monospace{ font-family:monospace;}"
  - "#font-family-cursive{ font-family:cursive;}"
  - "#font-family-fantasy{ font-family:fantasy;}"
  actions: []
  examples:
  - is_default: false
    title: 'font-family: "Source Sans Pro", "Arial", sans-serif;'
    description: "<p>When using <strong>multiple</strong> values, the <code>font-family</code>
      list of <strong>font families</strong> defines the <strong>priority</strong>
      in which the browser should choose the font family.</p> <p>The browser will
      look for each family on the user's <strong>computer</strong> and in any <strong>@font-face</strong>
      resource.</p> <p>The list is prioritized from <strong>left</strong> to <strong>right</strong>:
      it will use the first value if it's available, or go to the next one, until
      the end of the list is reached. The <strong>default</strong> font family is
      defined by the browser preferences.</p> <p>In this example, the browser will
      try to use <code>Source Sans Pro</code> if it's available. If it can't find
      it, it will try to use <code>Arial</code>. If it's not available either, it
      will use the browser's <code>sans-serif</code> font.</p>"
    output: <div class="example-output-div font-family" id="font-family-source-sans-pro-arial-sans-serif">Hello
      world<br>The quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'font-family: serif;'
    description: "<p>The browser will use a <strong>serif</strong> font family: all
      characters have <strong>stroke endings</strong>.</p>"
    output: <div class="example-output-div font-family" id="font-family-serif">Hello
      world<br>The quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'font-family: sans-serif;'
    description: "<p>The browser will use a <strong>sans-serif</strong> font family:
      <strong>no</strong> character has stroke endings.</p>"
    output: <div class="example-output-div font-family" id="font-family-sans-serif">Hello
      world<br>The quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'font-family: monospace;'
    description: "<p>The browser will use a <strong>monospace</strong> font family:
      all characters have the <strong>same width</strong>.</p>"
    output: <div class="example-output-div font-family" id="font-family-monospace">Hello
      world<br>The quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'font-family: cursive;'
    description: "<p>The browser will use a <strong>cursive</strong> font family.</p>"
    output: <div class="example-output-div font-family" id="font-family-cursive">Hello
      world<br>The quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'font-family: fantasy;'
    description: "<p>The browser will use a <strong>fantasy</strong> font family.</p>"
    output: <div class="example-output-div font-family" id="font-family-fantasy">Hello
      world<br>The quick brown fox jumps over the lazy dog</div>
- title: font-size
  is_shorthand: false
  description: "<p>Defines the size of the text.</p>"
  styles:
  - ".font-size { line-height: 1.2; }"
  - "#font-size-medium{ font-size:medium;}"
  - "#font-size-20px{ font-size:20px;}"
  - "#font-size-12em .parent { font-size: 18px; }#font-size-12em .block { font-size:
    1.2em;margin-top: 0.25rem; }"
  - "#font-size-12rem .parent { font-size: 18px; }#font-size-12rem .block { font-size:
    1.2rem;margin-top: 0.25rem; }"
  - "#font-size-90 .parent { font-size: 18px; }#font-size-90 .block { font-size: 90%;margin-top:
    0.25rem; }"
  - "#font-size-smaller .parent { font-size: 18px; }#font-size-smaller .block { font-size:
    smaller;margin-top: 0.25rem; }"
  - "#font-size-x-large .parent { font-size: 18px; }#font-size-x-large .block { font-size:
    x-large;margin-top: 0.25rem; }"
  actions: []
  examples:
  - is_default: true
    title: 'font-size: medium;'
    description: "<p>The text will use the browser's default <strong>medium</strong>
      size.</p>"
    output: <div class="example-output-div font-size" id="font-size-medium"><p>Hello
      world</p><p>The quick brown fox jumps over the lazy dog</p></div>
  - is_default: false
    title: 'font-size: 20px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div font-size" id="font-size-20px"><p>Hello
      world</p><p>The quick brown fox jumps over the lazy dog</p></div>
  - is_default: false
    title: 'font-size: 1.2em;'
    description: "<p>You can use <strong>em</strong> values.</p> <p>The value is <strong>relative</strong>
      to the <strong>parent</strong>'s <code>font-size</code>.<br>As a result, the
      value will <strong>cascade</strong> if used on child elements.</p>"
    output: '<div class="example-output-div font-size" id="font-size-12em"><div class="parent">Parent
      container: <strong>18px</strong><div class="block is-alpha">Font-size: 1.2em
      = <strong>21.6px</strong><div class="block is-pink">Font-size: 1.2em = <strong>25.92px</strong><div
      class="block is-yellow">Font-size: 1.2em = <strong>31.104px</strong></div></div></div></div>
      </div>'
  - is_default: false
    title: 'font-size: 1.2rem;'
    description: "<p>You can use <strong>rem</strong> values.</p> <p>The value is
      <strong>relative</strong> to the <strong>root element</strong>'s <code>font-size</code>,
      which is the <code>&lt;html&gt;</code> element.<br>As a result, the value will
      <strong>not</strong> vary depending on the <em>depth</em> of the element in
      the HTML hierarchy, and will reamin context independent.</p>"
    output: '<div class="example-output-div font-size" id="font-size-12rem"><div
      class="parent"><code>&lt;html&gt;</code> root element: <strong>18px</strong><div
      class="block is-alpha">Font-size: 1.2rem = <strong>21.6px</strong><div class="block
      is-pink">Font-size: 1.2rem = <strong>21.6px</strong><div class="block is-yellow">Font-size:
      1.2rem = <strong>21.6px</strong></div></div></div></div> </div>'
  - is_default: false
    title: 'font-size: 90%;'
    description: "<p>You can use <strong>percentage</strong> values. They act like
      em values.</p> <p>The value is <strong>relative</strong> to the <strong>parent</strong>'s
      <code>font-size</code>.<br>As a result, the value will <strong>cascade</strong>
      if used on child elements.</p>"
    output: '<div class="example-output-div font-size" id="font-size-90"><div class="parent">Parent
      container: <strong>18px</strong><div class="block is-alpha">Font-size: 90% =
      <strong>16.2</strong><div class="block is-pink">Font-size: 90% = <strong>14.58px</strong><div
      class="block is-yellow">Font-size: 90% = <strong>13.122px</strong></div></div></div></div>
      </div>'
  - is_default: false
    title: 'font-size: smaller;'
    description: "<p>You can use <strong>relative keywords</strong>. The value is
      relative to the <strong>parent</strong>.</p> <p>The following are available:</p>
      <ul><li><code>larger</code></li><li><code>smaller</code></li></ul>"
    output: '<div class="example-output-div font-size" id="font-size-smaller"><div
      class="parent">Parent container: <strong>18px</strong><div class="block is-alpha">Font-size:
      smaller<div class="block is-pink">Font-size: smaller<div class="block is-yellow">Font-size:
      smaller</div></div></div></div> </div>'
  - is_default: false
    title: 'font-size: x-large;'
    description: "<p>You can use <strong>absolute keywords</strong>. The value is
      relative to the <strong>root element</strong> <code>&lt;html&gt;</code>.</p>
      <p>The following are available:</p> <ul><li><code>xx-small</code></li><li><code>x-small</code></li><li><code>small</code></li><li><code>medium</code></li><li><code>large</code></li><li><code>x-large</code></li><li><code>xx-large</code></li></ul>"
    output: '<div class="example-output-div font-size" id="font-size-x-large"><div
      class="parent"><code>&lt;html&gt;</code> root element: <strong>18px</strong><div
      class="block is-alpha">Font-size: x-large<div class="block is-pink">Font-size:
      x-large<div class="block is-yellow">Font-size: x-large</div></div></div></div>
      </div>'
- title: font-style
  is_shorthand: false
  description: "<p>Defines how much the text is slanted.</p>"
  styles:
  - ".font-style { font-size: 1.2em; }"
  - "#font-style-normal{ font-style:normal;}"
  - "#font-style-italic{ font-style:italic;}"
  - "#font-style-oblique{ font-style:oblique;}"
  actions: []
  examples:
  - is_default: true
    title: 'font-style: normal;'
    description: "<p>The text is <strong>not</strong> slanted.</p>"
    output: <div class="example-output-div font-style" id="font-style-normal">Hello
      world</div>
  - is_default: false
    title: 'font-style: italic;'
    description: "<p>Use the <strong>italic</strong> version of the font: the letters
      are slightly slanted.</p>"
    output: <div class="example-output-div font-style" id="font-style-italic">Hello
      world</div>
  - is_default: false
    title: 'font-style: oblique;'
    description: "<p>Use the <strong>oblique</strong> version of the font: the letters
      are more slanted than italic.</p>"
    output: <div class="example-output-div font-style" id="font-style-oblique">Hello
      world</div>
- title: font-variant
  is_shorthand: false
  description: "<p>Defines which glyph to use for each letter.</p>"
  styles:
  - ".font-variant { font-size: 1.2em; }"
  - "#font-variant-normal{ font-variant:normal;}"
  - "#font-variant-small-caps{ font-variant:small-caps;}"
  actions: []
  examples:
  - is_default: true
    title: 'font-variant: normal;'
    description: "<p>Each letter uses its <strong>normal</strong> glyph.</p>"
    output: <div class="example-output-div font-variant" id="font-variant-normal">Hello
      world</div>
  - is_default: false
    title: 'font-variant: small-caps;'
    description: "<p>Each letter uses its <strong>small capitalized</strong> version.</p>"
    output: <div class="example-output-div font-variant" id="font-variant-small-caps">Hello
      world</div>
- title: font-weight
  is_shorthand: false
  description: "<p>Defines the weight of the text.</p>"
  styles:
  - ".font-weight { font-size: 1.2em; }"
  - "#font-weight-normal{ font-weight:normal;}"
  - "#font-weight-bold{ font-weight:bold;}"
  - "#font-weight-600{ font-weight:600;}"
  - "#font-weight-lighter{ font-weight:lighter;}"
  actions: []
  examples:
  - is_default: true
    title: 'font-weight: normal;'
    description: "<p>The text is in <strong>normal</strong> weight.</p>"
    output: <div class="example-output-div font-weight" id="font-weight-normal">Hello
      world</div>
  - is_default: false
    title: 'font-weight: bold;'
    description: "<p>The text becomes <strong>bold</strong>.</p>"
    output: <div class="example-output-div font-weight" id="font-weight-bold">Hello
      world</div>
  - is_default: false
    title: 'font-weight: 600;'
    description: "<p>You can use <strong>numeric</strong> values. They all correspond
      to a particular <strong>named weight</strong>:</p> <ul><li><strong>100</strong>
      Thin</li><li><strong>200</strong> Extra Light</li><li><strong>300</strong> Light</li><li><strong>400</strong>
      Normal</li><li><strong>500</strong> Medium</li><li><strong>600</strong> Semi
      Bold</li><li><strong>700</strong> Bold</li><li><strong>800</strong> Extra Bold</li><li><strong>900</strong>
      Ultra Bold</li></ul><p>If the font family doesn't provide the requested weight,
      it will use the closest available one.</p>"
    output: <div class="example-output-div font-weight" id="font-weight-600">Hello
      world</div>
  - is_default: false
    title: 'font-weight: lighter;'
    description: "<p>You can use <strong>relative</strong> keywords: <code>lighter</code>
      or <code>bolder</code>. The browser will use the next available weight.</p>"
    output: <div class="example-output-div font-weight" id="font-weight-lighter">Hello
      world</div>
- title: font
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#font-style"
    data-property-name="font-style">font-style</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#font-variant" data-property-name="font-variant">font-variant</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#font-weight"
    data-property-name="font-weight">font-weight</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#font-size" data-property-name="font-size">font-size</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#line-height"
    data-property-name="line-height">line-height</a></code> and <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#font-family" data-property-name="font-family">font-family</a></code>.</p>
  styles: []
  actions: []
  examples: []
- title: height
  is_shorthand: false
  description: "<p>Defines the height of the element.</p>"
  styles:
  - ".height { max-width: 400px; }"
  - "#height-100px .block { height: 100px; }"
  actions: []
  examples:
  - is_default: true
    title: 'height: auto;'
    description: "<p>The element will <strong>automatically</strong> adjust its height
      to allow its content to be displayed correctly.</p>"
    output: <div class="example-output-div height" id="height-auto"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'height: 100px;'
    description: <p>You can use <strong>numeric values</strong> like <strong>pixels</strong>,
      <strong>(r)em</strong>, <strong>percentages</strong>...</p> <p>If the content
      does not fit within the specified height, it will <strong>overflow</strong>.
      How the container will handle this overflowing content is defined by the <code
      class="shorthand"><a href="http://cssreference.io/#overflow">overflow</a></code>
      property.</p>
    output: <div class="example-output-div height" id="height-100px"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
- title: justify-content
  is_shorthand: false
  description: "<p>Defines how flexbox items are aligned according to the <strong>main</strong>
    axis, within a flexbox container.</p>"
  styles:
  - ".justify-content { background: hsl(48, 100%, 67%);background: #310736;display:
    flex;padding: 0; }"
  - "#justify-content-flex-start{ justify-content:flex-start;}"
  - "#justify-content-flex-end{ justify-content:flex-end;}"
  - "#justify-content-center{ justify-content:center;}"
  - "#justify-content-space-between{ justify-content:space-between;}"
  - "#justify-content-space-around{ justify-content:space-around;}"
  actions: []
  examples:
  - is_default: true
    title: 'justify-content: flex-start;'
    description: "<p>The flexbox items are pushed towards the <strong>start</strong>
      of the container's main axis.</p>"
    output: <div class="example-output-div justify-content" id="justify-content-flex-start"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p></div>
  - is_default: false
    title: 'justify-content: flex-end;'
    description: "<p>The flexbox items are pushed towards the <strong>end</strong>
      of the container's main axis.</p>"
    output: <div class="example-output-div justify-content" id="justify-content-flex-end"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p></div>
  - is_default: false
    title: 'justify-content: center;'
    description: "<p>The flexbox items are <strong>centered</strong> along the container's
      main axis.</p>"
    output: <div class="example-output-div justify-content" id="justify-content-center"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p></div>
  - is_default: false
    title: 'justify-content: space-between;'
    description: "<p>The remaining space is distributed <strong>between</strong> the
      flexbox items.</p>"
    output: <div class="example-output-div justify-content" id="justify-content-space-between"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p></div>
  - is_default: false
    title: 'justify-content: space-around;'
    description: "<p>The remaining space is distributed <strong>around</strong> the
      flexbox items: this adds space <em>before</em> the first item and <em>after</em>
      the last one.</p>"
    output: <div class="example-output-div justify-content" id="justify-content-space-around"><p
      class="block is-alpha"><strong>1.</strong> One</p><p class="block is-beta"><strong>2.</strong>
      Two</p><p class="block is-pink"><strong>3.</strong> Three</p></div>
- title: left
  is_shorthand: false
  description: "<p>Defines the position of the element according to its <strong>left</strong>
    edge.</p>"
  styles:
  - ".left { background: #310736;height: 200px;position: relative; }"
  - ".left p { color: #fff; }.left .natural { width: 200px; }.left .actual { animation-direction:
    alternate;animation-duration: 2s;animation-iteration-count: infinite;position:
    absolute;width: 200px; }"
  - "#left-auto{ left:auto;}"
  - "#left-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }"
  - "#left-80px .actual { animation-name: fadeIn;left: 80px;position: relative;transform:
    translateY(-100%); }"
  - "#left--20px .actual { animation-name: fadeIn;left: -20px;transform: translateY(-100%);
    }"
  actions: []
  examples:
  - is_default: true
    title: 'left: auto;'
    description: "<p>The element will remain in its <strong>natural</strong> position.</p>"
    output: <div class="example-output-div left" id="left-auto"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
  - is_default: false
    title: 'left: 80px;'
    description: "<p>If the element is in position <strong>relative</strong>, the
      element will move <em>upwards</em> by the amount defined by the <strong>left</strong>
      value.</p>"
    output: <div class="example-output-div left" id="left-80px"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
  - is_default: false
    title: 'left: -20px;'
    description: "<p>If the element is in position <strong>absolute</strong>, the
      element will position itself from the <em>left</em> of the first positioned
      <strong>ancestor</strong>.</p>"
    output: <div class="example-output-div left" id="left--20px"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
- title: letter-spacing
  is_shorthand: false
  description: "<p>Defines the spacing between the characters of a block of text.</p>"
  styles:
  - "#letter-spacing-normal{ letter-spacing:normal;}"
  - "#letter-spacing-2px{ letter-spacing:2px;}"
  - "#letter-spacing-01em{ letter-spacing:0.1em;}"
  actions: []
  examples:
  - is_default: true
    title: 'letter-spacing: normal;'
    description: "<p>The spacing between the characters is <strong>normal</strong>.</p>"
    output: <div class="example-output-div letter-spacing" id="letter-spacing-normal">The
      quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'letter-spacing: 2px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div letter-spacing" id="letter-spacing-2px">The
      quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'letter-spacing: 0.1em;'
    description: "<p>You can use <strong>em</strong> values: this allows the spacing
      to remain <em>relative</em> to the font-size.</p>"
    output: <div class="example-output-div letter-spacing" id="letter-spacing-01em">The
      quick brown fox jumps over the lazy dog</div>
- title: line-height
  is_shorthand: false
  description: "<p>Defines the height of a single line of text.</p>"
  styles:
  - "#line-height-normal{ line-height:normal;}"
  - "#line-height-16{ line-height:1.6;}"
  - "#line-height-16 .block { line-height: 1.6; }"
  - "#line-height-30px{ line-height:30px;}"
  - "#line-height-30px .block { line-height: 30px; }"
  - "#line-height-08em{ line-height:0.8em;}"
  - "#line-height-08em .block { line-height: 0.8em; }"
  actions: []
  examples:
  - is_default: true
    title: 'line-height: normal;'
    description: "<p>Reverts to the <strong>default</strong> value of the browser.</p>"
    output: <div class="example-output-div line-height" id="line-height-normal"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</p></div>
  - is_default: false
    title: 'line-height: 1.6;'
    description: "<p>You can use <strong>unitless</strong> values: the line height
      will be relative to the font size.</p>"
    output: <div class="example-output-div line-height" id="line-height-16"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet.</p></div>
  - is_default: false
    title: 'line-height: 30px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div line-height" id="line-height-30px"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</p></div>
  - is_default: false
    title: 'line-height: 0.8em;'
    description: "<p>You can use <strong>em</strong> values: like with unitless values,
      the line height will be relative to the font size.</p>"
    output: <div class="example-output-div line-height" id="line-height-08em"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</p></div>
- title: list-style-image
  is_shorthand: false
  description: "<p>Defines the <strong>image</strong> to be used as an list item's
    <strong>bullet point</strong>.</p>"
  styles:
  - ".list-style-image ul { list-style-type: disc;margin-left: 1em; }"
  - "#list-style-image-none{ list-style-image:none;}"
  - "#list-style-image-urlimageslist-style-imagepng{ list-style-image:url(/images/list-style-image.png);}"
  - "#list-style-image-urlimageslist-style-imagepng ul { list-style-image: url(/images/list-style-image.png);
    }"
  actions: []
  examples:
  - is_default: true
    title: 'list-style-image: none;'
    description: <p>The list items will use the bullet point defined by the <code
      class="shorthand"><a href="http://cssreference.io/#list-style-type">list-style-type</a></code>
      value, which by default is a <strong>disc</strong>.</p>
    output: <div class="example-output-div list-style-image" id="list-style-image-none"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
  - is_default: false
    title: 'list-style-image: url(/images/list-style-image.png);'
    description: "<p>The list items will use the <strong>image</strong> located at
      the specified URL as their bullet point.<br>The image can not be resized.</p>"
    output: <div class="example-output-div list-style-image" id="list-style-image-urlimageslist-style-imagepng"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
- title: list-style-position
  is_shorthand: false
  description: "<p>Defines the <strong>position</strong> of a list's bullet points.</p>"
  styles:
  - ".list-style-position ul { list-style-type: disc;margin-left: 1em;max-width: 280px;
    }.list-style-position li { background: hsl(48, 100%, 67%);line-height: 1.2; }.list-style-position
    li + li { margin-top: 0.5em; }"
  - "#list-style-position-outside{ list-style-position:outside;}"
  - "#list-style-position-outside ul { list-style-position: outside; }"
  - "#list-style-position-inside{ list-style-position:inside;}"
  - "#list-style-position-inside ul { list-style-position: inside; }"
  actions: []
  examples:
  - is_default: true
    title: 'list-style-position: outside;'
    description: "<p>The bullet point will be <strong>outside</strong> the list item,
      as if it wasn't part of the list item.</p> <p>The start of each <em>line</em>
      of a list item will be aligned vertically.</p>"
    output: <div class="example-output-div list-style-position" id="list-style-position-outside"><ul><li>Lorem
      ipsum dolor sit amet, consectetur adipiscing elit.</li><li>Etiam semper diam
      at erat pulvinar, at pulvinar felis blandit.</li><li>Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut.</li><li>Maecenas imperdiet felis
      nisi, fringilla luctus felis hendrerit sit amet.</li><li>Pellentesque interdum,
      nisl nec interdum maximus.</li></ul></div>
  - is_default: false
    title: 'list-style-position: inside;'
    description: "<p>The bullet point will be <strong>inside</strong> the list item.</p>
      <p>As it <em>is</em> part of the list item, it will be part of the text and
      push the text at the start.</p>"
    output: <div class="example-output-div list-style-position" id="list-style-position-inside"><ul><li>Lorem
      ipsum dolor sit amet, consectetur adipiscing elit.</li><li>Etiam semper diam
      at erat pulvinar, at pulvinar felis blandit.</li><li>Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut.</li><li>Maecenas imperdiet felis
      nisi, fringilla luctus felis hendrerit sit amet.</li><li>Pellentesque interdum,
      nisl nec interdum maximus.</li></ul></div>
- title: list-style-type
  is_shorthand: false
  description: "<p>Defines the <strong>type</strong> of a list item's <strong>bullet
    point</strong>.</p>"
  styles:
  - ".list-style-type ul { margin-left: 1em; }"
  - "#list-style-type-disc{ list-style-type:disc;}"
  - "#list-style-type-disc ul { list-style-type: disc; }"
  - "#list-style-type-circle{ list-style-type:circle;}"
  - "#list-style-type-circle ul { list-style-type: circle; }"
  - "#list-style-type-square{ list-style-type:square;}"
  - "#list-style-type-square ul { list-style-type: square; }"
  - "#list-style-type-decimal{ list-style-type:decimal;}"
  - "#list-style-type-decimal ul { list-style-type: decimal; }"
  - "#list-style-type-none{ list-style-type:none;}"
  - "#list-style-type-none ul { list-style-type: none; }"
  actions: []
  examples:
  - is_default: true
    title: 'list-style-type: disc;'
    description: "<p>The list items will use a <strong>disc</strong> as their bullet
      point.</p>"
    output: <div class="example-output-div list-style-type" id="list-style-type-disc"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
  - is_default: false
    title: 'list-style-type: circle;'
    description: "<p>The list items will use a <strong>circle</strong> as their bullet
      point.</p>"
    output: <div class="example-output-div list-style-type" id="list-style-type-circle"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
  - is_default: false
    title: 'list-style-type: square;'
    description: "<p>The list items will use a <strong>square</strong> as their bullet
      point.</p>"
    output: <div class="example-output-div list-style-type" id="list-style-type-square"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
  - is_default: false
    title: 'list-style-type: decimal;'
    description: "<p>The list items will use a <strong>decimal</strong> as their bullet
      point.</p>"
    output: <div class="example-output-div list-style-type" id="list-style-type-decimal"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
  - is_default: false
    title: 'list-style-type: none;'
    description: "<p>The list items will have <strong>no</strong> bullet point.</p>"
    output: <div class="example-output-div list-style-type" id="list-style-type-none"><ul><li>One</li><li>Two</li><li>Three</li></ul></div>
- title: list-style
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#list-style-type"
    data-property-name="list-style-type">list-style-type</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#list-style-image" data-property-name="list-style-image">list-style-image</a></code>
    and <code class="shorthand"><a class="hash" href="http://localhost:4000/#list-style-position"
    data-property-name="list-style-position">list-style-position</a></code>.</p>
  styles: []
  actions: []
  examples: []
- title: margin-bottom
  is_shorthand: false
  description: "<p>Defines the space <strong>outside</strong> the element, on the
    <strong>bottom</strong> side.</p>"
  styles:
  - ".margin-bottom { background: hsl(0, 0%, 80%);padding: 1em; }"
  - ".margin-bottom .block { border-radius: 0; }.margin-bottom .block.is-alpha { position:
    relative; }.margin-bottom .box { bottom: 0;left: 0;position: absolute;right: 0;transform:
    translateY(100%); }"
  - "#margin-bottom-0 .box { display: none; }"
  - '#margin-bottom-30px .block.is-alpha { margin-bottom: 30px; }#margin-bottom-30px
    .box { height: 30px; }#margin-bottom-30px .box:before { content: "30px"; }'
  - '#margin-bottom-2em .block.is-alpha { margin-bottom: 2em; }#margin-bottom-2em
    .box { height: 2em; }#margin-bottom-2em .box:before { content: "2em"; }'
  - '#margin-bottom-10 .block.is-alpha { margin-bottom: 10%; }#margin-bottom-10 .box
    { bottom: auto;height: 100px;top: 100%;transform: rotate(-90deg) translateX(-100%);transform-origin:
    top left;width: 10%; }#margin-bottom-10 .box:before { content: "10%"; }'
  actions: []
  examples:
  - is_default: true
    title: 'margin-bottom: 0;'
    description: "<p>Removes any margin at the bottom.</p>"
    output: <div class="example-output-div margin-bottom" id="margin-bottom-0"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-bottom: 30px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div margin-bottom" id="margin-bottom-30px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-bottom: 2em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div margin-bottom" id="margin-bottom-2em"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-bottom: 10%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>container</em>.</p>"
    output: <div class="example-output-div margin-bottom" id="margin-bottom-10"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
- title: margin-left
  is_shorthand: false
  description: "<p>Defines the space <strong>outside</strong> the element, on the
    <strong>left</strong> side.</p>"
  styles:
  - ".margin-left { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding:
    0; }"
  - ".margin-left .block { border-radius: 0; }.margin-left .block.is-alpha { position:
    relative; }.margin-left .box { bottom: 0;left: 0;position: absolute;top: 0;transform:
    translateX(-100%); }"
  - "#margin-left-0 .box { display: none; }"
  - '#margin-left-50px .block.is-alpha { margin-left: 50px; }#margin-left-50px .box
    { width: 50px; }#margin-left-50px .box:before { content: "50px"; }'
  - '#margin-left-7em .block.is-alpha { margin-left: 7em; }#margin-left-7em .box {
    width: 7em; }#margin-left-7em .box:before { content: "7em"; }'
  - '#margin-left-30 .block.is-alpha { margin-left: 30%; }#margin-left-30 .box { height:
    2.4em;left: 0;top: 3.2em;transform: none;width: 30%; }#margin-left-30 .box:before
    { content: "30%"; }'
  - '#margin-left-auto .block.is-alpha { margin-left: auto;width: 200px; }#margin-left-auto
    .box { height: 2.4em;left: 0;right: 200px;top: 3.2em;transform: none;width: auto;
    }#margin-left-auto .box:before { content: "auto"; }'
  actions: []
  examples:
  - is_default: true
    title: 'margin-left: 0;'
    description: "<p>Removes any margin on the left.</p>"
    output: <div class="example-output-div margin-left" id="margin-left-0"><div class="block
      is-pink">First item</div><div class="block is-alpha"><strong>Target </strong><div
      class="box is-plum"></div></div><div class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'margin-left: 50px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div margin-left" id="margin-left-50px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-left: 7em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div margin-left" id="margin-left-7em"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-left: 30%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>container</em>.</p>"
    output: <div class="example-output-div margin-left" id="margin-left-30"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong></div><div class="box is-plum"></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-left: auto;'
    description: "<p>The <strong>auto</strong> keyword will give the left side a share
      of the <strong>remaining space</strong>.</p> <p>When combined with <code>margin-right:
      auto</code>, it will <strong>center</strong> the element, if a fixed width is
      defined.</p>"
    output: '<div class="example-output-div margin-left" id="margin-left-auto"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target</strong><br>width:
      200px</div><div class="box is-plum"></div><div class="block is-yellow">Third
      item</div></div>'
- title: margin-right
  is_shorthand: false
  description: "<p>Defines the space <strong>outside</strong> the element, on the
    <strong>right</strong> side.</p>"
  styles:
  - ".margin-right { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding:
    0; }"
  - ".margin-right .block { border-radius: 0; }.margin-right .block.is-alpha { position:
    relative; }.margin-right .box { bottom: 0;position: absolute;right: 0;top: 0;transform:
    translateX(100%); }"
  - "#margin-right-0 .box { display: none; }"
  - '#margin-right-50px .block.is-alpha { margin-right: 50px; }#margin-right-50px
    .box { width: 50px; }#margin-right-50px .box:before { content: "50px"; }'
  - '#margin-right-7em .block.is-alpha { margin-right: 7em; }#margin-right-7em .box
    { width: 7em; }#margin-right-7em .box:before { content: "7em"; }'
  - '#margin-right-30 .block.is-alpha { margin-right: 30%; }#margin-right-30 .box
    { height: 2.4em;right: 0;top: 3.2em;transform: none;width: 30%; }#margin-right-30
    .box:before { content: "30%"; }'
  - '#margin-right-auto .block.is-alpha { margin-right: auto;width: 200px; }#margin-right-auto
    .box { height: 2.4em;left: 200px;right: 0;top: 3.2em;transform: none;width: auto;
    }#margin-right-auto .box:before { content: "auto"; }'
  actions: []
  examples:
  - is_default: true
    title: 'margin-right: 0;'
    description: "<p>Removes any margin on the right.</p>"
    output: <div class="example-output-div margin-right" id="margin-right-0"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-right: 50px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div margin-right" id="margin-right-50px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-right: 7em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div margin-right" id="margin-right-7em"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-right: 30%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>container</em>.</p>"
    output: <div class="example-output-div margin-right" id="margin-right-30"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong></div><div class="box is-plum"></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-right: auto;'
    description: "<p>The <strong>auto</strong> keyword will give the right side a
      share of the <strong>remaining space</strong>.</p> <p>When combined with <code>margin-left:
      auto</code>, it will <strong>center</strong> the element, if a fixed width is
      defined.</p>"
    output: '<div class="example-output-div margin-right" id="margin-right-auto"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target</strong><br>width:
      200px</div><div class="box is-plum"></div><div class="block is-yellow">Third
      item</div></div>'
- title: margin-top
  is_shorthand: false
  description: "<p>Defines the space <strong>outside</strong> the element, on the
    <strong>top</strong> side.</p>"
  styles:
  - ".margin-top { background: hsl(0, 0%, 80%);padding: 1em; }"
  - ".margin-top .block { border-radius: 0; }.margin-top .block.is-alpha { position:
    relative; }.margin-top .box { left: 0;position: absolute;right: 0;top: 0;transform:
    translateY(-100%); }"
  - "#margin-top-0 .box { display: none; }"
  - '#margin-top-30px .block.is-alpha { margin-top: 30px; }#margin-top-30px .box {
    height: 30px; }#margin-top-30px .box:before { content: "30px"; }'
  - '#margin-top-2em .block.is-alpha { margin-top: 2em; }#margin-top-2em .box { height:
    2em; }#margin-top-2em .box:before { content: "2em"; }'
  - '#margin-top-10 .block.is-alpha { margin-top: 10%; }#margin-top-10 .box { height:
    100%;transform: rotate(-90deg);transform-origin: top left;width: 10%; }#margin-top-10
    .box:before { content: "10%"; }'
  actions: []
  examples:
  - is_default: true
    title: 'margin-top: 0;'
    description: "<p>Removes any margin at the top.</p>"
    output: <div class="example-output-div margin-top" id="margin-top-0"><div class="block
      is-pink">First item</div><div class="block is-alpha"><strong>Target </strong><div
      class="box is-plum"></div></div><div class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'margin-top: 30px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div margin-top" id="margin-top-30px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'margin-top: 2em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div margin-top" id="margin-top-2em"><div class="block
      is-pink">First item</div><div class="block is-alpha"><strong>Target </strong><div
      class="box is-plum"></div></div><div class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'margin-top: 10%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>container</em>.</p>"
    output: <div class="example-output-div margin-top" id="margin-top-10"><div class="block
      is-pink">First item</div><div class="block is-alpha"><strong>Target </strong><div
      class="box is-plum"></div></div><div class="block is-yellow">Third item</div></div>
- title: margin
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#margin-top"
    data-property-name="margin-top">margin-top</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#margin-right" data-property-name="margin-right">margin-right</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#margin-bottom"
    data-property-name="margin-bottom">margin-bottom</a></code> and <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#margin-left" data-property-name="margin-left">margin-left</a></code>.</p>
  styles:
  - ".margin { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding:
    0; }"
  - ".margin .block { border-radius: 0; }.margin .square { align-items: center;border-radius:
    0;display: flex;height: auto;justify-content: center;width: auto; }.margin .container
    { align-items: stretch;display: flex; }.margin .block.is-alpha { flex-grow: 1;flex-shrink:
    1; }"
  - "#margin-0 .box { display: none; }"
  - '#margin-30px .square.is-top { height: 30px; }#margin-30px .square.is-top:before
    { content: "30px"; }#margin-30px .square.is-bottom { height: 30px; }#margin-30px
    .square.is-bottom:before { content: "30px"; }#margin-30px .square.is-left:before
    { content: "30px";width: 30px; }#margin-30px .square.is-right:before { content:
    "30px";width: 30px; }'
  - '#margin-30px-60px .square.is-top { height: 30px; }#margin-30px-60px .square.is-top:before
    { content: "30px"; }#margin-30px-60px .square.is-bottom { height: 30px; }#margin-30px-60px
    .square.is-bottom:before { content: "30px"; }#margin-30px-60px .square.is-left:before
    { content: "60px";width: 60px; }#margin-30px-60px .square.is-right:before { content:
    "60px";width: 60px; }'
  - '#margin-30px-60px-45px .square.is-top { height: 30px; }#margin-30px-60px-45px
    .square.is-top:before { content: "30px"; }#margin-30px-60px-45px .square.is-bottom
    { height: 45px; }#margin-30px-60px-45px .square.is-bottom:before { content: "45px";
    }#margin-30px-60px-45px .square.is-left:before { content: "60px";width: 60px;
    }#margin-30px-60px-45px .square.is-right:before { content: "60px";width: 60px;
    }'
  - '#margin-30px-60px-45px-85px .square.is-top { height: 30px; }#margin-30px-60px-45px-85px
    .square.is-top:before { content: "30px"; }#margin-30px-60px-45px-85px .square.is-bottom
    { height: 45px; }#margin-30px-60px-45px-85px .square.is-bottom:before { content:
    "45px"; }#margin-30px-60px-45px-85px .square.is-left:before { content: "85px";width:
    85px; }#margin-30px-60px-45px-85px .square.is-right:before { content: "60px";width:
    60px; }'
  actions: []
  examples:
  - is_default: true
    title: 'margin: 0;'
    description: "<p>Removes all margins.</p>"
    output: <div class="example-output-div margin" id="margin-0"><div class="block
      is-pink">First item</div><div class="square is-top"></div><div class="container"><div
      class="square is-left"></div><div class="block is-alpha"><strong>Target </strong></div><div
      class="square is-right"></div></div><div class="square is-bottom"></div><div
      class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'margin: 30px;'
    description: "<p>When using <strong>1</strong> value, the margin is set for <strong>all
      4 sides</strong>.</p>"
    output: <div class="example-output-div margin" id="margin-30px"><div class="block
      is-pink">First item</div><div class="square is-top"></div><div class="container"><div
      class="square is-left"></div><div class="block is-alpha"><strong>Target </strong></div><div
      class="square is-right"></div></div><div class="square is-bottom"></div><div
      class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'margin: 30px 60px;'
    description: "<p>When using <strong>2</strong> values:</p> <ul><li>the <strong>first</strong>
      value is for <strong>top/bottom</strong></li><li>the <strong>second</strong>
      value is for <strong>right/left</strong></li></ul><p>To remember the <strong>order</strong>
      think about the values you <strong>haven't defined</strong>.</p> <p>If you enter
      <strong>2</strong> values (top/right), you <em>omit</em> setting bottom and
      left. Because bottom is the vertical counterpart of top, it will use top’s value.
      And because left is the horizontal counterpart of right, it will use right’s
      value.</p>"
    output: <div class="example-output-div margin" id="margin-30px-60px"><div class="block
      is-pink">First item</div><div class="square is-top"></div><div class="container"><div
      class="square is-left"></div><div class="block is-alpha"><strong>Target </strong></div><div
      class="square is-right"></div></div><div class="square is-bottom"></div><div
      class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'margin: 30px 60px 45px;'
    description: "<p>When using <strong>3</strong> values:</p> <ul><li>the <strong>first</strong>
      value is for <strong>top</strong></li><li>the <strong>second</strong> value
      is for <strong>right/left</strong></li><li>the <strong>third</strong> value
      is for <strong>bottom</strong></li></ul><p>To remember the <strong>order</strong>
      think about the values you <strong>haven't defined</strong>.</p> <p>If you enter
      <strong>3</strong> values (top/right/bottom), you omit setting left. As right’s
      counterpart, it will use its value.</p>"
    output: <div class="example-output-div margin" id="margin-30px-60px-45px"><div
      class="block is-pink">First item</div><div class="square is-top"></div><div
      class="container"><div class="square is-left"></div><div class="block is-alpha"><strong>Target
      </strong></div><div class="square is-right"></div></div><div class="square is-bottom"></div><div
      class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'margin: 30px 60px 45px 85px;'
    description: "<p>When using <strong>4</strong> values:</p> <ul><li>the <strong>first</strong>
      value is for <strong>top</strong></li><li>the <strong>second</strong> value
      is for <strong>right</strong></li><li>the <strong>third</strong> value is for
      <strong>bottom</strong></li><li>the <strong>fourth</strong> value is for <strong>left</strong></li></ul><p>To
      remember the <strong>order</strong>, start at the <strong>top</strong> and go
      <strong>clockwise</strong>.</p>"
    output: <div class="example-output-div margin" id="margin-30px-60px-45px-85px"><div
      class="block is-pink">First item</div><div class="square is-top"></div><div
      class="container"><div class="square is-left"></div><div class="block is-alpha"><strong>Target
      </strong></div><div class="square is-right"></div></div><div class="square is-bottom"></div><div
      class="block is-yellow">Third item</div></div>
- title: max-height
  is_shorthand: false
  description: "<p>Defines the maximum height the element can be.</p>"
  styles:
  - ".max-height { max-width: 400px; }"
  - "#max-height-100px .block { max-height: 100px; }"
  actions: []
  examples:
  - is_default: true
    title: 'max-height: none;'
    description: "<p>The element has <strong>no limit</strong> in terms of height.</p>"
    output: <div class="example-output-div max-height" id="max-height-none"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'max-height: 2000px;'
    description: "<p>You can use <strong>numeric values</strong> like <strong>pixels</strong>,
      <strong>(r)em</strong>, <strong>percentages</strong>...</p> <p>If the <em>maximum</em>
      height is <strong>larger</strong> than the element's <em>actual</em> height,
      the max height has <strong>no effect</strong>.</p>"
    output: <div class="example-output-div max-height" id="max-height-2000px"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum
      maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'max-height: 100px;'
    description: <p>If the content does not fit within the maximum height, it will
      <strong>overflow</strong>. How the container will handle this overflowing content
      is defined by the <code class="shorthand"><a href="http://cssreference.io/#overflow">overflow</a></code>
      property.</p>
    output: <div class="example-output-div max-height" id="max-height-100px"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
- title: max-width
  is_shorthand: false
  description: "<p>Defines the maximum width the element can be.</p>"
  styles:
  - "#max-width-150px .block { max-width: 150px; }"
  actions: []
  examples:
  - is_default: true
    title: 'max-width: none;'
    description: "<p>The element has <strong>no limit</strong> in terms of width.</p>"
    output: <div class="example-output-div max-width" id="max-width-none"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'max-width: 2000px;'
    description: "<p>You can use <strong>numeric values</strong> like <strong>pixels</strong>,
      <strong>(r)em</strong>, <strong>percentages</strong>...</p> <p>If the <em>maximum</em>
      width is <strong>larger</strong> than the element's <em>actual</em> width, the
      max width has <strong>no effect</strong>.</p>"
    output: <div class="example-output-div max-width" id="max-width-2000px"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'max-width: 150px;'
    description: "<p>If the content does not fit within the maximum width, it will
      automatically change the <strong>height</strong> of the element to accomodate
      for the wrapping of the content.</p>"
    output: <div class="example-output-div max-width" id="max-width-150px"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
- title: min-height
  is_shorthand: false
  description: "<p>Defines the minimum height of the element.</p>"
  styles:
  - ".min-height .block { max-width: 400px; }"
  - "#min-height-200px .block { min-height: 200px; }"
  - "#min-height-5px .block { min-height: 5px; }"
  actions: []
  examples:
  - is_default: true
    title: 'min-height: 0;'
    description: "<p>The element has <strong>no minimum</strong> height.</p>"
    output: <div class="example-output-div min-height" id="min-height-0"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'min-height: 200px;'
    description: "<p>You can use <strong>numeric values</strong> like <strong>pixels</strong>,
      <strong>(r)em</strong>, <strong>percentages</strong>...</p> <p>If the <em>minimum</em>
      height is <strong>larger</strong> than the element's <em>actual</em> height,
      the min height will be applied.</p>"
    output: <div class="example-output-div min-height" id="min-height-200px"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
  - is_default: false
    title: 'min-height: 5px;'
    description: "<p>If the <em>minimum</em> height is <strong>smaller</strong> than
      the element's <em>actual</em> height, the min height has <strong>no effect</strong>.</p>"
    output: <div class="example-output-div min-height" id="min-height-5px"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum minimus,
      augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p></div>
- title: min-width
  is_shorthand: false
  description: "<p>Defines the minimum width of the element.</p>"
  styles:
  - ".min-width .block { display: inline-block;vertical-align: top; }"
  - "#min-width-300px .block { min-width: 300px; }"
  - "#min-width-5px .block { min-width: 5px; }"
  actions: []
  examples:
  - is_default: true
    title: 'min-width: 0;'
    description: "<p>The element has <strong>no minimum</strong> width.</p>"
    output: <div class="example-output-div min-width" id="min-width-0"><p class="block
      is-alpha">Hello world</p></div>
  - is_default: false
    title: 'min-width: 300px;'
    description: "<p>You can use <strong>numeric values</strong> like <strong>pixels</strong>,
      <strong>(r)em</strong>, <strong>percentages</strong>...</p> <p>If the <em>minimum</em>
      width is <strong>larger</strong> than the element's <em>actual</em> width, the
      min width will be applied.</p>"
    output: <div class="example-output-div min-width" id="min-width-300px"><p class="block
      is-alpha">Hello world</p></div>
  - is_default: false
    title: 'min-width: 5px;'
    description: "<p>If the <em>minimum</em> width is <strong>smaller</strong> than
      the element's <em>actual</em> width, the min width has <strong>no effect</strong>.</p>"
    output: <div class="example-output-div min-width" id="min-width-5px"><p class="block
      is-alpha">Hello world</p></div>
- title: mix-blend-mode
  is_shorthand: false
  description: "<p>Defines how the element should <strong>blend</strong> with the
    background.</p>"
  styles:
  - ".mix-blend-mode { background: #310736;display: flex;padding: 1em; }"
  - "#mix-blend-mode-multiply .block { mix-blend-mode: multiply; }"
  - "#mix-blend-mode-screen .block { mix-blend-mode: screen; }"
  - "#mix-blend-mode-overlay .block { mix-blend-mode: overlay; }"
  - "#mix-blend-mode-darken .block { mix-blend-mode: darken; }"
  - "#mix-blend-mode-lighten .block { mix-blend-mode: lighten; }"
  - "#mix-blend-mode-color-dodge .block { mix-blend-mode: color-dodge; }"
  - "#mix-blend-mode-color-burn .block { mix-blend-mode: color-burn; }"
  - "#mix-blend-mode-hard-light .block { mix-blend-mode: hard-light; }"
  - "#mix-blend-mode-soft-light .block { mix-blend-mode: soft-light; }"
  - "#mix-blend-mode-difference .block { mix-blend-mode: difference; }"
  - "#mix-blend-mode-exclusion .block { mix-blend-mode: exclusion; }"
  - "#mix-blend-mode-hue .block { mix-blend-mode: hue; }"
  - "#mix-blend-mode-saturation .block { mix-blend-mode: saturation; }"
  - "#mix-blend-mode-color .block { mix-blend-mode: color; }"
  - "#mix-blend-mode-luminosity .block { mix-blend-mode: luminosity; }"
  actions: []
  examples:
  - is_default: true
    title: 'mix-blend-mode: normal;'
    description: "<p>The element does <strong>not</strong> blend.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-normal"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: multiply;'
    description: "<p>The element uses the <strong>multiply</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-multiply"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: screen;'
    description: "<p>The element uses the <strong>screen</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-screen"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: overlay;'
    description: "<p>The element uses the <strong>overlay</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-overlay"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: darken;'
    description: "<p>The element uses the <strong>darken</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-darken"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: lighten;'
    description: "<p>The element uses the <strong>lighten</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-lighten"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: color-dodge;'
    description: "<p>The element uses the <strong>color-dodge</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-color-dodge"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: color-burn;'
    description: "<p>The element uses the <strong>color-burn</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-color-burn"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: hard-light;'
    description: "<p>The element uses the <strong>hard-light</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-hard-light"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: soft-light;'
    description: "<p>The element uses the <strong>soft-light</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-soft-light"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: difference;'
    description: "<p>The element uses the <strong>difference</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-difference"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: exclusion;'
    description: "<p>The element uses the <strong>exclusion</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-exclusion"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: hue;'
    description: "<p>The element uses the <strong>hue</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-hue"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: saturation;'
    description: "<p>The element uses the <strong>saturation</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-saturation"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: color;'
    description: "<p>The element uses the <strong>color</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-color"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
  - is_default: false
    title: 'mix-blend-mode: luminosity;'
    description: "<p>The element uses the <strong>luminosity</strong> blend mode.</p>"
    output: <div class="example-output-div mix-blend-mode" id="mix-blend-mode-luminosity"><p
      class="block is-alpha">Hello world</p><p class="block is-pink">Hello world</p><p
      class="block is-yellow">Hello world</p></div>
- title: opacity
  is_shorthand: false
  description: "<p>Defines how opaque the element is.</p>"
  styles:
  - ".opacity { background: #310736;padding: 1em; }"
  - "#opacity-0 .block { opacity: 0; }"
  - "#opacity-03 .block { opacity: 0.3; }"
  actions: []
  examples:
  - is_default: true
    title: 'opacity: 1;'
    description: "<p>The element is <strong>fully opaque</strong>.</p>"
    output: <div class="example-output-div opacity" id="opacity-1"><p class="block
      is-alpha">Hello world</p></div>
  - is_default: false
    title: 'opacity: 0;'
    description: "<p>The element is <strong>fully transparent</strong>.</p>"
    output: <div class="example-output-div opacity" id="opacity-0"><p class="block
      is-alpha">Hello world</p></div>
  - is_default: false
    title: 'opacity: 0.3;'
    description: "<p>Any value between <strong>0</strong> (zero) and <strong>1</strong>
      (one) will make the element <strong>semi transparent</strong>.</p>"
    output: <div class="example-output-div opacity" id="opacity-03"><p class="block
      is-alpha">Hello world</p></div>
- title: order
  is_shorthand: false
  description: "<p>Defines the order of a flexbox item.</p>"
  styles:
  - ".order { display: flex; }"
  - ".order .block { flex-grow: 1;flex-shrink: 1; }.order em { font-style: normal;
    }"
  - "#order-1 .block.is-pink { order: 1; }"
  - "#order--1 .block.is-pink { order: -1; }"
  - "#order-9 .block.is-alpha { order: 13; }#order-9 .block.is-beta { order: -7; }#order-9
    .block.is-pink { order: 9; }#order-9 .block.is-yellow { order: 5; }"
  actions: []
  examples:
  - is_default: true
    title: 'order: 0;'
    description: "<p>The order of the flexbox items is the one defined in the <strong>HTML
      code</strong>.</p>"
    output: '<div class="example-output-div order" id="order-0"><p class="block is-alpha">One<br><em>order:
      0</em></p><p class="block is-beta">Two<br><em>order: 0</em></p><p class="block
      is-pink"><strong>Target<br><em>order: 0</em></strong></p><p class="block is-yellow">Four<br><em>order:
      0</em></p></div>'
  - is_default: false
    title: 'order: 1;'
    description: "<p>The order is <strong>relative</strong> to the flexbox item's
      <em>siblings</em>. The final order is defined when all individual flexbox item
      order values are taken into account.</p>"
    output: '<div class="example-output-div order" id="order-1"><p class="block is-alpha">One<br><em>order:
      0</em></p><p class="block is-beta">Two<br><em>order: 0</em></p><p class="block
      is-pink"><strong>Target<br><em>order: 1</em></strong></p><p class="block is-yellow">Four<br><em>order:
      0</em></p></div>'
  - is_default: false
    title: 'order: -1;'
    description: "<p>You can use <strong>negative</strong> values.</p>"
    output: '<div class="example-output-div order" id="order--1"><p class="block
      is-alpha">One<br><em>order: 0</em></p><p class="block is-beta">Two<br><em>order:
      0</em></p><p class="block is-pink"><strong>Target<br><em>order: -1</em></strong></p><p
      class="block is-yellow">Four<br><em>order: 0</em></p></div>'
  - is_default: false
    title: 'order: 9;'
    description: "<p>You can set a <strong>different</strong> value for each flexbox
      item.</p>"
    output: '<div class="example-output-div order" id="order-9"><p class="block is-alpha">One<br><em>order:
      13</em></p><p class="block is-beta">Two<br><em>order: -7</em></p><p class="block
      is-pink"><strong>Target<br><em>order: 9</em></strong></p><p class="block is-yellow">Four<br><em>order:
      5</em></p></div>'
- title: outline-color
  is_shorthand: false
  description: "<p>Defines the color of the element's outlines.</p>"
  styles:
  - ".outline-color { outline-style: solid;outline-width: 4px; }"
  - "#outline-color-transparent{ outline-color:transparent;}"
  - "#outline-color-red{ outline-color:red;}"
  - "#outline-color-05ffb0{ outline-color:#05ffb0;}"
  - "#outline-color-rgb50-115-220{ outline-color:rgb(50, 115, 220);}"
  - "#outline-color-rgba50-115-220-03{ outline-color:rgba(50, 115, 220, 0.3);}"
  - "#outline-color-hsl14-100-53{ outline-color:hsl(14, 100%, 53%);}"
  - "#outline-color-hsla14-100-53-06{ outline-color:hsla(14, 100%, 53%, 0.6);}"
  actions: []
  examples:
  - is_default: true
    title: 'outline-color: transparent;'
    description: "<p>Applies a <strong>transparent</strong> color to the outlines.
      The outlines will still take up the <em>space</em> defined by the <code>outline-width</code>
      value.</p>"
    output: <div class="example-output-div outline-color" id="outline-color-transparent">Hello
      world</div>
  - is_default: false
    title: 'outline-color: red;'
    description: <p>You can use one of the <strong><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">140+
      color names</a></strong>.</p>
    output: <div class="example-output-div outline-color" id="outline-color-red">Hello
      world</div>
  - is_default: false
    title: 'outline-color: #05ffb0;'
    description: "<p>You can use <strong>hexadecimal</strong> color codes.</p>"
    output: <div class="example-output-div outline-color" id="outline-color-05ffb0">Hello
      world</div>
  - is_default: false
    title: 'outline-color: rgb(50, 115, 220);'
    description: "<p>You can use <strong>rgb()</strong> color codes:</p> <ul><li>the
      first value is for <code>red</code></li><li>the second value is for <code>green</code></li><li>the
      third value is for <code>blue</code></li></ul><p>Each of them can have a value
      between <strong>0</strong> and <strong>255</strong>.</p>"
    output: <div class="example-output-div outline-color" id="outline-color-rgb50-115-220">Hello
      world</div>
  - is_default: false
    title: 'outline-color: rgba(50, 115, 220, 0.3);'
    description: "<p>You can use <strong>rgba()</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>rgb</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div outline-color" id="outline-color-rgba50-115-220-03">Hello
      world</div>
  - is_default: false
    title: 'outline-color: hsl(14, 100%, 53%);'
    description: "<p>You can use <strong>hsl()</strong> color codes:</p> <ul><li>the
      first value is for <code>hue</code> and can go from <strong>0</strong> to <strong>359</strong></li><li>the
      second value is for <code>saturation</code> and go from <strong>0%</strong>
      to <strong>100%</strong></li><li>the third value is for <code>luminosity</code>
      and go from <strong>0%</strong> to <strong>100%</strong></li></ul>"
    output: <div class="example-output-div outline-color" id="outline-color-hsl14-100-53">Hello
      world</div>
  - is_default: false
    title: 'outline-color: hsla(14, 100%, 53%, 0.6);'
    description: "<p>You can use <strong>hsl()a</strong> color codes:</p> <ul><li>the
      first 3 values are for <code>hsl</code></li><li>the 4th value is for the <code>alpha</code>
      channel and defines the opacity of the color</li></ul><p>The alpha value can
      go from zero <strong>0</strong> (transparent) to one <strong>1</strong> (opaque).</p>"
    output: <div class="example-output-div outline-color" id="outline-color-hsla14-100-53-06">Hello
      world</div>
- title: outline-style
  is_shorthand: false
  description: "<p>Defines the style of the element's outlines.</p>"
  styles:
  - ".outline-style { padding: 1em;outline-width: 4px; }"
  - "#outline-style-none{ outline-style:none;}"
  - "#outline-style-dotted{ outline-style:dotted;}"
  - "#outline-style-dashed{ outline-style:dashed;}"
  - "#outline-style-solid{ outline-style:solid;}"
  - "#outline-style-double{ outline-style:double;}"
  - "#outline-style-groove{ outline-style:groove;}"
  actions: []
  examples:
  - is_default: true
    title: 'outline-style: none;'
    description: "<p>Removes the element's outlines.</p>"
    output: <div class="example-output-div outline-style" id="outline-style-none">Hello
      world</div>
  - is_default: false
    title: 'outline-style: dotted;'
    description: "<p>Turns the outline into a sequence of dots.</p>"
    output: <div class="example-output-div outline-style" id="outline-style-dotted">Hello
      world</div>
  - is_default: false
    title: 'outline-style: dashed;'
    description: "<p>Turns the outline into a sequence of dashes.</p>"
    output: <div class="example-output-div outline-style" id="outline-style-dashed">Hello
      world</div>
  - is_default: false
    title: 'outline-style: solid;'
    description: "<p>Turns the outline into a solid line.</p>"
    output: <div class="example-output-div outline-style" id="outline-style-solid">Hello
      world</div>
  - is_default: false
    title: 'outline-style: double;'
    description: "<p>Splits the outline into two lines.</p>"
    output: <div class="example-output-div outline-style" id="outline-style-double">Hello
      world</div>
  - is_default: false
    title: 'outline-style: groove;'
    description: "<p>Sets an inset style to the outlines.</p>"
    output: <div class="example-output-div outline-style" id="outline-style-groove">Hello
      world</div>
- title: outline-width
  is_shorthand: false
  description: "<p>Defines the width of the element's outlines.</p>"
  styles:
  - ".outline-width { outline-style: solid; }"
  - "#outline-width-medium{ outline-width:medium;}"
  - "#outline-width-1px{ outline-width:1px;}"
  actions: []
  examples:
  - is_default: true
    title: 'outline-width: medium;'
    description: "<p>Defines the width of all outlines to <strong>medium</strong>.</p>"
    output: <div class="example-output-div outline-width" id="outline-width-medium">Hello
      world</div>
  - is_default: false
    title: 'outline-width: 1px;'
    description: "<p>Defines the width of all outlines to <strong>1px</strong>.</p>"
    output: <div class="example-output-div outline-width" id="outline-width-1px">Hello
      world</div>
- title: outline
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#outline-width"
    data-property-name="outline-width">outline-width</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#outline-style" data-property-name="outline-style">outline-style</a></code>
    and <code class="shorthand"><a class="hash" href="http://localhost:4000/#outline-color"
    data-property-name="outline-color">outline-color</a></code>.</p>
  styles:
  - "#outline-4px-dotted-red{ outline:4px dotted red;}"
  - "#outline-2px-solid{ outline:2px solid;}"
  actions: []
  examples:
  - is_default: false
    title: 'outline: 4px dotted red;'
    description: "<p>The <strong>order</strong> is important:</p> <ul><li>width</li><li>style</li><li>color</li></ul>"
    output: <div class="example-output-div outline" id="outline-4px-dotted-red">Hello
      world</div>
  - is_default: false
    title: 'outline: 2px solid;'
    description: "<p>Only the <em>color</em> is <strong>optional</strong>. If you
      omit it, the color applied will be the color of the <strong>text</strong>.</p>"
    output: <div class="example-output-div outline" id="outline-2px-solid">Hello
      world</div>
- title: overflow-wrap
  is_shorthand: false
  description: "<p>Defines if words should break when reaching the end of a line.</p>"
  styles:
  - '.overflow-wrap { font-family: "Source Code Pro", monospace;width: 18em; }'
  - "#overflow-wrap-normal{ overflow-wrap:normal;}"
  - "#overflow-wrap-break-word{ overflow-wrap:break-word;}"
  actions: []
  examples:
  - is_default: true
    title: 'overflow-wrap: normal;'
    description: "<p>Words with no space will <strong>not</strong> break. Sequences
      of uninterrupted characters will be displayed on a single line.</p>"
    output: <div class="example-output-div overflow-wrap block is-alpha" id="overflow-wrap-normal">Thequickbrownfoxjumpsoverthelazydog</div>
  - is_default: false
    title: 'overflow-wrap: break-word;'
    description: "<p>Words with no space will <strong>break</strong> as soon as they
      reach the end of a line.</p>"
    output: <div class="example-output-div overflow-wrap block is-alpha" id="overflow-wrap-break-word">Thequickbrownfoxjumpsoverthelazydog</div>
- title: overflow-x
  is_shorthand: false
  description: "<p>Defines how overflowing content on the horizontal axis is displayed.</p>"
  styles:
  - ".overflow-x .block { white-space: nowrap;width: 200px; }"
  - "#overflow-x-visible .block { overflow-x: visible; }"
  - "#overflow-x-hidden .block { overflow-x: hidden; }"
  - "#overflow-x-scroll .block { overflow-x: scroll; }"
  - "#overflow-x-auto .block { overflow-x: auto; }"
  actions: []
  examples:
  - is_default: true
    title: 'overflow-x: visible;'
    description: "<p>The overflowing content is <strong>visible</strong>, while the
      element itself stays at the specified width.</p>"
    output: <div class="example-output-div overflow-x" id="overflow-x-visible"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
  - is_default: false
    title: 'overflow-x: hidden;'
    description: "<p>The overflowing content is <strong>hidden</strong> and can not
      be accessed.</p>"
    output: <div class="example-output-div overflow-x" id="overflow-x-hidden"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
  - is_default: false
    title: 'overflow-x: scroll;'
    description: "<p>The overflowing content is accessible thanks to a <strong>horizontal
      scrollbar</strong>.</p>"
    output: <div class="example-output-div overflow-x" id="overflow-x-scroll"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
  - is_default: false
    title: 'overflow-x: auto;'
    description: "<p>The browser decides whether to display a horizontal scrollbar
      or not.</p>"
    output: <div class="example-output-div overflow-x" id="overflow-x-auto"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
- title: overflow-y
  is_shorthand: false
  description: "<p>Defines how overflowing content on the vertical axis is displayed.</p>"
  styles:
  - ".overflow-y .block { height: 80px;width: 240px; }"
  - "#overflow-y-visible .block { overflow-y: visible; }"
  - "#overflow-y-hidden .block { overflow-y: hidden; }"
  - "#overflow-y-scroll .block { overflow-y: scroll; }"
  - "#overflow-y-auto .block { overflow-y: auto; }"
  actions: []
  examples:
  - is_default: true
    title: 'overflow-y: visible;'
    description: "<p>The overflowing content is <strong>visible</strong>, while the
      element itself stays at the specified height.</p>"
    output: <div class="example-output-div overflow-y" id="overflow-y-visible"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut.</p></div>
  - is_default: false
    title: 'overflow-y: hidden;'
    description: "<p>The overflowing content is <strong>hidden</strong> and can not
      be accessed.</p>"
    output: <div class="example-output-div overflow-y" id="overflow-y-hidden"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut.</p></div>
  - is_default: false
    title: 'overflow-y: scroll;'
    description: "<p>The overflowing content is accessible thanks to a <strong>vertical
      scrollbar</strong>.</p>"
    output: <div class="example-output-div overflow-y" id="overflow-y-scroll"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut.</p></div>
  - is_default: false
    title: 'overflow-y: auto;'
    description: "<p>The browser decides whether to display a vertical scrollbar or
      not.</p>"
    output: <div class="example-output-div overflow-y" id="overflow-y-auto"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut.</p></div>
- title: overflow
  is_shorthand: false
  description: "<p>Defines how overflowing content on both horizontal and vertical
    axis is displayed.</p>"
  styles:
  - ".overflow { height: 120px;overflow: hidden;padding: 0; }"
  - ".overflow .block { height: 80px;width: 240px; }.overflow .block span { display:
    block;white-space: nowrap; }"
  - "#overflow-visible .block { overflow: visible; }"
  - "#overflow-hidden .block { overflow: hidden; }"
  - "#overflow-scroll .block { overflow: scroll; }"
  - "#overflow-auto .block { overflow: auto; }"
  actions: []
  examples:
  - is_default: true
    title: 'overflow: visible;'
    description: "<p>The overflowing content is <strong>visible</strong>, while the
      element itself stays at the specified height.</p>"
    output: <div class="example-output-div overflow" id="overflow-visible"><p class="block
      is-alpha"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span>Etiam
      semper diam at erat pulvinar, at pulvinar felis blandit.</span><span>Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</span><span>Maecenas
      imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</span><span>Pellentesque
      interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
      felis neque sit amet erat.</span></p></div>
  - is_default: false
    title: 'overflow: hidden;'
    description: "<p>The overflowing content is <strong>hidden</strong> and can not
      be accessed.</p>"
    output: <div class="example-output-div overflow" id="overflow-hidden"><p class="block
      is-alpha"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span>Etiam
      semper diam at erat pulvinar, at pulvinar felis blandit.</span><span>Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</span><span>Maecenas
      imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</span><span>Pellentesque
      interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
      felis neque sit amet erat.</span></p></div>
  - is_default: false
    title: 'overflow: scroll;'
    description: "<p>The overflowing content is accessible thanks to a <strong>vertical
      scrollbar</strong>.</p>"
    output: <div class="example-output-div overflow" id="overflow-scroll"><p class="block
      is-alpha"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span>Etiam
      semper diam at erat pulvinar, at pulvinar felis blandit.</span><span>Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</span><span>Maecenas
      imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</span><span>Pellentesque
      interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
      felis neque sit amet erat.</span></p></div>
  - is_default: false
    title: 'overflow: auto;'
    description: "<p>The browser decides whether to display a vertical scrollbar or
      not.</p>"
    output: <div class="example-output-div overflow" id="overflow-auto"><p class="block
      is-alpha"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><span>Etiam
      semper diam at erat pulvinar, at pulvinar felis blandit.</span><span>Vestibulum
      volutpat tellus diam, consequat gravida libero rhoncus ut.</span><span>Maecenas
      imperdiet felis nisi, fringilla luctus felis hendrerit sit amet.</span><span>Pellentesque
      interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin
      felis neque sit amet erat.</span></p></div>
- title: padding-bottom
  is_shorthand: false
  description: "<p>Defines the space <strong>inside</strong> the element, on the <strong>bottom</strong>
    side.</p>"
  styles:
  - ".padding-bottom { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding:
    0; }"
  - ".padding-bottom .block { border-radius: 0;padding: 0; }.padding-bottom .block.is-alpha
    { position: relative; }.padding-bottom .box { bottom: 0;left: 0;position: absolute;right:
    0; }"
  - "#padding-bottom-0 .box { display: none; }"
  - '#padding-bottom-50px .block.is-alpha { padding-bottom: 50px; }#padding-bottom-50px
    .box { height: 50px; }#padding-bottom-50px .box:before { content: "50px"; }'
  - '#padding-bottom-7em .block.is-alpha { padding-bottom: 7em; }#padding-bottom-7em
    .box { height: 7em; }#padding-bottom-7em .box:before { content: "7em"; }'
  - '#padding-bottom-30 .block.is-alpha { padding-bottom: 30%; }#padding-bottom-30
    .box { bottom: 1.2em;height: 60px;transform: rotate(-90deg) translateY(60px);transform-origin:
    bottom left;width: 30%; }#padding-bottom-30 .box:before { content: "30%"; }'
  actions: []
  examples:
  - is_default: true
    title: 'padding-bottom: 0;'
    description: "<p>Removes any padding on the bottom.</p>"
    output: <div class="example-output-div padding-bottom" id="padding-bottom-0"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-bottom: 50px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div padding-bottom" id="padding-bottom-50px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-bottom: 7em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div padding-bottom" id="padding-bottom-7em"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-bottom: 30%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>element</em>.</p>"
    output: <div class="example-output-div padding-bottom" id="padding-bottom-30"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong></div><div class="block is-yellow">Third item</div><div class="box
      is-plum"></div></div>
- title: padding-left
  is_shorthand: false
  description: "<p>Defines the space <strong>inside</strong> the element, on the <strong>left</strong>
    side.</p>"
  styles:
  - ".padding-left { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding:
    0; }"
  - ".padding-left .block { border-radius: 0;padding-left: 0; }.padding-left .block.is-alpha
    { position: relative; }.padding-left .box { bottom: 0;left: 0;position: absolute;top:
    0; }"
  - "#padding-left-0 .box { display: none; }"
  - '#padding-left-50px .block.is-alpha { padding-left: 50px; }#padding-left-50px
    .box { width: 50px; }#padding-left-50px .box:before { content: "50px"; }'
  - '#padding-left-7em .block.is-alpha { padding-left: 7em; }#padding-left-7em .box
    { width: 7em; }#padding-left-7em .box:before { content: "7em"; }'
  - '#padding-left-30 .block.is-alpha { padding-left: 30%; }#padding-left-30 .box
    { width: 30%; }#padding-left-30 .box:before { content: "30%"; }'
  actions: []
  examples:
  - is_default: true
    title: 'padding-left: 0;'
    description: "<p>Removes any padding on the left.</p>"
    output: <div class="example-output-div padding-left" id="padding-left-0"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-left: 50px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div padding-left" id="padding-left-50px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-left: 7em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div padding-left" id="padding-left-7em"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-left: 30%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>element</em>.</p>"
    output: <div class="example-output-div padding-left" id="padding-left-30"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
- title: padding-right
  is_shorthand: false
  description: "<p>Defines the space <strong>inside</strong> the element, on the <strong>right</strong>
    side.</p>"
  styles:
  - ".padding-right { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding:
    0; }"
  - ".padding-right .block { border-radius: 0;padding-right: 0;text-align: right;
    }.padding-right .block.is-alpha { position: relative; }.padding-right .box { bottom:
    0;right: 0;position: absolute;top: 0; }"
  - "#padding-right-0 .box { display: none; }"
  - '#padding-right-50px .block.is-alpha { padding-right: 50px; }#padding-right-50px
    .box { width: 50px; }#padding-right-50px .box:before { content: "50px"; }'
  - '#padding-right-7em .block.is-alpha { padding-right: 7em; }#padding-right-7em
    .box { width: 7em; }#padding-right-7em .box:before { content: "7em"; }'
  - '#padding-right-30 .block.is-alpha { padding-right: 30%; }#padding-right-30 .box
    { width: 30%; }#padding-right-30 .box:before { content: "30%"; }'
  actions: []
  examples:
  - is_default: true
    title: 'padding-right: 0;'
    description: "<p>Removes any padding on the right.</p>"
    output: <div class="example-output-div padding-right" id="padding-right-0"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-right: 50px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div padding-right" id="padding-right-50px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-right: 7em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div padding-right" id="padding-right-7em"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-right: 30%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>element</em>.</p>"
    output: <div class="example-output-div padding-right" id="padding-right-30"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
- title: padding-top
  is_shorthand: false
  description: "<p>Defines the space <strong>inside</strong> the element, on the <strong>top</strong>
    side.</p>"
  styles:
  - ".padding-top { background: hsl(0, 0%, 80%);border: 1em solid hsl(0, 0%, 80%);padding:
    0; }"
  - ".padding-top .block { border-radius: 0;padding: 0; }.padding-top .block.is-alpha
    { position: relative; }.padding-top .box { left: 0;position: absolute;right: 0;top:
    0; }"
  - "#padding-top-0 .box { display: none; }"
  - '#padding-top-50px .block.is-alpha { padding-top: 50px; }#padding-top-50px .box
    { height: 50px; }#padding-top-50px .box:before { content: "50px"; }'
  - '#padding-top-7em .block.is-alpha { padding-top: 7em; }#padding-top-7em .box {
    height: 7em; }#padding-top-7em .box:before { content: "7em"; }'
  - '#padding-top-30 .block.is-alpha { padding-top: 30%; }#padding-top-30 .box { height:
    60px;top: 1.2em;transform: rotate(-90deg) translateX(-100%);transform-origin:
    top left;width: 30%; }#padding-top-30 .box:before { content: "30%"; }'
  actions: []
  examples:
  - is_default: true
    title: 'padding-top: 0;'
    description: "<p>Removes any padding on the top.</p>"
    output: <div class="example-output-div padding-top" id="padding-top-0"><div class="block
      is-pink">First item</div><div class="block is-alpha"><strong>Target </strong><div
      class="box is-plum"></div></div><div class="block is-yellow">Third item</div></div>
  - is_default: false
    title: 'padding-top: 50px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div padding-top" id="padding-top-50px"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-top: 7em;'
    description: "<p>You can use <strong>(r)em</strong> values.</p> <p>The value is
      <strong>relative</strong> to the font size:</p> <ul><li><strong>em</strong>:
      relative to the <em>element</em>'s current font size</li><li><strong>rem</strong>:
      relative to <code>&lt;html&gt;</code> the <em><strong>root</strong> element</em>'s
      font size</li></ul>"
    output: <div class="example-output-div padding-top" id="padding-top-7em"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong><div class="box is-plum"></div></div><div class="block is-yellow">Third
      item</div></div>
  - is_default: false
    title: 'padding-top: 30%;'
    description: "<p>You can use <strong>percentage</strong> values.<br>The percentage
      is based on the <em>width</em> of the <em>element</em>.</p>"
    output: <div class="example-output-div padding-top" id="padding-top-30"><div
      class="block is-pink">First item</div><div class="block is-alpha"><strong>Target
      </strong></div><div class="block is-yellow">Third item</div><div class="box
      is-plum"></div></div>
- title: padding
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#padding-top"
    data-property-name="padding-top">padding-top</a></code> <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#padding-right" data-property-name="padding-right">padding-right</a></code>
    <code class="shorthand"><a class="hash" href="http://localhost:4000/#padding-bottom"
    data-property-name="padding-bottom">padding-bottom</a></code> and <code class="shorthand"><a
    class="hash" href="http://localhost:4000/#padding-left" data-property-name="padding-left">padding-left</a></code>.</p>
  styles:
  - ".padding { background: #05ffb0;padding: 0; }"
  - ".padding .block { padding: 0; }.padding .square { align-items: center;background:
    rgba(0,0,0,0.3);border-radius: 0;display: flex;height: auto;justify-content: center;width:
    auto; }.padding .container { align-items: stretch;display: flex; }.padding .block.is-alpha
    { flex-grow: 1;flex-shrink: 1; }"
  - "#padding-0 .box { display: none; }"
  - '#padding-30px .square.is-top { height: 30px; }#padding-30px .square.is-top:before
    { content: "30px"; }#padding-30px .square.is-bottom { height: 30px; }#padding-30px
    .square.is-bottom:before { content: "30px"; }#padding-30px .square.is-left:before
    { content: "30px";width: 30px; }#padding-30px .square.is-right:before { content:
    "30px";width: 30px; }'
  - '#padding-30px-60px .square.is-top { height: 30px; }#padding-30px-60px .square.is-top:before
    { content: "30px"; }#padding-30px-60px .square.is-bottom { height: 30px; }#padding-30px-60px
    .square.is-bottom:before { content: "30px"; }#padding-30px-60px .square.is-left:before
    { content: "60px";width: 60px; }#padding-30px-60px .square.is-right:before { content:
    "60px";width: 60px; }'
  - '#padding-30px-60px-45px .square.is-top { height: 30px; }#padding-30px-60px-45px
    .square.is-top:before { content: "30px"; }#padding-30px-60px-45px .square.is-bottom
    { height: 45px; }#padding-30px-60px-45px .square.is-bottom:before { content: "45px";
    }#padding-30px-60px-45px .square.is-left:before { content: "60px";width: 60px;
    }#padding-30px-60px-45px .square.is-right:before { content: "60px";width: 60px;
    }'
  - '#padding-30px-60px-45px-85px .square.is-top { height: 30px; }#padding-30px-60px-45px-85px
    .square.is-top:before { content: "30px"; }#padding-30px-60px-45px-85px .square.is-bottom
    { height: 45px; }#padding-30px-60px-45px-85px .square.is-bottom:before { content:
    "45px"; }#padding-30px-60px-45px-85px .square.is-left:before { content: "85px";width:
    85px; }#padding-30px-60px-45px-85px .square.is-right:before { content: "60px";width:
    60px; }'
  actions: []
  examples:
  - is_default: true
    title: 'padding: 0;'
    description: "<p>Removes all paddings.</p>"
    output: <div class="example-output-div padding" id="padding-0"><div class="square
      is-top"></div><div class="container"><div class="square is-left"></div><div
      class="block is-alpha"><strong>Target </strong></div><div class="square is-right"></div></div><div
      class="square is-bottom"></div></div>
  - is_default: false
    title: 'padding: 30px;'
    description: "<p>When using <strong>1</strong> value, the padding is set for <strong>all
      4 sides</strong>.</p>"
    output: <div class="example-output-div padding" id="padding-30px"><div class="square
      is-top"></div><div class="container"><div class="square is-left"></div><div
      class="block is-alpha"><strong>Target </strong></div><div class="square is-right"></div></div><div
      class="square is-bottom"></div></div>
  - is_default: false
    title: 'padding: 30px 60px;'
    description: "<p>When using <strong>2</strong> values:</p> <ul><li>the <strong>first</strong>
      value is for <strong>top/bottom</strong></li><li>the <strong>second</strong>
      value is for <strong>right/left</strong></li></ul><p>To remember the <strong>order</strong>
      think about the values you <strong>haven't defined</strong>.</p> <p>If you enter
      <strong>2</strong> values (top/right), you <em>omit</em> setting bottom and
      left. Because bottom is the vertical counterpart of top, it will use top’s value.
      And because left is the horizontal counterpart of right, it will use right’s
      value.</p>"
    output: <div class="example-output-div padding" id="padding-30px-60px"><div class="square
      is-top"></div><div class="container"><div class="square is-left"></div><div
      class="block is-alpha"><strong>Target </strong></div><div class="square is-right"></div></div><div
      class="square is-bottom"></div></div>
  - is_default: false
    title: 'padding: 30px 60px 45px;'
    description: "<p>When using <strong>3</strong> values:</p> <ul><li>the <strong>first</strong>
      value is for <strong>top</strong></li><li>the <strong>second</strong> value
      is for <strong>right/left</strong></li><li>the <strong>third</strong> value
      is for <strong>bottom</strong></li></ul><p>To remember the <strong>order</strong>
      think about the values you <strong>haven't defined</strong>.</p> <p>If you enter
      <strong>3</strong> values (top/right/bottom), you omit setting left. As right’s
      counterpart, it will use its value.</p>"
    output: <div class="example-output-div padding" id="padding-30px-60px-45px"><div
      class="square is-top"></div><div class="container"><div class="square is-left"></div><div
      class="block is-alpha"><strong>Target </strong></div><div class="square is-right"></div></div><div
      class="square is-bottom"></div></div>
  - is_default: false
    title: 'padding: 30px 60px 45px 85px;'
    description: "<p>When using <strong>4</strong> values:</p> <ul><li>the <strong>first</strong>
      value is for <strong>top</strong></li><li>the <strong>second</strong> value
      is for <strong>right</strong></li><li>the <strong>third</strong> value is for
      <strong>bottom</strong></li><li>the <strong>fourth</strong> value is for <strong>left</strong></li></ul><p>To
      remember the <strong>order</strong>, start at the <strong>top</strong> and go
      <strong>clockwise</strong>.</p>"
    output: <div class="example-output-div padding" id="padding-30px-60px-45px-85px"><div
      class="square is-top"></div><div class="container"><div class="square is-left"></div><div
      class="block is-alpha"><strong>Target </strong></div><div class="square is-right"></div></div><div
      class="square is-bottom"></div></div>
- title: pointer-events
  is_shorthand: false
  description: "<p>Defines if the element reacts to pointer events or not.</p>"
  styles:
  - ".pointer-events .block.is-container { cursor: default;position: relative; }.pointer-events
    .block.is-alpha { cursor: pointer;opacity: 0.7;padding: 0.4em 0.5em;position:
    absolute; }.pointer-events .block.is-alpha:hover { background: #310736;color:
    #fff;opacity: 1; }"
  - "#pointer-events-auto{ pointer-events:auto;}"
  - "#pointer-events-none{ pointer-events:none;}"
  - "#pointer-events-none .block { pointer-events: none; }"
  actions: []
  examples:
  - is_default: true
    title: 'pointer-events: auto;'
    description: "<p>The element <strong>reacts</strong> to pointer events, like <code>:hover</code>
      or <code>click</code>.</p>"
    output: <div class="example-output-div pointer-events" id="pointer-events-auto"><div
      class="block is-container"><p class="block is-alpha">Hover me</p>Lorem ipsum
      dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
      at pulvinar felis blandit.</div></div>
  - is_default: false
    title: 'pointer-events: none;'
    description: "<p>The element does <strong>not</strong> react to pointer events,
      like <code>:hover</code> or <code>click</code>. As a result, elements that are
      <em>behind</em> are accessible.</p>"
    output: <div class="example-output-div pointer-events" id="pointer-events-none"><div
      class="block is-container"><p class="block is-alpha">Hover me</p>Lorem ipsum
      dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
      at pulvinar felis blandit.</div></div>
- title: position
  is_shorthand: false
  description: "<p>Defines the position behavior of the element.</p>"
  styles:
  - ".position { background: #310736;color: #fff;height: 200px;position: relative;
    }"
  - ".position .block.is-alpha { margin-top: 1em; }.position .block.is-pink { position:
    absolute;right: 5px;top: 5px; }"
  - "#position-relative .block.is-alpha { position: relative; }"
  - "#position-absolute .block.is-alpha { left: 0;margin-top: 0;position: absolute;top:
    0;width: 280px; }"
  - "#position-fixed.is-fixed .block.is-alpha { position: fixed;z-index: 10000; }"
  - "#position-fixed .block.is-alpha { left: auto;right: 0;margin-top: 0;position:
    absolute;top: 0;width: 280px; }"
  actions: []
  examples:
  - is_default: true
    title: 'position: static;'
    description: "<p>The element will remain in the <strong>natural flow</strong>
      of the page.</p> <p>As a result, it will <strong>not</strong> act as anchor
      point for the absolutely positioned yellow block.</p> <p>Also, it will <strong>not</strong>
      react to the following properties:</p> <ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul>"
    output: '<div class="example-output-div position" id="position-static"><p>Ancestor
      container</p><div class="block is-alpha"><strong>Target element<br>position:
      static</strong><div class="block is-pink">Child element<br>position: absolute<br>right:
      5px<br>top: 5px</div></div></div>'
  - is_default: false
    title: 'position: relative;'
    description: "<p>The element will remain in the <strong>natural flow</strong>
      of the page.</p> <p>It also makes the element <strong>positioned</strong>: it
      will act as an anchor point for the absolutely positioned yellow block.</p>
      <p>Also, it will <strong>react</strong> to the following properties:</p> <ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul>"
    output: '<div class="example-output-div position" id="position-relative"><p>Ancestor
      container</p><div class="block is-alpha"><strong>Target element<br>position:
      relative</strong><div class="block is-pink">Child element<br>position: absolute<br>right:
      5px<br>top: 5px</div></div></div>'
  - is_default: false
    title: 'position: absolute;'
    description: "<p>The element will <strong>not</strong> remain in the natural flow
      of the page. It will position itself according to the <strong>closest positioned
      ancestor</strong>.</p> <p>Because it's <strong>positioned</strong>, it will
      act as an anchor point for the absolutely positioned yellow block.</p> <p>Also,
      it will <strong>react</strong> to the following properties:</p> <ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul>"
    output: '<div class="example-output-div position" id="position-absolute"><p>Ancestor
      container</p><div class="block is-alpha"><strong>Target element<br>position:
      absolute<br>left: 0<br>top: 0</strong><div class="block is-pink">Child element<br>right:
      5px<br>top: 5px</div></div></div>'
  - is_default: false
    title: 'position: fixed;'
    description: "<p>The element will <strong>not</strong> remain in the natural flow
      of the page. It will position itself according to the <strong>viewport</strong>.</p>
      <p>Because it's <strong>positioned</strong>, it will act as an anchor point
      for the absolutely positioned yellow block.</p> <p>Also, it will <strong>react</strong>
      to the following properties:</p> <ul><li><code>top</code></li><li><code>bottom</code></li><li><code>left</code></li><li><code>right</code></li><li><code>z-index</code></li></ul>"
    output: '<div class="example-output-div position" id="position-fixed"><p>Ancestor
      container</p><div class="block is-alpha"><strong>Target element<br>position:
      fixed<br>right: 0<br>top: 0</strong><div class="block is-pink">Child element<br>position:
      absolute<br>right: 5px<br>top: 5px</div></div></div>'
- title: resize
  is_shorthand: false
  description: "<p>Defines if the textarea is resizable or not.</p>"
  styles:
  - '.resize textarea { background: #fff;border: 1px solid hsl(0, 0%, 50%);color:
    hsl(0, 0%, 20%);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    "Helvetica", "Arial", sans-serif;height: 10em;padding: 0.8em 1em;width: 25em;
    }'
  - "#resize-none{ resize:none;}"
  - "#resize-none textarea { resize: none; }"
  - "#resize-horizontal{ resize:horizontal;}"
  - "#resize-horizontal textarea { resize: horizontal; }"
  - "#resize-vertical{ resize:vertical;}"
  - "#resize-vertical textarea { resize: vertical; }"
  - "#resize-both{ resize:both;}"
  - "#resize-both textarea { resize: both; }"
  actions: []
  examples:
  - is_default: true
    title: 'resize: none;'
    description: "<p>The textarea is <strong>not</strong> resizable.</p>"
    output: <div class="example-output-div resize" id="resize-none"><textarea>Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</textarea></div>
  - is_default: false
    title: 'resize: horizontal;'
    description: "<p>The textarea is resizable <strong>horizontally</strong>.</p>"
    output: <div class="example-output-div resize" id="resize-horizontal"><textarea>Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</textarea></div>
  - is_default: false
    title: 'resize: vertical;'
    description: "<p>The textarea is resizable <strong>vertically</strong>.</p>"
    output: <div class="example-output-div resize" id="resize-vertical"><textarea>Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</textarea></div>
  - is_default: false
    title: 'resize: both;'
    description: "<p>The textarea is resizable both <strong>horizontally</strong>
      and <strong>vertically</strong>.</p>"
    output: <div class="example-output-div resize" id="resize-both"><textarea>Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</textarea></div>
- title: text-align
  is_shorthand: false
  description: "<p>Defines how the text content of the element is horizontally aligned.</p>"
  styles:
  - "#text-align-left{ text-align:left;}"
  - "#text-align-right{ text-align:right;}"
  - "#text-align-center{ text-align:center;}"
  - "#text-align-justify{ text-align:justify;}"
  actions: []
  examples:
  - is_default: false
    title: 'text-align: left;'
    description: "<p>The text content is aligned to the <strong>left</strong>.</p>"
    output: <div class="example-output-div text-align" id="text-align-left"><p class="block
      is-alpha"><strong>Hello world</strong><br>Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
      Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p></div>
  - is_default: false
    title: 'text-align: right;'
    description: "<p>The text content is aligned to the <strong>right</strong>.</p>"
    output: <div class="example-output-div text-align" id="text-align-right"><p class="block
      is-alpha"><strong>Hello world</strong><br>Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.
      Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p></div>
  - is_default: false
    title: 'text-align: center;'
    description: "<p>The text content is <strong>centered</strong>.</p>"
    output: <div class="example-output-div text-align" id="text-align-center"><p
      class="block is-alpha"><strong>Hello world</strong><br>Lorem ipsum dolor sit
      amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar
      felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus
      ut.</p></div>
  - is_default: false
    title: 'text-align: justify;'
    description: "<p>The text content is <strong>justified</strong>.</p>"
    output: <div class="example-output-div text-align" id="text-align-justify"><p
      class="block is-alpha"><strong>Hello world</strong><br>Lorem ipsum dolor sit
      amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar
      felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus
      ut.</p></div>
- title: text-decoration
  is_shorthand: false
  description: "<p>Defines how the text content of the element is decorated.</p>"
  styles:
  - "#text-decoration-none{ text-decoration:none;}"
  - "#text-decoration-underline{ text-decoration:underline;}"
  actions: []
  examples:
  - is_default: true
    title: 'text-decoration: none;'
    description: "<p>Removes any text decoration.</p>"
    output: <div class="example-output-div text-decoration" id="text-decoration-none">Hello
      world</div>
  - is_default: false
    title: 'text-decoration: underline;'
    description: "<p>Underlines the text content.</p>"
    output: <div class="example-output-div text-decoration" id="text-decoration-underline">Hello
      world</div>
- title: text-indent
  is_shorthand: false
  description: "<p>Defines the indentation of the element's first line of text.</p>"
  styles:
  - "#text-indent-0{ text-indent:0;}"
  - "#text-indent-40px{ text-indent:40px;}"
  - "#text-indent--2em{ text-indent:-2em;}"
  actions: []
  examples:
  - is_default: true
    title: 'text-indent: 0;'
    description: "<p>The text is <strong>not</strong> indented.</p>"
    output: <div class="example-output-div text-indent" id="text-indent-0"><p class="block
      is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper
      diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus
      diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla
      luctus felis hendrerit sit amet.</p></div>
  - is_default: false
    title: 'text-indent: 40px;'
    description: "<p>You can use <strong>numeric values</strong> like <strong>pixels</strong>,
      <strong>(r)em</strong>, <strong>percentages</strong>...</p> <p>Notice how only
      the <em>first</em> line is indented.</p>"
    output: <div class="example-output-div text-indent" id="text-indent-40px"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</p></div>
  - is_default: false
    title: 'text-indent: -2em;'
    description: "<p>You can also use <strong>negative</strong> values.</p>"
    output: <div class="example-output-div text-indent" id="text-indent--2em"><p
      class="block is-alpha">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</p></div>
- title: text-overflow
  is_shorthand: false
  description: "<p>Defines how the hidden text content behaves if it's overflowing.</p>"
  styles:
  - ".text-overflow { display: flex; }"
  - ".text-overflow .block { overflow: hidden;white-space: nowrap;width: 5em; }"
  - "#text-overflow-clip{ text-overflow:clip;}"
  - "#text-overflow-clip .block { text-overflow: clip; }"
  - "#text-overflow-ellipsis{ text-overflow:ellipsis;}"
  - "#text-overflow-ellipsis .block { text-overflow: ellipsis; }"
  actions: []
  examples:
  - is_default: true
    title: 'text-overflow: clip;'
    description: "<p>The text content is <strong>clipped</strong> and not accessible.</p>"
    output: <div class="example-output-div text-overflow" id="text-overflow-clip"><p
      class="block is-alpha">Hello world</p></div>
  - is_default: false
    title: 'text-overflow: ellipsis;'
    description: "<p>The overflowing content is replaced by an <strong>ellipsis</strong>:
      <code>…</code></p>"
    output: <div class="example-output-div text-overflow" id="text-overflow-ellipsis"><p
      class="block is-alpha">Hello world</p></div>
- title: text-shadow
  is_shorthand: false
  description: "<p>Defines the shadow of the text content.</p>"
  styles:
  - "#text-shadow-none{ text-shadow:none;}"
  - "#text-shadow-2px-6px{ text-shadow:2px 6px;}"
  - "#text-shadow-2px-6px-red{ text-shadow:2px 6px red;}"
  - "#text-shadow-2px-4px-10px-red{ text-shadow:2px 4px 10px red;}"
  actions: []
  examples:
  - is_default: true
    title: 'text-shadow: none;'
    description: "<p>The text content has <strong>no shadow</strong>.</p>"
    output: <div class="example-output-div text-shadow" id="text-shadow-none">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</div>
  - is_default: false
    title: 'text-shadow: 2px 6px;'
    description: "<p>You need at least <strong>two values</strong>:</p> <ul><li>the
      first is the <em>horizontal</em> offset</li><li>the second is the <em>vertical</em>
      offset</li></ul><p>The shadow color will be inherited from the text color.</p>"
    output: <div class="example-output-div text-shadow" id="text-shadow-2px-6px">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</div>
  - is_default: false
    title: 'text-shadow: 2px 6px red;'
    description: <p>You can define a <strong>color</strong> as the <em>last</em> value.</p>
      <p>As with <code class="shorthand"><a href="http://cssreference.io/#color">color</a></code>,
      you can use color names, hexadecimal, rgb, hsl...</p>
    output: <div class="example-output-div text-shadow" id="text-shadow-2px-6px-red">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</div>
  - is_default: false
    title: 'text-shadow: 2px 4px 10px red;'
    description: "<p>The optional <strong>third value</strong> defines the <strong>blur</strong>
      of the shadow.</p> <p>The color will be diffused across 10px in this example,
      from opaque to transparent.</p>"
    output: <div class="example-output-div text-shadow" id="text-shadow-2px-4px-10px-red">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</div>
- title: text-transform
  is_shorthand: false
  description: "<p>Defines how the text content should be transformed.</p>"
  styles:
  - "#text-transform-none{ text-transform:none;}"
  - "#text-transform-capitalize{ text-transform:capitalize;}"
  - "#text-transform-uppercase{ text-transform:uppercase;}"
  - "#text-transform-lowercase{ text-transform:lowercase;}"
  actions: []
  examples:
  - is_default: true
    title: 'text-transform: none;'
    description: "<p>Removes any text transformation: the text will appear the same
      as in the HTML code.</p>"
    output: <div class="example-output-div text-transform" id="text-transform-none"><strong>Hello
      world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</div>
  - is_default: false
    title: 'text-transform: capitalize;'
    description: "<p>Turns the <strong>first letter</strong> of each word into a <strong>capital</strong>
      letter.</p>"
    output: <div class="example-output-div text-transform" id="text-transform-capitalize"><strong>Hello
      world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</div>
  - is_default: false
    title: 'text-transform: uppercase;'
    description: "<p>Turns <strong>all letters</strong> into <strong>capital</strong>
      letters.</p>"
    output: <div class="example-output-div text-transform" id="text-transform-uppercase"><strong>Hello
      world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</div>
  - is_default: false
    title: 'text-transform: lowercase;'
    description: "<p>Turns <strong>all letters</strong> into <strong>lowercase</strong>
      letters.</p>"
    output: <div class="example-output-div text-transform" id="text-transform-lowercase"><strong>Hello
      world!</strong><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat
      tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi,
      fringilla luctus felis hendrerit sit amet.</div>
- title: top
  is_shorthand: false
  description: "<p>Defines the position of the element according to its top edge.</p>"
  styles:
  - ".top { background: #310736;height: 200px;position: relative; }"
  - ".top p { color: #fff; }.top .natural { width: 200px; }.top .actual { animation-direction:
    alternate;animation-duration: 2s;animation-iteration-count: infinite;position:
    absolute;width: 200px; }"
  - "#top-auto{ top:auto;}"
  - "#top-auto .actual { animation-name: fadeIn;transform: translateY(-100%); }"
  - "#top-20px{ top:20px;}"
  - "#top-20px .actual { animation-name: fadeIn;position: relative;top: 20px;transform:
    translateY(-100%); }"
  - "#top-0{ top:0;}"
  - "#top-0 .actual { top: 0; }"
  actions: []
  examples:
  - is_default: true
    title: 'top: auto;'
    description: "<p>The element will remain in its <strong>natural</strong> position.</p>"
    output: <div class="example-output-div top" id="top-auto"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
  - is_default: false
    title: 'top: 20px;'
    description: "<p>If the element is in position <strong>relative</strong>, the
      element will move <em>upwards</em> by the amount defined by the <strong>top</strong>
      value.</p>"
    output: <div class="example-output-div top" id="top-20px"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
  - is_default: false
    title: 'top: 0;'
    description: "<p>If the element is in position <strong>absolute</strong>, the
      element will position itself from the <em>top</em> of the first positioned <strong>ancestor</strong>.</p>"
    output: <div class="example-output-div top" id="top-0"><p>Parent container</p><div
      class="natural">Natural position</div><div class="actual">Actual position</div></div>
- title: transform-origin
  is_shorthand: false
  description: <p>Defines the origin for transformations defined by the <code class="shorthand"><a
    href="http://cssreference.io/#transform">transform</a></code> property.</p>
  styles:
  - ".transform-origin.is-animated .block.is-alpha { animation-name: rotateFull; }"
  - ".transform-origin .block { height: 100px;width: 100px; }.transform-origin .block.is-container
    { padding: 0;position: relative; }.transform-origin .block.is-alpha { align-items:
    center;animation-duration: 5s;animation-iteration-count: infinite;animation-timing-function:
    linear;display: flex;justify-content: center; }.transform-origin .origin { background:
    hsl(348, 100%, 61%);border-radius: 290486px;height: 10px;margin: -5px 0 0 -5px;position:
    absolute;width: 10px; }"
  - "#transform-origin-50-50-0{ transform-origin:50% 50% 0;}"
  - "#transform-origin-50-50-0 .origin { left: 50%;top: 50%; }"
  - "#transform-origin-20px-70{ transform-origin:20px 70%;}"
  - "#transform-origin-20px-70 .origin { left: 20px;top: 70%; }#transform-origin-20px-70
    .block.is-alpha { transform-origin: 20px 70%; }"
  - "#transform-origin-top-right{ transform-origin:top right;}"
  - "#transform-origin-top-right .origin { left: 100%;top: 0; }#transform-origin-top-right
    .block.is-alpha { transform-origin: top right; }"
  - "#transform-origin-center-bottom{ transform-origin:center bottom;}"
  - "#transform-origin-center-bottom .origin { left: 50%;top: 100%; }#transform-origin-center-bottom
    .block.is-alpha { transform-origin: center bottom; }"
  actions:
  - <a class="button property-animation-toggle" data-property-name="transform-origin"></a>
  examples:
  - is_default: true
    title: 'transform-origin: 50% 50% 0;'
    description: "<p>The transform origin is in the <strong>center</strong> of the
      element.</p>"
    output: <div class="example-output-div transform-origin" id="transform-origin-50-50-0"><div
      class="block is-container"><p class="block is-alpha"><span class="origin"></span>Hello
      world</p></div></div>
  - is_default: false
    title: 'transform-origin: 20px 70%;'
    description: "<p>You can use <strong>2 values</strong>:</p> <ul><li>the first
      value is the <strong>horizontal</strong> axis</li><li>the second is the <strong>vertical</strong>
      axis</li></ul>"
    output: <div class="example-output-div transform-origin" id="transform-origin-20px-70"><div
      class="block is-container"><p class="block is-alpha"><span class="origin"></span>Hello
      world</p></div></div>
  - is_default: false
    title: 'transform-origin: top right;'
    description: "<p>You can use a combination of <strong>position keywords</strong>:
      <code>center</code>, <code>top</code>, <code>bottom</code>, <code>left</code>
      and <code>right</code>.</p>"
    output: <div class="example-output-div transform-origin" id="transform-origin-top-right"><div
      class="block is-container"><p class="block is-alpha"><span class="origin"></span>Hello
      world</p></div></div>
  - is_default: false
    title: 'transform-origin: center bottom;'
    description: "<p>When using keywords, you can change the <strong>order</strong>
      of the axis, as long as each keywords is unambiguous.</p>"
    output: <div class="example-output-div transform-origin" id="transform-origin-center-bottom"><div
      class="block is-container"><p class="block is-alpha"><span class="origin"></span>Hello
      world</p></div></div>
- title: transform
  is_shorthand: false
  description: "<p>Defines how the element is transformed.</p>"
  styles:
  - ".transform { display: flex; }"
  - ".transform .natural { height: 75px;position: absolute;width: 75px; }.transform
    .actual { height: 75px;position: relative;width: 75px; }"
  - '#transform-none .actual:before { content: "no transform"; }'
  - '#transform-translatex40px .actual { transform: translateX(40px); }#transform-translatex40px
    .actual:before { content: "translateX"; }'
  - '#transform-translatey20px .actual { transform: translateY(20px); }#transform-translatey20px
    .actual:before { content: "translateY"; }'
  - '#transform-translatey100 .actual { transform: translateY(100%); }#transform-translatey100
    .actual:before { content: "translateY"; }'
  - '#transform-translate20px--10 .actual { transform: translate(20px, -10%); }#transform-translate20px--10
    .actual:before { content: "translate"; }'
  - '#transform-scalex15 .actual { transform: scaleX(1.5); }#transform-scalex15 .actual:before
    { content: "scaleX"; }'
  - '#transform-scaley04 .actual { transform: scaleY(0.4); }#transform-scaley04 .actual:before
    { content: "scaleY"; }'
  - '#transform-scaley-2 .actual { transform: scaleY(-2); }#transform-scaley-2 .actual:before
    { content: "scaleY"; }'
  - '#transform-scale08-08 .actual { transform: scale(0.8, 0.8); }#transform-scale08-08
    .actual:before { content: "scale"; }'
  - '#transform-rotate45deg .actual { transform: rotate(45deg); }#transform-rotate45deg
    .actual:before { content: "rotate"; }'
  - '#transform-skewx15deg .actual { transform: skewX(15deg); }#transform-skewx15deg
    .actual:before { content: "skewX"; }'
  - '#transform-skewy45deg .actual { transform: skewY(45deg); }#transform-skewy45deg
    .actual:before { content: "skewY"; }'
  - '#transform-skew10deg--20deg .actual { transform: skew(10deg, -20deg); }#transform-skew10deg--20deg
    .actual:before { content: "skew"; }'
  - '#transform-rotate5deg-scale11-11-translate-20-30px .actual { transform: rotate(5deg)
    scale(1.1, 1.1) translate(-20%, 30px); }#transform-rotate5deg-scale11-11-translate-20-30px
    .actual:before { content: "multi"; }'
  actions: []
  examples:
  - is_default: true
    title: 'transform: none;'
    description: "<p>Removes any transformation.</p>"
    output: <div class="example-output-div transform" id="transform-none"><p class="natural">Natural
      position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: translateX(40px);'
    description: "<p>Move the element on the <strong>horizontal</strong> axis.</p>"
    output: <div class="example-output-div transform" id="transform-translatex40px"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: translateY(20px);'
    description: "<p>Move the element on the <strong>vertical</strong> axis.</p>"
    output: <div class="example-output-div transform" id="transform-translatey20px"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: translateY(100%);'
    description: "<p>You can use <strong>percentage</strong> values: the percentage
      is relative to the <strong>element itself</strong>, and not the parent.</p>"
    output: <div class="example-output-div transform" id="transform-translatey100"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: translate(20px, -10%);'
    description: "<p>You can use <code>translate()</code> with <strong>two values</strong>:</p>
      <ul><li>the first value is for the <strong>horizontal</strong> axis</li><li>the
      second value is for the <strong>vertical</strong> axis</li></ul>"
    output: <div class="example-output-div transform" id="transform-translate20px--10"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: scaleX(1.5);'
    description: "<p>Scale the element on the <strong>horizontal</strong> axis.</p>"
    output: <div class="example-output-div transform" id="transform-scalex15"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: scaleY(0.4);'
    description: "<p>Scale the element on the <strong>vertical</strong> axis.</p>"
    output: <div class="example-output-div transform" id="transform-scaley04"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: scaleY(-2);'
    description: "<p>You can use <strong>negative</strong> values: it will invert
      the element.</p>"
    output: <div class="example-output-div transform" id="transform-scaley-2"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: scale(0.8, 0.8);'
    description: "<p>You can use <code>scale()</code> with <strong>two values</strong>:</p>
      <ul><li>the first value is for the <strong>horizontal</strong> axis</li><li>the
      second value is for the <strong>vertical</strong> axis</li></ul><p>By using
      the same value for both, you can <strong>scale proportionally</strong>.</p>"
    output: <div class="example-output-div transform" id="transform-scale08-08"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: rotate(45deg);'
    description: "<p>Rotate the element.</p> <p>You can use:</p> <ul><li><strong>degrees</strong>
      from <code>0</code> to <code>360deg</code></li><li><strong>gradians</strong>
      from <code>0</code> to <code>400grad</code></li><li><strong>radians</strong>
      from <code>0</code> to <code>2πrad</code></li><li><strong>turns</strong> from
      <code>0</code> to <code>1turn</code></li></ul>"
    output: <div class="example-output-div transform" id="transform-rotate45deg"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: skewX(15deg);'
    description: "<p>Skew the element on the <strong>horizontal</strong> axis.</p>"
    output: <div class="example-output-div transform" id="transform-skewx15deg"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: skewY(45deg);'
    description: "<p>Skew the element on the <strong>vertical</strong> axis.</p>"
    output: <div class="example-output-div transform" id="transform-skewy45deg"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: skew(10deg, -20deg);'
    description: "<p>You can use <code>skew()</code> with <strong>two values</strong>:</p>
      <ul><li>the first value is for the <strong>horizontal</strong> axis</li><li>the
      second value is for the <strong>vertical</strong> axis</li></ul>"
    output: <div class="example-output-div transform" id="transform-skew10deg--20deg"><p
      class="natural">Natural position</p><p class="actual"></p></div>
  - is_default: false
    title: 'transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);'
    description: "<p>You can combine <strong>multiple</strong> transformations by
      separating them with a space.</p>"
    output: <div class="example-output-div transform" id="transform-rotate5deg-scale11-11-translate-20-30px"><p
      class="natural">Natural position</p><p class="actual"></p></div>
- title: transition-delay
  is_shorthand: false
  description: "<p>Defines how long the transition has to wait before <strong>starting</strong>.</p>"
  styles:
  - ".transition-delay { padding: 0; }"
  - ".transition-delay:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform:
    translateX(200%); }"
  - ".transition-delay .square { transition-duration: 1s;transition-timing-function:
    linear;transition-property: background transform; }"
  - "#transition-delay-12s .square { transition-delay: 1.2s; }"
  - "#transition-delay-2400ms .square { transition-delay: 2400ms; }"
  - "#transition-delay--500ms .square { transition-delay: -500ms; }"
  actions: []
  examples:
  - is_default: true
    title: 'transition-delay: 0s;'
    description: "<p>The transition will wait <strong>zero seconds</strong>, and thus
      start right away.</p>"
    output: <div class="example-output-div transition-delay" id="transition-delay-0s"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-delay: 1.2s;'
    description: "<p>You can use <strong>decimal</strong> values in <strong>seconds</strong>
      with the keyword <code>s</code>.</p>"
    output: <div class="example-output-div transition-delay" id="transition-delay-12s"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-delay: 2400ms;'
    description: "<p>You can use <strong>milliseconds</strong> instead of seconds,
      with the keyword <code>ms</code>.</p>"
    output: <div class="example-output-div transition-delay" id="transition-delay-2400ms"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-delay: -500ms;'
    description: "<p>You can use <strong>negative values</strong>: the transition
      will start as if it had <em>already been playing</em> for <code>500ms</code>.</p>"
    output: <div class="example-output-div transition-delay" id="transition-delay--500ms"><p
      class="square is-alpha">Hover me</p></div>
- title: transition-duration
  is_shorthand: false
  description: "<p>Defines how long the transition lasts.</p>"
  styles:
  - ".transition-duration { padding: 0; }"
  - ".transition-duration:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform:
    translateX(200%); }"
  - ".transition-duration .square { transition-timing-function: linear;transition-property:
    background transform; }"
  - "#transition-duration-0s .square { transition-duration: 0s; }"
  - "#transition-duration-12s .square { transition-duration: 1.2s; }"
  - "#transition-duration-2400ms .square { transition-duration: 2400ms; }"
  actions: []
  examples:
  - is_default: true
    title: 'transition-duration: 0s;'
    description: "<p>The transition will last <strong>zero seconds</strong>, and is
      thus <strong>instant</strong>.</p>"
    output: <div class="example-output-div transition-duration" id="transition-duration-0s"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-duration: 1.2s;'
    description: "<p>You can use <strong>decimal</strong> values in <strong>seconds</strong>
      with the keyword <code>s</code>.</p>"
    output: <div class="example-output-div transition-duration" id="transition-duration-12s"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-duration: 2400ms;'
    description: "<p>You can use <strong>milliseconds</strong> instead of seconds,
      with the keyword <code>ms</code>.</p>"
    output: <div class="example-output-div transition-duration" id="transition-duration-2400ms"><p
      class="square is-alpha">Hover me</p></div>
- title: transition-property
  is_shorthand: false
  description: "<p>Defines which properties will transition.</p>"
  styles:
  - ".transition-property { padding: 0; }"
  - ".transition-property:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform:
    translateX(200%); }"
  - ".transition-property .square { transition-duration: 1s;transition-timing-function:
    linear; }"
  - "#transition-property-all .square { transition-property: all; }"
  - "#transition-property-none .square { transition-property: none; }"
  - "#transition-property-background .square { transition-property: background; }"
  - "#transition-property-color .square { transition-property: color; }"
  - "#transition-property-transform .square { transition-property: transform; }"
  actions: []
  examples:
  - is_default: true
    title: 'transition-property: all;'
    description: <p>The element will transition <strong>all</strong> properties:</p>
      <ul><li><code class="shorthand"><a href="http://cssreference.io/#background">background</a></code></li><li><code
      class="shorthand"><a href="http://cssreference.io/#color">color</a></code></li><li><code
      class="shorthand"><a href="http://cssreference.io/#transform">transform</a></code></li></ul>
    output: <div class="example-output-div transition-property" id="transition-property-all"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-property: none;'
    description: "<p>The element will transition <strong>no</strong> property: the
      transition is thus <strong>instant</strong>.</p>"
    output: <div class="example-output-div transition-property" id="transition-property-none"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-property: background;'
    description: "<p>The element will only transtion the <strong>background</strong>
      property.</p>"
    output: <div class="example-output-div transition-property" id="transition-property-background"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-property: color;'
    description: "<p>The element will only transtion the <strong>color</strong> property.</p>"
    output: <div class="example-output-div transition-property" id="transition-property-color"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-property: transform;'
    description: "<p>The element will only transtion the <strong>transform</strong>
      property.</p>"
    output: <div class="example-output-div transition-property" id="transition-property-transform"><p
      class="square is-alpha">Hover me</p></div>
- title: transition-timing-function
  is_shorthand: false
  description: "<p>Defines how the values between the <em>start</em> and the <em>end</em>
    of the transition are calculated.</p>"
  styles:
  - ".transition-timing-function { padding: 0; }"
  - ".transition-timing-function:hover .square { background: hsl(348, 100%, 61%);color:
    #fff;transform: translateX(200%); }"
  - ".transition-timing-function .square { transition-duration: 1s;transition-property:
    all; }"
  - "#transition-timing-function-ease .square { transition-timing-function: ease;
    }"
  - "#transition-timing-function-ease-in .square { transition-timing-function: ease-in;
    }"
  - "#transition-timing-function-ease-out .square { transition-timing-function: ease-out;
    }"
  - "#transition-timing-function-ease-in-out .square { transition-timing-function:
    ease-in-out; }"
  - "#transition-timing-function-linear .square { transition-timing-function: linear;
    }"
  - "#transition-timing-function-step-start .square { transition-timing-function:
    step-start; }"
  - "#transition-timing-function-step-end .square { transition-timing-function: step-end;
    }"
  - "#transition-timing-function-steps4-end .square { transition-timing-function:
    steps(4, end); }"
  actions: []
  examples:
  - is_default: true
    title: 'transition-timing-function: ease;'
    description: "<p>The transition starts slowly, accelerates in the middle, and
      slows down at the end.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-ease"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-timing-function: ease-in;'
    description: "<p>The transition starts slowly, and accelerates gradually until
      the end.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-ease-in"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-timing-function: ease-out;'
    description: "<p>The transition starts quickly, and decelerates gradually until
      the end.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-ease-out"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-timing-function: ease-in-out;'
    description: "<p>Like <code>ease</code>, but more pronounced.</p> <p>The transition
      starts quickly, and decelerates gradually until the end.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-ease-in-out"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-timing-function: linear;'
    description: "<p>The transition has a <em>*constant speed</em>.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-linear"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-timing-function: step-start;'
    description: "<p>The transition jumps <em>instantly</em> to the <strong>final
      state</strong>.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-step-start"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-timing-function: step-end;'
    description: "<p>The transition stays at the <strong>initial state</strong> until
      the end, when it <em>instantly</em> jumps to the <strong>final state</strong>.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-step-end"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition-timing-function: steps(4, end);'
    description: "<p>By using <code>steps()</code> with an <strong>integer</strong>,
      you can define a specific <em>number</em> of steps before reaching the end.
      The state of the element will <em>not</em> vary gradually, but rather <strong>jump</strong>
      from state to state in separate instants.</p>"
    output: <div class="example-output-div transition-timing-function" id="transition-timing-function-steps4-end"><p
      class="square is-alpha">Hover me</p></div>
- title: transition
  is_shorthand: true
  description: <p>Shorthand property for <code class="shorthand"><a class="hash" href="http://localhost:4000/#transition-property"
    data-property-name="transition-property">transition-property</a></code> <code
    class="shorthand"><a class="hash" href="http://localhost:4000/#transition-duration"
    data-property-name="transition-duration">transition-duration</a></code> <code
    class="shorthand"><a class="hash" href="http://localhost:4000/#transition-timing-function"
    data-property-name="transition-timing-function">transition-timing-function</a></code>
    and <code class="shorthand"><a class="hash" href="http://localhost:4000/#transition-delay"
    data-property-name="transition-delay">transition-delay</a></code>.</p> <p>Only
    <code>transition-duration</code> is <strong>required</strong>.</p>
  styles:
  - ".transition { padding: 0; }"
  - ".transition:hover .square { background: hsl(348, 100%, 61%);color: #fff;transform:
    translateX(200%); }"
  - "#transition-1s .square { transition: 1s; }"
  - "#transition-1s-linear .square { transition: 1s linear; }"
  - "#transition-background-1s-linear .square { transition: background 1s linear;
    }"
  - "#transition-background-1s-linear-500ms .square { transition: background 1s linear
    500ms; }"
  - "#transition-background-4s-transform-1s .square { transition: background 4s, transform
    1s; }"
  actions: []
  examples:
  - is_default: false
    title: 'transition: 1s;'
    description: "<ul><li><code>transition-duration</code> is <strong>set</strong>
      to <code>1s</code></li><li><code>transition-property</code> <em>defaults</em>
      to <code>all</code></li><li><code>transition-timing-function</code> <em>defaults</em>
      to <code>ease</code></li><li><code>transition-delay</code> <em>defaults</em>
      to <code>0s</code></li></ul>"
    output: <div class="example-output-div transition" id="transition-1s"><p class="square
      is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition: 1s linear;'
    description: "<ul><li><code>transition-duration</code> is <strong>set</strong>
      to <code>1s</code></li><li><code>transition-property</code> <em>defaults</em>
      to <code>all</code></li><li><code>transition-timing-function</code> is <strong>set</strong>
      to <code>linear</code></li><li><code>transition-delay</code> <em>defaults</em>
      to <code>0s</code></li></ul>"
    output: <div class="example-output-div transition" id="transition-1s-linear"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition: background 1s linear;'
    description: "<ul><li><code>transition-duration</code> is <strong>set</strong>
      to <code>1s</code></li><li><code>transition-property</code> is <strong>set</strong>
      to <code>background</code></li><li><code>transition-timing-function</code> is
      <strong>set</strong> to <code>linear</code></li><li><code>transition-delay</code>
      <em>defaults</em> to <code>0s</code></li></ul>"
    output: <div class="example-output-div transition" id="transition-background-1s-linear"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition: background 1s linear 500ms;'
    description: "<ul><li><code>transition-duration</code> is <strong>set</strong>
      to <code>1s</code></li><li><code>transition-property</code> is <strong>set</strong>
      to <code>background</code></li><li><code>transition-timing-function</code> is
      <strong>set</strong> to <code>linear</code></li><li><code>transition-delay</code>
      is <strong>set</strong> to <code>500ms</code></li></ul>"
    output: <div class="example-output-div transition" id="transition-background-1s-linear-500ms"><p
      class="square is-alpha">Hover me</p></div>
  - is_default: false
    title: 'transition: background 4s, transform 1s;'
    description: "<p>You can combine <strong>multiple properties</strong> with their
      own transition duration.</p>"
    output: <div class="example-output-div transition" id="transition-background-4s-transform-1s"><p
      class="square is-alpha">Hover me</p></div>
- title: white-space
  is_shorthand: false
  description: "<p>Defines how the element's white space is handled.</p>"
  styles:
  - '.white-space { font-family: "Source Code Pro", monospace;font-size: 0.7rem;width:
    18em; }'
  - "#white-space-normal{ white-space:normal;}"
  - "#white-space-nowrap{ white-space:nowrap;}"
  - "#white-space-pre{ white-space:pre;}"
  - "#white-space-pre-wrap{ white-space:pre-wrap;}"
  - "#white-space-pre-line{ white-space:pre-line;}"
  actions: []
  examples:
  - is_default: true
    title: 'white-space: normal;'
    description: "<p>Sequences of spaces are combined into one.<br>Line breaks are
      ignored.<br>The text content is wrapped.</p>"
    output: '<div class="example-output-div white-space block is-alpha" id="white-space-normal">#parent
      .selector ul li blockquote{ color: red; font-size: 1rem; }</div>'
  - is_default: false
    title: 'white-space: nowrap;'
    description: "<p>Sequences of spaces are combined into one.<br>Line breaks are
      ignored.<br>The text content is <strong>not</strong> wrapped and remains on
      a <strong>single line</strong>.</p>"
    output: '<div class="example-output-div white-space block is-alpha" id="white-space-nowrap">#parent
      .selector ul li blockquote{ color: red; font-size: 1rem; }</div>'
  - is_default: false
    title: 'white-space: pre;'
    description: "<p>The white space is <strong>exactly preserved</strong>.</p> <ul>
      <li>Sequences of spaces are preserved</li> <li>Lines break only on new lines
      and <code>&lt;br&gt;</code></li> </ul>"
    output: '<div class="example-output-div white-space block is-alpha" id="white-space-pre">#parent
      .selector ul li blockquote{ color: red; font-size: 1rem; }</div>'
  - is_default: false
    title: 'white-space: pre-wrap;'
    description: "<p>The white space is <strong>mostly preserved</strong>.</p> <ul>
      <li>Sequences of spaces are preserved</li> <li>Lines break on new lines, <code>&lt;br&gt;</code>,
      but also when reaching the end of the element</li> </ul>"
    output: '<div class="example-output-div white-space block is-alpha" id="white-space-pre-wrap">#parent
      .selector ul li blockquote{ color: red; font-size: 1rem; }</div>'
  - is_default: false
    title: 'white-space: pre-line;'
    description: "<p>Only <strong>new lines</strong> are preserved.</p> <ul> <li>Sequences
      of spaces are <strong>combined</strong> into one</li> <li>Lines break on new
      lines, <code>&lt;br&gt;</code>, but also when reaching the end of the element</li>
      </ul>"
    output: '<div class="example-output-div white-space block is-alpha" id="white-space-pre-line">#parent
      .selector ul li blockquote{ color: red; font-size: 1rem; }</div>'
- title: width
  is_shorthand: false
  description: "<p>Defines the width of the element.</p>"
  styles:
  - "#width-auto{ width:auto;}"
  - "#width-240px{ width:240px;}"
  - "#width-50{ width:50%;}"
  actions: []
  examples:
  - is_default: true
    title: 'width: auto;'
    description: "<p>The element will <strong>automatically</strong> adjust its width
      to allow its content to be displayed correctly.</p>"
    output: <div class="example-output-div width block is-alpha" id="width-auto">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</div>
  - is_default: false
    title: 'width: 240px;'
    description: "<p>You can use <strong>numeric values</strong> like <strong>pixels</strong>,
      <strong>(r)em</strong>, <strong>percentages</strong>...</p>"
    output: <div class="example-output-div width block is-alpha" id="width-240px">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</div>
  - is_default: false
    title: 'width: 50%;'
    description: "<p>If you use <strong>percentages</strong>, the value is relative
      to the container's width.</p>"
    output: <div class="example-output-div width block is-alpha" id="width-50">Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
      pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
      gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis
      hendrerit sit amet.</div>
- title: will-change
  is_shorthand: false
  description: "<p>Defines which properties are expected to change in the future (either
    through CSS or JavaScript).</p>"
  styles:
  - "#will-change-auto{ will-change:auto;}"
  - "#will-change-scroll-position{ will-change:scroll-position;}"
  - "#will-change-contents{ will-change:contents;}"
  - "#will-change-box-shadow{ will-change:box-shadow;}"
  actions: []
  examples:
  - is_default: true
    title: 'will-change: auto;'
    description: "<p><strong>Doesn't</strong> tell the browser to optimize <em>any</em>
      property.</p>"
    output: <div class="example-output-div will-change" id="will-change-auto">Hello
      world</div>
  - is_default: false
    title: 'will-change: scroll-position;'
    description: "<p>Tells the browser to optimize for the element's <strong>scroll
      position</strong>, as it might change in the future.</p>"
    output: <div class="example-output-div will-change" id="will-change-scroll-position">Hello
      world</div>
  - is_default: false
    title: 'will-change: contents;'
    description: "<p>Tells the browser to optimize for the element's <strong>contents</strong>,
      as it might change in the future.</p>"
    output: <div class="example-output-div will-change" id="will-change-contents">Hello
      world</div>
  - is_default: false
    title: 'will-change: box-shadow;'
    description: "<p>You can specify any other CSS <strong>property</strong>. For
      example, this tells the browser to optimize for the element's <strong>box-shadow</strong>,
      as it might change in the future.</p>"
    output: <div class="example-output-div will-change" id="will-change-box-shadow">Hello
      world</div>
- title: word-break
  is_shorthand: false
  description: "<p>Defines how words should break when reaching the end of a line.</p>"
  styles:
  - '.word-break { font-family: "Source Code Pro", monospace;width: 18em; }'
  - "#word-break-normal{ word-break:normal;}"
  - "#word-break-break-all{ word-break:break-all;}"
  actions: []
  examples:
  - is_default: true
    title: 'word-break: normal;'
    description: "<p>Words with no space will <strong>not</strong> break. Sequences
      of uninterrupted characters will be displayed on a single line.</p>"
    output: <div class="example-output-div word-break block is-alpha" id="word-break-normal">Thequickbrownfoxjumpsoverthelazydog</div>
  - is_default: false
    title: 'word-break: break-all;'
    description: "<p>Words with no space will <strong>break</strong> as soon as they
      reach the end of a line.</p>"
    output: <div class="example-output-div word-break block is-alpha" id="word-break-break-all">Thequickbrownfoxjumpsoverthelazydog</div>
- title: word-spacing
  is_shorthand: false
  description: "<p>Defines the spacing between words of a block of text.</p>"
  styles:
  - "#word-spacing-normal{ word-spacing:normal;}"
  - "#word-spacing-5px{ word-spacing:5px;}"
  - "#word-spacing-2em{ word-spacing:2em;}"
  actions: []
  examples:
  - is_default: true
    title: 'word-spacing: normal;'
    description: "<p>The spacing between the characters is <strong>normal</strong>.</p>"
    output: <div class="example-output-div word-spacing" id="word-spacing-normal">The
      quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'word-spacing: 5px;'
    description: "<p>You can use <strong>pixel</strong> values.</p>"
    output: <div class="example-output-div word-spacing" id="word-spacing-5px">The
      quick brown fox jumps over the lazy dog</div>
  - is_default: false
    title: 'word-spacing: 2em;'
    description: "<p>You can use <strong>em</strong> values: this allows the spacing
      to remain <em>relative</em> to the font-size.</p>"
    output: <div class="example-output-div word-spacing" id="word-spacing-2em">The
      quick brown fox jumps over the lazy dog</div>
- title: z-index
  is_shorthand: false
  description: "<p>Defines the <strong>order</strong> of the elements on the <strong>z-axis*8.
    It only works on </strong>positioned** elements (anything apart from <code>static</code>).</p>"
  styles:
  - ".z-index { height: 100px;padding: 0; }"
  - ".z-index .block { height: 100%;left: 0;position: absolute;width: 25%; }.z-index
    .block.is-alpha { height: 50%;width: 100%; }.z-index .block.is-pink { height:
    60%;left: 20%;top: 20%;width: 60%; }.z-index .block.is-beta { height: 60%;left:
    40%;top: 40%;width: 60%; }.z-index .block.is-yellow { left: 70%;width: 20%; }"
  - "#z-index-1 .block.is-pink { z-index: 1; }"
  - "#z-index--1 .block.is-pink { z-index: -1; }"
  actions: []
  examples:
  - is_default: true
    title: 'z-index: auto;'
    description: "<p>The order is defined by the order in the <strong>HTML code</strong>:</p>
      <ul> <li>first in the code = behind</li> <li>last in the code = in front</li>
      </ul>"
    output: <div class="example-output-div z-index" id="z-index-auto"><div class="block
      is-alpha">One</div><div class="block is-pink">Two<br><strong>Target</strong></div><div
      class="block is-beta">Three</div><div class="block is-yellow">Four</div></div>
  - is_default: false
    title: 'z-index: 1;'
    description: "<p>The z-index value is <strong>relative</strong> to the other ones.
      The target element is move in <strong>front</strong> of its siblings.</p>"
    output: <div class="example-output-div z-index" id="z-index-1"><div class="block
      is-alpha">One</div><div class="block is-pink">Two<br><strong>Target</strong></div><div
      class="block is-beta">Three</div><div class="block is-yellow">Four</div></div>
  - is_default: false
    title: 'z-index: -1;'
    description: "<p>You can use <strong>negative values</strong>. The target element
      is move in <strong>behind</strong> its siblings.</p>"
    output: <div class="example-output-div z-index" id="z-index--1"><div class="block
      is-alpha">One</div><div class="block is-pink">Two<br><strong>Target</strong></div><div
      class="block is-beta">Three</div><div class="block is-yellow">Four</div></div>