Layout Utility Tests

Github
Tests for @superflycss/utilities-layout
Flex Layout
u-flex is applied.
                 

<div class="u-flex">
   <div class="TestBoxLeft">
               First item in row</div>
   <div class="TestBox">
               Second item in row</div>
</div>

       
     
The items are laid out in a row.
First item in row
Second item in row
Flex Layout
u-flex-bullseye is applied.
                 

<div class="TestCanvas 
            u-flex-bullseye
            u-min-height-15rem">
   <div class="TestBox">
               BULLSEYE</div>
</div>

       
     
The item(s) are centered both horizontally and vertically.
BULLSEYE
Flex Layout
u-flex-inline is applied.
                 

<div class="TestBoxLeft
            u-flex-inline
            u-background-color-orange">
            First container
</div><div class="TestBox
            u-flex-inline
            u-background-color-orange">
            Second container</div>
<br>
<br>
<div class="TestBoxLeft
            u-flex-inline
            u-background-color-orange">
            First container
</div>
<div class="TestBox
            u-flex-inline
            u-background-color-orange">
            Second container</div>


       
     
The flex containers are laid out in a row. Note that if the container adjacent sides </div><div></code> do not appear on the same line in the as shown, space is introduced between the containers. See the second rendered row for an illustration.
First container
Second container


First container
Second container
Flex Layout
u-flex-row is applied.
                 

<div class="TestCanvas
            u-flex 
            u-flex-row">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
    <div class="TestBox">
    Third item in row</div>
</div>

       
     
The items are laid out in a row.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-row-reverse is applied.
                 

<div class="TestCanvas
            u-flex 
            u-flex-row-reverse">
  <div class="TestBox
              u-background-color-orange">
    First item in row</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBoxLeft
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

       
     
The items are laid out in a row reversed.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-column is applied.
                 

<div class="TestCanvas 
            u-min-height-20rem
            u-flex 
            u-flex-column">
    <div class="TestBoxTop">
      First item in row</div>
    <div class="TestBoxTop">
      Second item in row</div>
      <div class="TestBox
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

       
     
The items are laid out in a column.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-column-reverse is applied.
                 

<div class="TestCanvas 
            u-min-height-20rem
            u-flex 
            u-flex-column-reverse">
    <div class="TestBox
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxTop
                u-background-color-orange">
      Second item in row</div>
      <div class="TestBoxTop
                  u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items are laid out in a column reversed.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-wrap is applied.
                 

<div class="TestCanvas
            u-flex 
            u-flex-wrap 
            u-width-25rem
            u-height-25rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox">
      Second item in row</div>
    <div class="TestBox
                u-background-color-orange
                u-border-style-none">
      Third item in row</div>
</div>

       
     
The items wrap onto the next line.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-wrap-reverse is applied.
                 

<div class="TestCanvas
            u-flex 
            u-flex-wrap-reverse 
            u-width-25rem
            u-height-25rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox
                u-background-color-orange">
      Second item in row</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items wrap onto the next line in reverse.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-no-wrap is applied.
                 

<div class="TestCanvas
          u-flex 
          u-flex-no-wrap 
          u-width-20rem
          u-height-20rem">
  <div class="TestBoxLeft 
              u-h6rem">
    First item in row</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBox
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

       
     
The items do not wrap onto the next line.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-justify-start is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-justify-start
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items are aligned to the left side of the main axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-justify-end is applied.
                 

<div class="TestCanvas
          u-flex
          u-flex-justify-end
          u-min-width-40rem
          u-min-height-10rem">
  <div class="TestBoxLeft">
    First item in row</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBox
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

       
     
The items are aligned to the right side of the main axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-justify-center is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-justify-center
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxLeft
                u-background-color-orange">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items are centered on the main axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-justify-center and u-flex-column are applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-justify-center
            u-flex-column
            u-min-width-40rem
            u-min-height-25rem">
    <div class="TestBoxTop
                u-background-color-orange">
      First item in row</div>
    <div class="TestBoxTop
                u-background-color-orange">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items are aligned to the center of the cross axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-justify-between is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-justify-between
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items have space between eachother on the main axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-justify-around is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-justify-around
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBox">
      First item in row</div>
    <div class="TestBox">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items have space around eachother on the main axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-align-items-stretch is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-stretch
            u-min-width-40rem
            u-min-height-40rem">
    <div class="u-background-color-orange
                u-padding-1rem
                u-border-right-style-solid
                u-border-right-width-2px">
      First item in row</div>
    <div class="u-background-color-orange
                u-padding-1rem
                u-border-right-style-solid
                u-border-right-width-2px">
      Second item in row</div>
    <div class="u-padding-1rem
                u-border-right-style-solid
                u-border-right-width-2px
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The items stretch out along the cross axis to fill the container.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-align-items-start is applied.
                 

<div class="TestCanvas 
            u-flex
            u-flex-align-items-start
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      Third item in row</div>
</div>

       
     
The cross-start margin edge of the items is placed on the cross-start line.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-align-items-end is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-end
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
      <div class="TestBox
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

       
     
The cross-end margin edge of the items is placed on the cross-end line.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-align-items-center is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-center
            u-min-width-40rem
            u-min-height-10rem">
    <div class="TestBoxLeft">
      First item in row</div>
    <div class="TestBoxLeft">
      Second item in row</div>
      <div class="TestBox
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

       
     
The items are centered in the cross-axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-align-items-baseline is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-align-items-baseline
            u-min-width-40rem
            u-min-height-20rem">
    <div class="TestBox
                u-padding-top-5rem
                u-height-8rem
                u-background-color-sf-charcoal-blue">
      First item in row</div>
    <div class="TestBox
                u-padding-top-3rem
                u-height-10rem
                u-background-color-sf-charcoal-blue">
      Second item in row</div>
      <div class="TestBox
                  u-padding-top-6rem
                  u-height-8rem
                  u-background-color-sf-charcoal-blue">
        Third item in row</div>
</div>

       
     
The items have their baselines aligned on the cross axis.
First item in row
Second item in row
Third item in row
Flex Layout
u-flex-align-content-start is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-start
            u-min-height-30rem">
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
      u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

       
     
The items are packed to the start of the container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Flex Layout
u-flex-align-content-end is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-end
            u-min-height-20rem
            u-border-style-solid
            u-border-width-2px">
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                  u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

       
     
The items are packed to the end of the container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Flex Layout
u-flex-align-content-center is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-center
            u-min-height-25rem">
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="TestBox
            u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

       
     
The items are packed to the center of the container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Flex Layout
u-flex-align-content-stretch is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-stretch
            u-min-height-25rem">
    <div class="TestBoxTop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBoxTop
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

       
     
The item stretch to take up the remaining space.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Flex Layout
u-flex-align-content-between is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-between
            u-min-height-30rem">
    <div class="TestBox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
            <div class="TestBox
                        u-background-color-orange">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
            <div class="TestBox
                        u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

       
     
The items evenly distributed with the first item at the start of the container and the last one at the end.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Flex Layout
u-flex-align-content-around is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-wrap
            u-flex-align-content-around
            u-min-height-26rem">
    <div class="TestBox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-orange">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>

       
     
The items evenly distributed with equal space around each line.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Flex Layout
u-flex-align-self-start is applied.
                 

<div class="TestCanvas 
            u-flex
            u-min-height-10rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-start">
              u-flex-align-self-start</div>
  <div class="TestBox
              u-flex-align-self-end
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-end</div>
</div>

       
     
The item is aligned at cross axis start.
u-flex-align-self-start
u-flex-align-self-end
Flex Layout
u-flex-align-self-end is applied.
                 

<div class="TestCanvas
            u-flex
            u-min-height-20rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-end">
              u-flex-align-self-end</div>
  <div class="TestBox
              u-flex-align-self-start
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-start</div>
</div>

       
     
The item is aligned at cross axis end.
u-flex-align-self-end
u-flex-align-self-start
Flex Layout
u-flex-align-self-center is applied.
                 

<div class="TestCanvas
            u-flex
            u-min-height-20rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-center">
              u-flex-align-self-center</div>
  <div class="TestBox
              u-flex-align-self-start
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-start</div>
</div>

       
     
The item is aligned at cross axis center.
u-flex-align-self-center
u-flex-align-self-start
Flex Layout
u-flex-align-self-stretch is applied.
                 

<div class="TestCanvas 
            u-flex
            u-min-height-20rem">
  <div class="TestBox
              u-background-color-orange
              u-flex-align-self-stretch">
              u-flex-align-self-stretch</div>
  <div class="TestBox
              u-flex-align-self-start
              u-background-color-sf-charcoal-blue">
              u-flex-align-self-start</div>
</div>

       
     
The item stretches from cross axis start to end.
u-flex-align-self-stretch
u-flex-align-self-start
Flex Layout
u-flex-order-first is applied.
                 

<div class="TestCanvas
            u-flex
            u-min-height-10rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      First item</div>
    <div class="TestBox">
      Second item</div>
    <div class="TestBoxLeft
                u-flex-order-first
                u-background-color-sf-charcoal-blue">
      Third item in content order</div>
</div>

       
     
The item is positioned at the start.
First item
Second item
Third item in content order
Flex Layout
u-flex-order-last is applied.
                 

<div class="TestCanvas
          u-flex
          u-min-height-10rem">
  <div class="TestBox
              u-flex-order-last">
    First item in content order</div>
  <div class="TestBoxLeft
              u-background-color-orange">
    Second item in row</div>
  <div class="TestBoxLeft 
              u-background-color-sf-charcoal-blue">
    Third item in row</div>
</div>

       
     
The item is positioned last.
First item in content order
Second item in row
Third item in row
Flex Layout
u-flex-grow is applied.
                 

<div class="TestCanvas
            u-flex 
            u-width-40rem
            u-height-10rem">
    <div class="TestBoxLeft
                u-flex-grow4
                u-background-color-orange">
      u-flex-grow3</div>
    <div class="TestBoxLeft
                u-flex-grow2">
      u-flex-grow2</div>
    <div class="TestBox 
                u-flex-grow5
                u-background-color-sf-charcoal-blue">
      u-flex-grow5</div>
</div>

       
     
The items grow according to the flex grow factor.
u-flex-grow3
u-flex-grow2
u-flex-grow5
Flex Layout
u-flex-shrink is applied to items that are larger than their container.
                 

<div class="TestCanvas
            u-flex 
            u-width-40rem">
    <div class="TestBoxLeft
                u-flex-shrink5
                u-width-100
                u-background-color-orange">
      u-flex-shrink5</div>
    <div class="TestBoxLeft
                u-flex-shrink3
                u-width-100
                u-background-color-sf-charcoal-blue">
      u-flex-shrink3</div>
    <div class="TestBox
                u-flex-shrink5
                u-width-100
                u-background-color-orange">
      u-flex-shrink5</div>
</div>

       
     
The items shrink according to the flex shrink factor.
u-flex-shrink5
u-flex-shrink3
u-flex-shrink5
Flex Layout
u-flex-expand-left is applied.
                 

<div class="TestCanvas
            u-flex
            u-width-40rem">
    <div class="TestBoxLeft
                u-background-color-orange">
      Push</div>
    <div class="TestBox
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-flex-expand-left">
      Push it good!</div>
</div>

       
     
The "Push it good!" item is pushed to the right side.
Push
It
Push it good!
Flex Layout
u-flex-expand-right is applied.
                 

<div class="TestCanvas
            u-flex
            u-width-40rem">
    <div class="TestBox
                u-flex-expand-right">
      Push</div>
    <div class="TestBoxLeft
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-padding-1rem">
      Push it good!</div>
</div>

       
     
The "It" item is pushed to the right side.
Push
It
Push it good!
Flex Layout
u-flex-expand-top is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-column
            u-height-20rem
            u-width-40rem">
    <div class="TestBox">
      Push</div>
    <div class="TestBoxTop
                u-flex-expand-top
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-background-color-orange">
      Push it good!</div>
  </div>

       
     
The items are pushed away from the item to the bottom.
Push
It
Push it good!
Flex Layout
u-flex-expand-bottom is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-column
            u-height-20rem
            u-width-40rem">
    <div class="TestBoxTop">
      Push</div>
    <div class="TestBox
                u-flex-expand-bottom
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-padding-1rem
                u-background-color-orange">
      Push it good!</div>
</div>

       
     
The items are pushed away from the item to the bottom.
Push
It
Push it good!
Flex Layout
u-flex-expand is applied.
                 

<div class="TestCanvas
            u-flex
            u-width-40rem">
    <div class="TestBox">
      Push</div>
    <div class="TestBox
                u-flex-expand
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox">
      Push it good!</div>
</div>

       
     
The item is centered using remaining space along the main axis.
Push
It
Push it good!
Flex Layout
u-flex-expand is applied.
                 

<div class="TestCanvas
            u-flex
            u-flex-column
            u-height-20rem
            u-width-40rem">
    <div class="TestBox">
      Push</div>
    <div class="TestBox
                u-flex-expand
                u-background-color-sf-charcoal-blue">
      It</div>
    <div class="TestBox
                u-background-color-orange">
      Push it good!</div>
</div>

       
     
The item is centered using remaining space along the main and cross axis.
Push
It
Push it good!
Flex Layout
u-flex-initial is applied.
                 

<div class="TestCanvas
            u-flex
            u-width-30rem
            u-height-30rem">
    <div class="TestBoxLeft
                u-flex-grow1">
      UNO</div>
    <div class="TestBox
                u-flex-grow1
                u-background-color-sf-charcoal-blue">
      DOS</div>
  </div>
  <div class="TestBox
              u-flex
              u-width-30rem">
      <div class="TestBoxLeft
                  u-flex-grow1
                  u-background-color-orange">
        TRES</div>
      <div class="TestBox
                  u-flex-grow1
                  u-flex-initial
                  u-width-20rem
                  u-background-color-sf-charcoal-blue">
        QUATRO</div>
  </div>
  
       
     
The "QUATRO" item is using the width and height properties.
UNO
DOS
TRES
QUATRO
Flex Layout
u-flex-auto is applied.
                 

<div class="TestCanvas
            u-flex
            u-width-30rem
            u-height-20rem">
    <div class="TestBoxLeft
                u-flex-grow1">
      UNO</div>
    <div class="TestBox
                u-flex-grow1
                u-flex-auto
                u-width-1rem
                u-background-color-sf-charcoal-blue">
      DOS</div>
  </div>
  <div class="TestBox
              u-flex
              u-width-30rem">
      <div class="TestBox
                  u-flex-grow1
                  u-background-color-orange">
        TRES</div>
      <div class="TestBox
                  u-flex-grow1
                  u-flex-auto
                  u-width-15rem
                  u-background-color-sf-charcoal-blue">
        CUATRO</div>
</div>

       
     
The item is using the width and height properties and absorb additional main axis space proportionally.
UNO
DOS
TRES
CUATRO
Flex Layout
u-flex-none is applied.
                 

<div class="TestCanvas
            u-flex
            u-width-30rem
            u-height-30rem
            u-border-style-solid
            u-border-width-2px">
    <div class="TestBox
                u-flex-grow1
                u-background-color-orange">
      UNO</div>
    <div class="TestBox
                u-flex-grow1
                u-background-color-sf-charcoal-blue">
      DOS</div>
  </div>
  <div class="TestBox
              u-flex
              u-width-30rem">
      <div class="TestBox
                  u-flex-grow1
                  u-background-color-orange">
        TRES</div>
      <div class="TestBox
                  u-flex-grow1
                  u-flex-none
                  u-width-30rem
                  u-background-color-sf-charcoal-blue">
        CUATRO</div>
</div>

       
     
The item sizes the item according to the width/height properties however the flex item is no longer flexible.
UNO
DOS
TRES
CUATRO
Tests for @superflycss/utilities-layout
Margin
u-margin-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-margin-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-margin-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-margin-halfrem
Margin
u-m-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-m-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-m-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-m-halfrem
Margin
u-ml-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-ml-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-ml-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-ml-halfrem
Margin
u-mr-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-mr-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-mr-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-mr-halfrem
Margin
u-mt-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-mt-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-mt-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-mt-halfrem
Margin
u-mb-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-mb-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-mb-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-mb-halfrem
Margin
u-margin-[side]-[factor]rem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-top-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-bottom-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-left-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-right-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-20rem
      </div>
</div>
</div>

       
     
The correct margin dimension renders.
u-margin-top-0rem
u-margin-top-1rem
u-margin-top-2rem
u-margin-top-3rem
u-margin-top-4rem
u-margin-top-5rem
u-margin-top-6rem
u-margin-top-7rem
u-margin-top-8rem
u-margin-top-9rem
u-margin-top-10rem
u-margin-top-11rem
u-margin-top-12rem
u-margin-top-13rem
u-margin-top-14rem
u-margin-top-15rem
u-margin-top-16rem
u-margin-top-17rem
u-margin-top-18rem
u-margin-top-19rem
u-margin-top-20rem
u-margin-bottom-0rem
u-margin-bottom-1rem
u-margin-bottom-2rem
u-margin-bottom-3rem
u-margin-bottom-4rem
u-margin-bottom-5rem
u-margin-bottom-6rem
u-margin-bottom-7rem
u-margin-bottom-8rem
u-margin-bottom-9rem
u-margin-bottom-10rem
u-margin-bottom-11rem
u-margin-bottom-12rem
u-margin-bottom-13rem
u-margin-bottom-14rem
u-margin-bottom-15rem
u-margin-bottom-16rem
u-margin-bottom-17rem
u-margin-bottom-18rem
u-margin-bottom-19rem
u-margin-bottom-20rem
u-margin-left-0rem
u-margin-left-1rem
u-margin-left-2rem
u-margin-left-3rem
u-margin-left-4rem
u-margin-left-5rem
u-margin-left-6rem
u-margin-left-7rem
u-margin-left-8rem
u-margin-left-9rem
u-margin-left-10rem
u-margin-left-11rem
u-margin-left-12rem
u-margin-left-13rem
u-margin-left-14rem
u-margin-left-15rem
u-margin-left-16rem
u-margin-left-17rem
u-margin-left-18rem
u-margin-left-19rem
u-margin-left-20rem
u-margin-right-0rem
u-margin-right-1rem
u-margin-right-2rem
u-margin-right-3rem
u-margin-right-4rem
u-margin-right-5rem
u-margin-right-6rem
u-margin-right-7rem
u-margin-right-8rem
u-margin-right-9rem
u-margin-right-10rem
u-margin-right-11rem
u-margin-right-12rem
u-margin-right-13rem
u-margin-right-14rem
u-margin-right-15rem
u-margin-right-16rem
u-margin-right-17rem
u-margin-right-18rem
u-margin-right-19rem
u-margin-right-20rem
Margin
u-margin-[factor]rem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-margin-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-20rem
      </div>
</div>
</div>

       
     
The correct margin dimension renders.
u-margin-0rem
u-margin-1rem
u-margin-2rem
u-margin-3rem
u-margin-4rem
u-margin-5rem
u-margin-6rem
u-margin-7rem
u-margin-8rem
u-margin-9rem
u-margin-10rem
u-margin-11rem
u-margin-12rem
u-margin-13rem
u-margin-14rem
u-margin-15rem
u-margin-16rem
u-margin-17rem
u-margin-18rem
u-margin-19rem
u-margin-20rem
Margin
u-m[factor]rem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-m20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-m20rem
      </div>
</div>
</div>

       
     
The correct margin dimension renders.
u-m0rem
u-m1rem
u-m2rem
u-m3rem
u-m4rem
u-m5rem
u-m6rem
u-m7rem
u-m8rem
u-m9rem
u-m10rem
u-m11rem
u-m12rem
u-m13rem
u-m14rem
u-m15rem
u-m16rem
u-m17rem
u-m18rem
u-m19rem
u-m20rem
Margin
u-m[side][factor]rem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mt20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mt20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mb20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mb20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-ml20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-ml20rem
      </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr0rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr1rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr2rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr3rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr4rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr5rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr6rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr7rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr8rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr9rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr10rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr11rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr12rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr13rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr14rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr15rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr16rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr17rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr18rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr19rem
      </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

      <div class="u-mr20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-mr20rem
      </div>
</div>
</div>

       
     
The correct margin dimension renders.
u-mt0rem
u-mt1rem
u-mt2rem
u-mt3rem
u-mt4rem
u-mt5rem
u-mt6rem
u-mt7rem
u-mt8rem
u-mt9rem
u-mt10rem
u-mt11rem
u-mt12rem
u-mt13rem
u-mt14rem
u-mt15rem
u-mt16rem
u-mt17rem
u-mt18rem
u-mt19rem
u-mt20rem
u-mb0rem
u-mb1rem
u-mb2rem
u-mb3rem
u-mb4rem
u-mb5rem
u-mb6rem
u-mb7rem
u-mb8rem
u-mb9rem
u-mb10rem
u-mb11rem
u-mb12rem
u-mb13rem
u-mb14rem
u-mb15rem
u-mb16rem
u-mb17rem
u-mb18rem
u-mb19rem
u-mb20rem
u-ml0rem
u-ml1rem
u-ml2rem
u-ml3rem
u-ml4rem
u-ml5rem
u-ml6rem
u-ml7rem
u-ml8rem
u-ml9rem
u-ml10rem
u-ml11rem
u-ml12rem
u-ml13rem
u-ml14rem
u-ml15rem
u-ml16rem
u-ml17rem
u-ml18rem
u-ml19rem
u-ml20rem
u-mr0rem
u-mr1rem
u-mr2rem
u-mr3rem
u-mr4rem
u-mr5rem
u-mr6rem
u-mr7rem
u-mr8rem
u-mr9rem
u-mr10rem
u-mr11rem
u-mr12rem
u-mr13rem
u-mr14rem
u-mr15rem
u-mr16rem
u-mr17rem
u-mr18rem
u-mr19rem
u-mr20rem
Tests for @superflycss/utilities-layout
Padding
u-padding-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-halfrem
              u-border-style-solid
              u-border-width-2px">
              u-padding-halfrem</div>
              
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-top-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-top-halfrem</div>
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-bottom-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-bottom-halfrem</div>
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-left-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-left-halfrem</div>
              <div class="u-background-color-orange
                          u-margin-bottom-1rem
                          u-padding-right-halfrem
                          u-border-style-solid
                          u-border-width-2px">
                          u-padding-right-halfrem</div>
  </div>
  
       
     
The padding style renders.
u-padding-halfrem
u-padding-top-halfrem
u-padding-bottom-halfrem
u-padding-left-halfrem
u-padding-right-halfrem
Margin
u-pl-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pl-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pl-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-pl-halfrem
Margin
u-pr-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pr-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pr-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-pr-halfrem
Margin
u-pt-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pt-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pt-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-pt-halfrem
Margin
u-pb-halfrem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue">

      <div class="u-pb-halfrem
                  u-background-color-orange
                  u-border-style-solid
                  u-border-width-2px">
                  u-pb-halfrem
      </div>
  </div>
</div>

       
     
The correct margin dimension renders.
u-pb-halfrem
Padding
u-padding-[side]-[factor]rem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-top-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-top-20rem</div>
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-bottom-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-bottom-20rem</div>
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-left-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-left-20rem</div>
  <div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-0rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-0rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-1rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-1rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-2rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-2rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-3rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-3rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-4rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-4rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-5rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-5rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-6rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-6rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-7rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-7rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-8rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-8rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-9rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-9rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-10rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-10rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-11rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-11rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-12rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-12rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-13rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-13rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-14rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-14rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-15rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-15rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-16rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-16rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-17rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-17rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-18rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-18rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-19rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-19rem</div><div class="u-background-color-orange
              u-margin-bottom-1rem
              u-padding-right-20rem
              u-border-style-solid
              u-border-width-2px">
              u-padding-right-20rem</div>
</div>

       
     
The correct padding dimension renders.
u-padding-top-0rem
u-padding-top-1rem
u-padding-top-2rem
u-padding-top-3rem
u-padding-top-4rem
u-padding-top-5rem
u-padding-top-6rem
u-padding-top-7rem
u-padding-top-8rem
u-padding-top-9rem
u-padding-top-10rem
u-padding-top-11rem
u-padding-top-12rem
u-padding-top-13rem
u-padding-top-14rem
u-padding-top-15rem
u-padding-top-16rem
u-padding-top-17rem
u-padding-top-18rem
u-padding-top-19rem
u-padding-top-20rem
u-padding-bottom-0rem
u-padding-bottom-1rem
u-padding-bottom-2rem
u-padding-bottom-3rem
u-padding-bottom-4rem
u-padding-bottom-5rem
u-padding-bottom-6rem
u-padding-bottom-7rem
u-padding-bottom-8rem
u-padding-bottom-9rem
u-padding-bottom-10rem
u-padding-bottom-11rem
u-padding-bottom-12rem
u-padding-bottom-13rem
u-padding-bottom-14rem
u-padding-bottom-15rem
u-padding-bottom-16rem
u-padding-bottom-17rem
u-padding-bottom-18rem
u-padding-bottom-19rem
u-padding-bottom-20rem
u-padding-left-0rem
u-padding-left-1rem
u-padding-left-2rem
u-padding-left-3rem
u-padding-left-4rem
u-padding-left-5rem
u-padding-left-6rem
u-padding-left-7rem
u-padding-left-8rem
u-padding-left-9rem
u-padding-left-10rem
u-padding-left-11rem
u-padding-left-12rem
u-padding-left-13rem
u-padding-left-14rem
u-padding-left-15rem
u-padding-left-16rem
u-padding-left-17rem
u-padding-left-18rem
u-padding-left-19rem
u-padding-left-20rem
u-padding-right-0rem
u-padding-right-1rem
u-padding-right-2rem
u-padding-right-3rem
u-padding-right-4rem
u-padding-right-5rem
u-padding-right-6rem
u-padding-right-7rem
u-padding-right-8rem
u-padding-right-9rem
u-padding-right-10rem
u-padding-right-11rem
u-padding-right-12rem
u-padding-right-13rem
u-padding-right-14rem
u-padding-right-15rem
u-padding-right-16rem
u-padding-right-17rem
u-padding-right-18rem
u-padding-right-19rem
u-padding-right-20rem
Margin
u-margin-[side]-[factor]rem is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-top-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-top-20rem
  </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-bottom-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-bottom-20rem
  </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-left-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-left-20rem
  </div>
</div>
  <div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-0rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-0rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-1rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-1rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-2rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-2rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-3rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-3rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-4rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-4rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-5rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-5rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-6rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-6rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-7rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-7rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-8rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-8rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-9rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-9rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-10rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-10rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-11rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-11rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-12rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-12rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-13rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-13rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-14rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-14rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-15rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-15rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-16rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-16rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-17rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-17rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-18rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-18rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-19rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-19rem
  </div>
</div><div class="u-border-style-solid
              u-border-width-2px
              u-border-color-sf-charcoal-blue
              u-margin-bottom-1rem">

  <div class="u-margin-right-20rem
              u-background-color-orange
              u-border-style-solid
              u-border-width-2px">
              u-margin-right-20rem
  </div>
</div>
</div>

       
     
The correct padding dimension renders.
u-margin-top-0rem
u-margin-top-1rem
u-margin-top-2rem
u-margin-top-3rem
u-margin-top-4rem
u-margin-top-5rem
u-margin-top-6rem
u-margin-top-7rem
u-margin-top-8rem
u-margin-top-9rem
u-margin-top-10rem
u-margin-top-11rem
u-margin-top-12rem
u-margin-top-13rem
u-margin-top-14rem
u-margin-top-15rem
u-margin-top-16rem
u-margin-top-17rem
u-margin-top-18rem
u-margin-top-19rem
u-margin-top-20rem
u-margin-bottom-0rem
u-margin-bottom-1rem
u-margin-bottom-2rem
u-margin-bottom-3rem
u-margin-bottom-4rem
u-margin-bottom-5rem
u-margin-bottom-6rem
u-margin-bottom-7rem
u-margin-bottom-8rem
u-margin-bottom-9rem
u-margin-bottom-10rem
u-margin-bottom-11rem
u-margin-bottom-12rem
u-margin-bottom-13rem
u-margin-bottom-14rem
u-margin-bottom-15rem
u-margin-bottom-16rem
u-margin-bottom-17rem
u-margin-bottom-18rem
u-margin-bottom-19rem
u-margin-bottom-20rem
u-margin-left-0rem
u-margin-left-1rem
u-margin-left-2rem
u-margin-left-3rem
u-margin-left-4rem
u-margin-left-5rem
u-margin-left-6rem
u-margin-left-7rem
u-margin-left-8rem
u-margin-left-9rem
u-margin-left-10rem
u-margin-left-11rem
u-margin-left-12rem
u-margin-left-13rem
u-margin-left-14rem
u-margin-left-15rem
u-margin-left-16rem
u-margin-left-17rem
u-margin-left-18rem
u-margin-left-19rem
u-margin-left-20rem
u-margin-right-0rem
u-margin-right-1rem
u-margin-right-2rem
u-margin-right-3rem
u-margin-right-4rem
u-margin-right-5rem
u-margin-right-6rem
u-margin-right-7rem
u-margin-right-8rem
u-margin-right-9rem
u-margin-right-10rem
u-margin-right-11rem
u-margin-right-12rem
u-margin-right-13rem
u-margin-right-14rem
u-margin-right-15rem
u-margin-right-16rem
u-margin-right-17rem
u-margin-right-18rem
u-margin-right-19rem
u-margin-right-20rem
Tests for @superflycss/utilities-layout
Border
u-border-width-[i]px is applied.
                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-border-width-0px">
              u-border-width-0px
  </div>
  <br><div class="TestBox
              u-border-width-1px">
              u-border-width-1px
  </div>
  <br><div class="TestBox
              u-border-width-2px">
              u-border-width-2px
  </div>
  <br><div class="TestBox
              u-border-width-3px">
              u-border-width-3px
  </div>
  <br><div class="TestBox
              u-border-width-4px">
              u-border-width-4px
  </div>
  <br><div class="TestBox
              u-border-width-5px">
              u-border-width-5px
  </div>
  <br><div class="TestBox
              u-border-width-6px">
              u-border-width-6px
  </div>
  <br><div class="TestBox
              u-border-width-7px">
              u-border-width-7px
  </div>
  <br><div class="TestBox
              u-border-width-8px">
              u-border-width-8px
  </div>
  <br><div class="TestBox
              u-border-width-9px">
              u-border-width-9px
  </div>
  <br><div class="TestBox
              u-border-width-10px">
              u-border-width-10px
  </div>
  <br><div class="TestBox
              u-border-width-11px">
              u-border-width-11px
  </div>
  <br><div class="TestBox
              u-border-width-12px">
              u-border-width-12px
  </div>
  <br><div class="TestBox
              u-border-width-13px">
              u-border-width-13px
  </div>
  <br><div class="TestBox
              u-border-width-14px">
              u-border-width-14px
  </div>
  <br><div class="TestBox
              u-border-width-15px">
              u-border-width-15px
  </div>
  <br><div class="TestBox
              u-border-width-16px">
              u-border-width-16px
  </div>
  <br><div class="TestBox
              u-border-width-17px">
              u-border-width-17px
  </div>
  <br><div class="TestBox
              u-border-width-18px">
              u-border-width-18px
  </div>
  <br><div class="TestBox
              u-border-width-19px">
              u-border-width-19px
  </div>
  <br><div class="TestBox
              u-border-width-20px">
              u-border-width-20px
  </div>
  <br>
</div>

       
     
The correct border width renders.
u-border-width-0px

u-border-width-1px

u-border-width-2px

u-border-width-3px

u-border-width-4px

u-border-width-5px

u-border-width-6px

u-border-width-7px

u-border-width-8px

u-border-width-9px

u-border-width-10px

u-border-width-11px

u-border-width-12px

u-border-width-13px

u-border-width-14px

u-border-width-15px

u-border-width-16px

u-border-width-17px

u-border-width-18px

u-border-width-19px

u-border-width-20px

Border
u-bw[i]px is applied.
                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-bw0px">
              u-bw0px
  </div>
  <br><div class="TestBox
              u-bw1px">
              u-bw1px
  </div>
  <br><div class="TestBox
              u-bw2px">
              u-bw2px
  </div>
  <br><div class="TestBox
              u-bw3px">
              u-bw3px
  </div>
  <br><div class="TestBox
              u-bw4px">
              u-bw4px
  </div>
  <br><div class="TestBox
              u-bw5px">
              u-bw5px
  </div>
  <br><div class="TestBox
              u-bw6px">
              u-bw6px
  </div>
  <br><div class="TestBox
              u-bw7px">
              u-bw7px
  </div>
  <br><div class="TestBox
              u-bw8px">
              u-bw8px
  </div>
  <br><div class="TestBox
              u-bw9px">
              u-bw9px
  </div>
  <br><div class="TestBox
              u-bw10px">
              u-bw10px
  </div>
  <br><div class="TestBox
              u-bw11px">
              u-bw11px
  </div>
  <br><div class="TestBox
              u-bw12px">
              u-bw12px
  </div>
  <br><div class="TestBox
              u-bw13px">
              u-bw13px
  </div>
  <br><div class="TestBox
              u-bw14px">
              u-bw14px
  </div>
  <br><div class="TestBox
              u-bw15px">
              u-bw15px
  </div>
  <br><div class="TestBox
              u-bw16px">
              u-bw16px
  </div>
  <br><div class="TestBox
              u-bw17px">
              u-bw17px
  </div>
  <br><div class="TestBox
              u-bw18px">
              u-bw18px
  </div>
  <br><div class="TestBox
              u-bw19px">
              u-bw19px
  </div>
  <br><div class="TestBox
              u-bw20px">
              u-bw20px
  </div>
  <br>
</div>

       
     
The correct border width renders.
u-bw0px

u-bw1px

u-bw2px

u-bw3px

u-bw4px

u-bw5px

u-bw6px

u-bw7px

u-bw8px

u-bw9px

u-bw10px

u-bw11px

u-bw12px

u-bw13px

u-bw14px

u-bw15px

u-bw16px

u-bw17px

u-bw18px

u-bw19px

u-bw20px

Border
u-border-radius-[i]px is applied.
                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-border-width-4px
              u-border-radius-0px">
              u-border-radius-0px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-1px">
              u-border-radius-1px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-2px">
              u-border-radius-2px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-3px">
              u-border-radius-3px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-4px">
              u-border-radius-4px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-5px">
              u-border-radius-5px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-6px">
              u-border-radius-6px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-7px">
              u-border-radius-7px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-8px">
              u-border-radius-8px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-9px">
              u-border-radius-9px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-10px">
              u-border-radius-10px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-11px">
              u-border-radius-11px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-12px">
              u-border-radius-12px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-13px">
              u-border-radius-13px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-14px">
              u-border-radius-14px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-15px">
              u-border-radius-15px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-16px">
              u-border-radius-16px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-17px">
              u-border-radius-17px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-18px">
              u-border-radius-18px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-19px">
              u-border-radius-19px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-20px">
              u-border-radius-20px
    </div>
    <br>
</div>

       
     
The correct border radius renders.
u-border-radius-0px

u-border-radius-1px

u-border-radius-2px

u-border-radius-3px

u-border-radius-4px

u-border-radius-5px

u-border-radius-6px

u-border-radius-7px

u-border-radius-8px

u-border-radius-9px

u-border-radius-10px

u-border-radius-11px

u-border-radius-12px

u-border-radius-13px

u-border-radius-14px

u-border-radius-15px

u-border-radius-16px

u-border-radius-17px

u-border-radius-18px

u-border-radius-19px

u-border-radius-20px

Border
u-br[i]px is applied.
                 

<div class="u-flex 
            u-flex-column 
            u-width-40rem">
  <div class="TestBox
              u-border-width-4px
              u-border-radius-0px">
              u-br0px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-1px">
              u-br1px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-2px">
              u-br2px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-3px">
              u-br3px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-4px">
              u-br4px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-5px">
              u-br5px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-6px">
              u-br6px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-7px">
              u-br7px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-8px">
              u-br8px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-9px">
              u-br9px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-10px">
              u-br10px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-11px">
              u-br11px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-12px">
              u-br12px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-13px">
              u-br13px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-14px">
              u-br14px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-15px">
              u-br15px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-16px">
              u-br16px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-17px">
              u-br17px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-18px">
              u-br18px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-19px">
              u-br19px
    </div>
    <br><div class="TestBox
              u-border-width-4px
              u-border-radius-20px">
              u-br20px
    </div>
    <br>
</div>

       
     
The correct border radius renders.
u-br0px

u-br1px

u-br2px

u-br3px

u-br4px

u-br5px

u-br6px

u-br7px

u-br8px

u-br9px

u-br10px

u-br11px

u-br12px

u-br13px

u-br14px

u-br15px

u-br16px

u-br17px

u-br18px

u-br19px

u-br20px

Border
u-border-[side]-style-solid and u-border-[side]-width-[factor]px is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-0px">
              u-border-top-style-solid <br>
              u-border-top-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-1px">
              u-border-top-style-solid <br>
              u-border-top-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-2px">
              u-border-top-style-solid <br>
              u-border-top-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-3px">
              u-border-top-style-solid <br>
              u-border-top-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-4px">
              u-border-top-style-solid <br>
              u-border-top-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-5px">
              u-border-top-style-solid <br>
              u-border-top-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-6px">
              u-border-top-style-solid <br>
              u-border-top-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-7px">
              u-border-top-style-solid <br>
              u-border-top-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-8px">
              u-border-top-style-solid <br>
              u-border-top-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-9px">
              u-border-top-style-solid <br>
              u-border-top-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-10px">
              u-border-top-style-solid <br>
              u-border-top-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-11px">
              u-border-top-style-solid <br>
              u-border-top-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-12px">
              u-border-top-style-solid <br>
              u-border-top-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-13px">
              u-border-top-style-solid <br>
              u-border-top-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-14px">
              u-border-top-style-solid <br>
              u-border-top-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-15px">
              u-border-top-style-solid <br>
              u-border-top-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-16px">
              u-border-top-style-solid <br>
              u-border-top-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-17px">
              u-border-top-style-solid <br>
              u-border-top-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-18px">
              u-border-top-style-solid <br>
              u-border-top-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-19px">
              u-border-top-style-solid <br>
              u-border-top-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-color-md-orange-900
              u-border-top-width-20px">
              u-border-top-style-solid <br>
              u-border-top-width-20px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-0px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-1px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-2px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-3px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-4px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-5px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-6px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-7px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-8px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-9px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-10px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-11px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-12px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-13px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-14px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-15px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-16px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-17px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-18px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-19px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-color-md-orange-900
              u-border-bottom-width-20px">
              u-border-bottom-style-solid <br>
              u-border-bottom-width-20px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-0px">
              u-border-left-style-solid <br>
              u-border-left-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-1px">
              u-border-left-style-solid <br>
              u-border-left-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-2px">
              u-border-left-style-solid <br>
              u-border-left-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-3px">
              u-border-left-style-solid <br>
              u-border-left-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-4px">
              u-border-left-style-solid <br>
              u-border-left-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-5px">
              u-border-left-style-solid <br>
              u-border-left-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-6px">
              u-border-left-style-solid <br>
              u-border-left-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-7px">
              u-border-left-style-solid <br>
              u-border-left-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-8px">
              u-border-left-style-solid <br>
              u-border-left-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-9px">
              u-border-left-style-solid <br>
              u-border-left-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-10px">
              u-border-left-style-solid <br>
              u-border-left-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-11px">
              u-border-left-style-solid <br>
              u-border-left-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-12px">
              u-border-left-style-solid <br>
              u-border-left-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-13px">
              u-border-left-style-solid <br>
              u-border-left-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-14px">
              u-border-left-style-solid <br>
              u-border-left-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-15px">
              u-border-left-style-solid <br>
              u-border-left-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-16px">
              u-border-left-style-solid <br>
              u-border-left-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-17px">
              u-border-left-style-solid <br>
              u-border-left-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-18px">
              u-border-left-style-solid <br>
              u-border-left-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-19px">
              u-border-left-style-solid <br>
              u-border-left-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-color-md-orange-900
              u-border-left-width-20px">
              u-border-left-style-solid <br>
              u-border-left-width-20px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-0px">
              u-border-right-style-solid <br>
              u-border-right-width-0px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-1px">
              u-border-right-style-solid <br>
              u-border-right-width-1px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-2px">
              u-border-right-style-solid <br>
              u-border-right-width-2px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-3px">
              u-border-right-style-solid <br>
              u-border-right-width-3px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-4px">
              u-border-right-style-solid <br>
              u-border-right-width-4px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-5px">
              u-border-right-style-solid <br>
              u-border-right-width-5px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-6px">
              u-border-right-style-solid <br>
              u-border-right-width-6px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-7px">
              u-border-right-style-solid <br>
              u-border-right-width-7px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-8px">
              u-border-right-style-solid <br>
              u-border-right-width-8px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-9px">
              u-border-right-style-solid <br>
              u-border-right-width-9px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-10px">
              u-border-right-style-solid <br>
              u-border-right-width-10px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-11px">
              u-border-right-style-solid <br>
              u-border-right-width-11px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-12px">
              u-border-right-style-solid <br>
              u-border-right-width-12px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-13px">
              u-border-right-style-solid <br>
              u-border-right-width-13px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-14px">
              u-border-right-style-solid <br>
              u-border-right-width-14px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-15px">
              u-border-right-style-solid <br>
              u-border-right-width-15px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-16px">
              u-border-right-style-solid <br>
              u-border-right-width-16px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-17px">
              u-border-right-style-solid <br>
              u-border-right-width-17px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-18px">
              u-border-right-style-solid <br>
              u-border-right-width-18px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-19px">
              u-border-right-style-solid <br>
              u-border-right-width-19px</div><div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-color-md-orange-900
              u-border-right-width-20px">
              u-border-right-style-solid <br>
              u-border-right-width-20px</div>
</div>

       
     
The parameterized border renders.
u-border-top-style-solid
u-border-top-width-0px
u-border-top-style-solid
u-border-top-width-1px
u-border-top-style-solid
u-border-top-width-2px
u-border-top-style-solid
u-border-top-width-3px
u-border-top-style-solid
u-border-top-width-4px
u-border-top-style-solid
u-border-top-width-5px
u-border-top-style-solid
u-border-top-width-6px
u-border-top-style-solid
u-border-top-width-7px
u-border-top-style-solid
u-border-top-width-8px
u-border-top-style-solid
u-border-top-width-9px
u-border-top-style-solid
u-border-top-width-10px
u-border-top-style-solid
u-border-top-width-11px
u-border-top-style-solid
u-border-top-width-12px
u-border-top-style-solid
u-border-top-width-13px
u-border-top-style-solid
u-border-top-width-14px
u-border-top-style-solid
u-border-top-width-15px
u-border-top-style-solid
u-border-top-width-16px
u-border-top-style-solid
u-border-top-width-17px
u-border-top-style-solid
u-border-top-width-18px
u-border-top-style-solid
u-border-top-width-19px
u-border-top-style-solid
u-border-top-width-20px
u-border-bottom-style-solid
u-border-bottom-width-0px
u-border-bottom-style-solid
u-border-bottom-width-1px
u-border-bottom-style-solid
u-border-bottom-width-2px
u-border-bottom-style-solid
u-border-bottom-width-3px
u-border-bottom-style-solid
u-border-bottom-width-4px
u-border-bottom-style-solid
u-border-bottom-width-5px
u-border-bottom-style-solid
u-border-bottom-width-6px
u-border-bottom-style-solid
u-border-bottom-width-7px
u-border-bottom-style-solid
u-border-bottom-width-8px
u-border-bottom-style-solid
u-border-bottom-width-9px
u-border-bottom-style-solid
u-border-bottom-width-10px
u-border-bottom-style-solid
u-border-bottom-width-11px
u-border-bottom-style-solid
u-border-bottom-width-12px
u-border-bottom-style-solid
u-border-bottom-width-13px
u-border-bottom-style-solid
u-border-bottom-width-14px
u-border-bottom-style-solid
u-border-bottom-width-15px
u-border-bottom-style-solid
u-border-bottom-width-16px
u-border-bottom-style-solid
u-border-bottom-width-17px
u-border-bottom-style-solid
u-border-bottom-width-18px
u-border-bottom-style-solid
u-border-bottom-width-19px
u-border-bottom-style-solid
u-border-bottom-width-20px
u-border-left-style-solid
u-border-left-width-0px
u-border-left-style-solid
u-border-left-width-1px
u-border-left-style-solid
u-border-left-width-2px
u-border-left-style-solid
u-border-left-width-3px
u-border-left-style-solid
u-border-left-width-4px
u-border-left-style-solid
u-border-left-width-5px
u-border-left-style-solid
u-border-left-width-6px
u-border-left-style-solid
u-border-left-width-7px
u-border-left-style-solid
u-border-left-width-8px
u-border-left-style-solid
u-border-left-width-9px
u-border-left-style-solid
u-border-left-width-10px
u-border-left-style-solid
u-border-left-width-11px
u-border-left-style-solid
u-border-left-width-12px
u-border-left-style-solid
u-border-left-width-13px
u-border-left-style-solid
u-border-left-width-14px
u-border-left-style-solid
u-border-left-width-15px
u-border-left-style-solid
u-border-left-width-16px
u-border-left-style-solid
u-border-left-width-17px
u-border-left-style-solid
u-border-left-width-18px
u-border-left-style-solid
u-border-left-width-19px
u-border-left-style-solid
u-border-left-width-20px
u-border-right-style-solid
u-border-right-width-0px
u-border-right-style-solid
u-border-right-width-1px
u-border-right-style-solid
u-border-right-width-2px
u-border-right-style-solid
u-border-right-width-3px
u-border-right-style-solid
u-border-right-width-4px
u-border-right-style-solid
u-border-right-width-5px
u-border-right-style-solid
u-border-right-width-6px
u-border-right-style-solid
u-border-right-width-7px
u-border-right-style-solid
u-border-right-width-8px
u-border-right-style-solid
u-border-right-width-9px
u-border-right-style-solid
u-border-right-width-10px
u-border-right-style-solid
u-border-right-width-11px
u-border-right-style-solid
u-border-right-width-12px
u-border-right-style-solid
u-border-right-width-13px
u-border-right-style-solid
u-border-right-width-14px
u-border-right-style-solid
u-border-right-width-15px
u-border-right-style-solid
u-border-right-width-16px
u-border-right-style-solid
u-border-right-width-17px
u-border-right-style-solid
u-border-right-width-18px
u-border-right-style-solid
u-border-right-width-19px
u-border-right-style-solid
u-border-right-width-20px
Border
u-b[side]s-solid and u-b[side]w[factor]px is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">

<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw0px">
            u-bts-solid<br>
            u-btw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw1px">
            u-bts-solid<br>
            u-btw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw2px">
            u-bts-solid<br>
            u-btw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw3px">
            u-bts-solid<br>
            u-btw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw4px">
            u-bts-solid<br>
            u-btw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw5px">
            u-bts-solid<br>
            u-btw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw6px">
            u-bts-solid<br>
            u-btw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw7px">
            u-bts-solid<br>
            u-btw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw8px">
            u-bts-solid<br>
            u-btw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw9px">
            u-bts-solid<br>
            u-btw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw10px">
            u-bts-solid<br>
            u-btw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw11px">
            u-bts-solid<br>
            u-btw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw12px">
            u-bts-solid<br>
            u-btw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw13px">
            u-bts-solid<br>
            u-btw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw14px">
            u-bts-solid<br>
            u-btw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw15px">
            u-bts-solid<br>
            u-btw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw16px">
            u-bts-solid<br>
            u-btw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw17px">
            u-bts-solid<br>
            u-btw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw18px">
            u-bts-solid<br>
            u-btw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw19px">
            u-bts-solid<br>
            u-btw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bts-solid
            u-border-color-md-orange-900
            u-btw20px">
            u-bts-solid<br>
            u-btw20px
</div>
<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw0px">
            u-bbs-solid<br>
            u-bbw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw1px">
            u-bbs-solid<br>
            u-bbw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw2px">
            u-bbs-solid<br>
            u-bbw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw3px">
            u-bbs-solid<br>
            u-bbw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw4px">
            u-bbs-solid<br>
            u-bbw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw5px">
            u-bbs-solid<br>
            u-bbw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw6px">
            u-bbs-solid<br>
            u-bbw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw7px">
            u-bbs-solid<br>
            u-bbw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw8px">
            u-bbs-solid<br>
            u-bbw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw9px">
            u-bbs-solid<br>
            u-bbw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw10px">
            u-bbs-solid<br>
            u-bbw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw11px">
            u-bbs-solid<br>
            u-bbw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw12px">
            u-bbs-solid<br>
            u-bbw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw13px">
            u-bbs-solid<br>
            u-bbw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw14px">
            u-bbs-solid<br>
            u-bbw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw15px">
            u-bbs-solid<br>
            u-bbw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw16px">
            u-bbs-solid<br>
            u-bbw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw17px">
            u-bbs-solid<br>
            u-bbw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw18px">
            u-bbs-solid<br>
            u-bbw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw19px">
            u-bbs-solid<br>
            u-bbw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bbs-solid
            u-border-color-md-orange-900
            u-bbw20px">
            u-bbs-solid<br>
            u-bbw20px
</div>
<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw0px">
            u-bls-solid<br>
            u-blw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw1px">
            u-bls-solid<br>
            u-blw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw2px">
            u-bls-solid<br>
            u-blw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw3px">
            u-bls-solid<br>
            u-blw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw4px">
            u-bls-solid<br>
            u-blw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw5px">
            u-bls-solid<br>
            u-blw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw6px">
            u-bls-solid<br>
            u-blw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw7px">
            u-bls-solid<br>
            u-blw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw8px">
            u-bls-solid<br>
            u-blw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw9px">
            u-bls-solid<br>
            u-blw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw10px">
            u-bls-solid<br>
            u-blw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw11px">
            u-bls-solid<br>
            u-blw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw12px">
            u-bls-solid<br>
            u-blw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw13px">
            u-bls-solid<br>
            u-blw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw14px">
            u-bls-solid<br>
            u-blw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw15px">
            u-bls-solid<br>
            u-blw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw16px">
            u-bls-solid<br>
            u-blw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw17px">
            u-bls-solid<br>
            u-blw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw18px">
            u-bls-solid<br>
            u-blw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw19px">
            u-bls-solid<br>
            u-blw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-bls-solid
            u-border-color-md-orange-900
            u-blw20px">
            u-bls-solid<br>
            u-blw20px
</div>
<div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw0px">
            u-brs-solid<br>
            u-brw0px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw1px">
            u-brs-solid<br>
            u-brw1px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw2px">
            u-brs-solid<br>
            u-brw2px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw3px">
            u-brs-solid<br>
            u-brw3px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw4px">
            u-brs-solid<br>
            u-brw4px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw5px">
            u-brs-solid<br>
            u-brw5px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw6px">
            u-brs-solid<br>
            u-brw6px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw7px">
            u-brs-solid<br>
            u-brw7px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw8px">
            u-brs-solid<br>
            u-brw8px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw9px">
            u-brs-solid<br>
            u-brw9px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw10px">
            u-brs-solid<br>
            u-brw10px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw11px">
            u-brs-solid<br>
            u-brw11px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw12px">
            u-brs-solid<br>
            u-brw12px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw13px">
            u-brs-solid<br>
            u-brw13px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw14px">
            u-brs-solid<br>
            u-brw14px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw15px">
            u-brs-solid<br>
            u-brw15px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw16px">
            u-brs-solid<br>
            u-brw16px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw17px">
            u-brs-solid<br>
            u-brw17px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw18px">
            u-brs-solid<br>
            u-brw18px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw19px">
            u-brs-solid<br>
            u-brw19px
</div><div class="TestBox
            u-margin-bottom-1rem
            u-padding-1rem
            u-brs-solid
            u-border-color-md-orange-900
            u-brw20px">
            u-brs-solid<br>
            u-brw20px
</div>
</div>

       
     
The parameterized border renders.
u-bts-solid
u-btw0px
u-bts-solid
u-btw1px
u-bts-solid
u-btw2px
u-bts-solid
u-btw3px
u-bts-solid
u-btw4px
u-bts-solid
u-btw5px
u-bts-solid
u-btw6px
u-bts-solid
u-btw7px
u-bts-solid
u-btw8px
u-bts-solid
u-btw9px
u-bts-solid
u-btw10px
u-bts-solid
u-btw11px
u-bts-solid
u-btw12px
u-bts-solid
u-btw13px
u-bts-solid
u-btw14px
u-bts-solid
u-btw15px
u-bts-solid
u-btw16px
u-bts-solid
u-btw17px
u-bts-solid
u-btw18px
u-bts-solid
u-btw19px
u-bts-solid
u-btw20px
u-bbs-solid
u-bbw0px
u-bbs-solid
u-bbw1px
u-bbs-solid
u-bbw2px
u-bbs-solid
u-bbw3px
u-bbs-solid
u-bbw4px
u-bbs-solid
u-bbw5px
u-bbs-solid
u-bbw6px
u-bbs-solid
u-bbw7px
u-bbs-solid
u-bbw8px
u-bbs-solid
u-bbw9px
u-bbs-solid
u-bbw10px
u-bbs-solid
u-bbw11px
u-bbs-solid
u-bbw12px
u-bbs-solid
u-bbw13px
u-bbs-solid
u-bbw14px
u-bbs-solid
u-bbw15px
u-bbs-solid
u-bbw16px
u-bbs-solid
u-bbw17px
u-bbs-solid
u-bbw18px
u-bbs-solid
u-bbw19px
u-bbs-solid
u-bbw20px
u-bls-solid
u-blw0px
u-bls-solid
u-blw1px
u-bls-solid
u-blw2px
u-bls-solid
u-blw3px
u-bls-solid
u-blw4px
u-bls-solid
u-blw5px
u-bls-solid
u-blw6px
u-bls-solid
u-blw7px
u-bls-solid
u-blw8px
u-bls-solid
u-blw9px
u-bls-solid
u-blw10px
u-bls-solid
u-blw11px
u-bls-solid
u-blw12px
u-bls-solid
u-blw13px
u-bls-solid
u-blw14px
u-bls-solid
u-blw15px
u-bls-solid
u-blw16px
u-bls-solid
u-blw17px
u-bls-solid
u-blw18px
u-bls-solid
u-blw19px
u-bls-solid
u-blw20px
u-brs-solid
u-brw0px
u-brs-solid
u-brw1px
u-brs-solid
u-brw2px
u-brs-solid
u-brw3px
u-brs-solid
u-brw4px
u-brs-solid
u-brw5px
u-brs-solid
u-brw6px
u-brs-solid
u-brw7px
u-brs-solid
u-brw8px
u-brs-solid
u-brw9px
u-brs-solid
u-brw10px
u-brs-solid
u-brw11px
u-brs-solid
u-brw12px
u-brs-solid
u-brw13px
u-brs-solid
u-brw14px
u-brs-solid
u-brw15px
u-brs-solid
u-brw16px
u-brs-solid
u-brw17px
u-brs-solid
u-brw18px
u-brs-solid
u-brw19px
u-brs-solid
u-brw20px
Border
u-border-style-[style] is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-none
              u-border-width-5px">
              u-border-style-none</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-dotted
              u-border-width-5px">
              u-border-style-dotted</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-dashed
              u-border-width-5px">
              u-border-style-dashed</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-solid
              u-border-width-5px">
              u-border-style-solid</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-double
              u-border-width-5px">
              u-border-style-double</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-groove
              u-border-width-5px">
              u-border-style-groove</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-ridge
              u-border-width-5px">
              u-border-style-ridge</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-inset
              u-border-width-5px">
              u-border-style-inset</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-outset
              u-border-width-5px">
              u-border-style-outset</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-initial
              u-border-width-5px">
              u-border-style-initial</div>
  <div class="u-background-color-sf-charcoal-blue
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-style-inherit
              u-border-width-5px">
              u-border-style-inherit</div>
</div>

       
     
The border style renders.
u-border-style-none
u-border-style-dotted
u-border-style-dashed
u-border-style-solid
u-border-style-double
u-border-style-groove
u-border-style-ridge
u-border-style-inset
u-border-style-outset
u-border-style-initial
u-border-style-inherit
Border
u-border-[side]-style-[style] and u-border-[side]-width-5px is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-none
              u-border-top-width-5px">
              u-border-top-style-none
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-dotted
              u-border-top-width-5px">
              u-border-top-style-dotted
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-dashed
              u-border-top-width-5px">
              u-border-top-style-dashed
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-solid
              u-border-top-width-5px">
              u-border-top-style-solid
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-double
              u-border-top-width-5px">
              u-border-top-style-double
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-groove
              u-border-top-width-5px">
              u-border-top-style-groove
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-ridge
              u-border-top-width-5px">
              u-border-top-style-ridge
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-inset
              u-border-top-width-5px">
              u-border-top-style-inset
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-outset
              u-border-top-width-5px">
              u-border-top-style-outset
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-initial
              u-border-top-width-5px">
              u-border-top-style-initial
              u-border-top-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-top-style-inherit
              u-border-top-width-5px">
              u-border-top-style-inherit
              u-border-top-width-5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-none
              u-border-bottom-width-5px">
              u-border-bottom-style-none
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-dotted
              u-border-bottom-width-5px">
              u-border-bottom-style-dotted
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-dashed
              u-border-bottom-width-5px">
              u-border-bottom-style-dashed
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-solid
              u-border-bottom-width-5px">
              u-border-bottom-style-solid
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-double
              u-border-bottom-width-5px">
              u-border-bottom-style-double
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-groove
              u-border-bottom-width-5px">
              u-border-bottom-style-groove
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-ridge
              u-border-bottom-width-5px">
              u-border-bottom-style-ridge
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-inset
              u-border-bottom-width-5px">
              u-border-bottom-style-inset
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-outset
              u-border-bottom-width-5px">
              u-border-bottom-style-outset
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-initial
              u-border-bottom-width-5px">
              u-border-bottom-style-initial
              u-border-bottom-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-bottom-style-inherit
              u-border-bottom-width-5px">
              u-border-bottom-style-inherit
              u-border-bottom-width-5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-none
              u-border-left-width-5px">
              u-border-left-style-none
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-dotted
              u-border-left-width-5px">
              u-border-left-style-dotted
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-dashed
              u-border-left-width-5px">
              u-border-left-style-dashed
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-solid
              u-border-left-width-5px">
              u-border-left-style-solid
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-double
              u-border-left-width-5px">
              u-border-left-style-double
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-groove
              u-border-left-width-5px">
              u-border-left-style-groove
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-ridge
              u-border-left-width-5px">
              u-border-left-style-ridge
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-inset
              u-border-left-width-5px">
              u-border-left-style-inset
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-outset
              u-border-left-width-5px">
              u-border-left-style-outset
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-initial
              u-border-left-width-5px">
              u-border-left-style-initial
              u-border-left-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-left-style-inherit
              u-border-left-width-5px">
              u-border-left-style-inherit
              u-border-left-width-5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-none
              u-border-right-width-5px">
              u-border-right-style-none
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-dotted
              u-border-right-width-5px">
              u-border-right-style-dotted
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-dashed
              u-border-right-width-5px">
              u-border-right-style-dashed
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-solid
              u-border-right-width-5px">
              u-border-right-style-solid
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-double
              u-border-right-width-5px">
              u-border-right-style-double
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-groove
              u-border-right-width-5px">
              u-border-right-style-groove
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-ridge
              u-border-right-width-5px">
              u-border-right-style-ridge
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-inset
              u-border-right-width-5px">
              u-border-right-style-inset
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-outset
              u-border-right-width-5px">
              u-border-right-style-outset
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-initial
              u-border-right-width-5px">
              u-border-right-style-initial
              u-border-right-width-5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-border-right-style-inherit
              u-border-right-width-5px">
              u-border-right-style-inherit
              u-border-right-width-5px</div>
</div>

       
     
The border style renders.
u-border-top-style-none u-border-top-width-5px
u-border-top-style-dotted u-border-top-width-5px
u-border-top-style-dashed u-border-top-width-5px
u-border-top-style-solid u-border-top-width-5px
u-border-top-style-double u-border-top-width-5px
u-border-top-style-groove u-border-top-width-5px
u-border-top-style-ridge u-border-top-width-5px
u-border-top-style-inset u-border-top-width-5px
u-border-top-style-outset u-border-top-width-5px
u-border-top-style-initial u-border-top-width-5px
u-border-top-style-inherit u-border-top-width-5px
u-border-bottom-style-none u-border-bottom-width-5px
u-border-bottom-style-dotted u-border-bottom-width-5px
u-border-bottom-style-dashed u-border-bottom-width-5px
u-border-bottom-style-solid u-border-bottom-width-5px
u-border-bottom-style-double u-border-bottom-width-5px
u-border-bottom-style-groove u-border-bottom-width-5px
u-border-bottom-style-ridge u-border-bottom-width-5px
u-border-bottom-style-inset u-border-bottom-width-5px
u-border-bottom-style-outset u-border-bottom-width-5px
u-border-bottom-style-initial u-border-bottom-width-5px
u-border-bottom-style-inherit u-border-bottom-width-5px
u-border-left-style-none u-border-left-width-5px
u-border-left-style-dotted u-border-left-width-5px
u-border-left-style-dashed u-border-left-width-5px
u-border-left-style-solid u-border-left-width-5px
u-border-left-style-double u-border-left-width-5px
u-border-left-style-groove u-border-left-width-5px
u-border-left-style-ridge u-border-left-width-5px
u-border-left-style-inset u-border-left-width-5px
u-border-left-style-outset u-border-left-width-5px
u-border-left-style-initial u-border-left-width-5px
u-border-left-style-inherit u-border-left-width-5px
u-border-right-style-none u-border-right-width-5px
u-border-right-style-dotted u-border-right-width-5px
u-border-right-style-dashed u-border-right-width-5px
u-border-right-style-solid u-border-right-width-5px
u-border-right-style-double u-border-right-width-5px
u-border-right-style-groove u-border-right-width-5px
u-border-right-style-ridge u-border-right-width-5px
u-border-right-style-inset u-border-right-width-5px
u-border-right-style-outset u-border-right-width-5px
u-border-right-style-initial u-border-right-width-5px
u-border-right-style-inherit u-border-right-width-5px
Border
u-b[side]s-[style] and u-b[side]w5px is applied.
                 

<div class="u-flex u-flex-column u-width-40rem">
  
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-none
              u-btw5px">
              u-bts-none
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-dotted
              u-btw5px">
              u-bts-dotted
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-dashed
              u-btw5px">
              u-bts-dashed
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-solid
              u-btw5px">
              u-bts-solid
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-double
              u-btw5px">
              u-bts-double
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-groove
              u-btw5px">
              u-bts-groove
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-ridge
              u-btw5px">
              u-bts-ridge
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-inset
              u-btw5px">
              u-bts-inset
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-outset
              u-btw5px">
              u-bts-outset
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-initial
              u-btw5px">
              u-bts-initial
              <br>
              u-bwt5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bts-inherit
              u-btw5px">
              u-bts-inherit
              <br>
              u-bwt5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-none
              u-bbw5px">
              u-bbs-none
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-dotted
              u-bbw5px">
              u-bbs-dotted
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-dashed
              u-bbw5px">
              u-bbs-dashed
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-solid
              u-bbw5px">
              u-bbs-solid
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-double
              u-bbw5px">
              u-bbs-double
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-groove
              u-bbw5px">
              u-bbs-groove
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-ridge
              u-bbw5px">
              u-bbs-ridge
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-inset
              u-bbw5px">
              u-bbs-inset
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-outset
              u-bbw5px">
              u-bbs-outset
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-initial
              u-bbw5px">
              u-bbs-initial
              <br>
              u-bwb5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bbs-inherit
              u-bbw5px">
              u-bbs-inherit
              <br>
              u-bwb5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-none
              u-blw5px">
              u-bls-none
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-dotted
              u-blw5px">
              u-bls-dotted
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-dashed
              u-blw5px">
              u-bls-dashed
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-solid
              u-blw5px">
              u-bls-solid
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-double
              u-blw5px">
              u-bls-double
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-groove
              u-blw5px">
              u-bls-groove
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-ridge
              u-blw5px">
              u-bls-ridge
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-inset
              u-blw5px">
              u-bls-inset
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-outset
              u-blw5px">
              u-bls-outset
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-initial
              u-blw5px">
              u-bls-initial
              <br>
              u-bwl5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-bls-inherit
              u-blw5px">
              u-bls-inherit
              <br>
              u-bwl5px</div>
  
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-none
              u-brw5px">
              u-brs-none
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-dotted
              u-brw5px">
              u-brs-dotted
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-dashed
              u-brw5px">
              u-brs-dashed
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-solid
              u-brw5px">
              u-brs-solid
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-double
              u-brw5px">
              u-brs-double
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-groove
              u-brw5px">
              u-brs-groove
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-ridge
              u-brw5px">
              u-brs-ridge
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-inset
              u-brw5px">
              u-brs-inset
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-outset
              u-brw5px">
              u-brs-outset
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-initial
              u-brw5px">
              u-brs-initial
              <br>
              u-bwr5px</div>
  <div class="TestBox
              u-margin-bottom-1rem
              u-padding-1rem
              u-brs-inherit
              u-brw5px">
              u-brs-inherit
              <br>
              u-bwr5px</div>
</div>

       
     
The border style renders.
u-bts-none
u-bwt5px
u-bts-dotted
u-bwt5px
u-bts-dashed
u-bwt5px
u-bts-solid
u-bwt5px
u-bts-double
u-bwt5px
u-bts-groove
u-bwt5px
u-bts-ridge
u-bwt5px
u-bts-inset
u-bwt5px
u-bts-outset
u-bwt5px
u-bts-initial
u-bwt5px
u-bts-inherit
u-bwt5px
u-bbs-none
u-bwb5px
u-bbs-dotted
u-bwb5px
u-bbs-dashed
u-bwb5px
u-bbs-solid
u-bwb5px
u-bbs-double
u-bwb5px
u-bbs-groove
u-bwb5px
u-bbs-ridge
u-bwb5px
u-bbs-inset
u-bwb5px
u-bbs-outset
u-bwb5px
u-bbs-initial
u-bwb5px
u-bbs-inherit
u-bwb5px
u-bls-none
u-bwl5px
u-bls-dotted
u-bwl5px
u-bls-dashed
u-bwl5px
u-bls-solid
u-bwl5px
u-bls-double
u-bwl5px
u-bls-groove
u-bwl5px
u-bls-ridge
u-bwl5px
u-bls-inset
u-bwl5px
u-bls-outset
u-bwl5px
u-bls-initial
u-bwl5px
u-bls-inherit
u-bwl5px
u-brs-none
u-bwr5px
u-brs-dotted
u-bwr5px
u-brs-dashed
u-bwr5px
u-brs-solid
u-bwr5px
u-brs-double
u-bwr5px
u-brs-groove
u-bwr5px
u-brs-ridge
u-bwr5px
u-brs-inset
u-bwr5px
u-brs-outset
u-bwr5px
u-brs-initial
u-bwr5px
u-brs-inherit
u-bwr5px
Tests for @superflycss/utilities-layout
u-sizeFit
u-sizeFit is applied.
                 

<div class="u-flex TestCanvas">
  <div class="TestBox u-sizeFit 
                u-background-color-md-amber-900">u-sizeFit me.</div>
</div>

       
     
The the flex item is shrink wrapped and does not expand.
u-sizeFit me.
u-sizeFill
u-sizeFill is applied.
                 

<div class="u-flex  TestCanvas">
  <div class="TestBoxLeft u-sizeFit 
                u-background-color-md-amber-900">u-sizeFit me.</div>
  <div class="u-sizeFill TestBox">
    u-sizeFill me.
  </div>
</div>

       
     
The the flex item expands to the end of the container.
u-sizeFit me.
u-sizeFill me.
.u-[size]-sizeFit
.u-[size]-sizeFit is applied.
                 


<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-sizeFit u-background-color-md-amber-900">
    u-sizeFit Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-md-size-sizeFit u-background-color-md-amber-900">
    u-sm-sizeFit Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-md-sizeFit u-background-color-md-amber-900">
    u-md-sizeFit Me
  </div>
</div>

<div class="u-flex TestCanvas">
  <div class="TextBox u-size3of4 u-lg-sizeFit u-background-color-md-amber-900">
    u-lg-sizeFit Me
  </div>
</div>


       
     
The TestBox should sizeFit when the viewport is bigger than [size]-viewport. Downsize the viewport to see the responsive fit switch off and the u-size3of4 switch on.
u-sizeFit Me
u-sm-sizeFit Me
u-md-sizeFit Me
u-lg-sizeFit Me
.u-[size]-sizeFill
.u-[size]-sizeFill is applied.
                 


<div class="u-flex TestCanvas">
  <div class="TextBox u-sizeFill u-background-color-md-amber-900">
    u-sizeFill Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-sm-sizeFill u-background-color-md-amber-900">
    u-sm-sizeFill Me
  </div>
</div>
<div class="u-flex TestCanvas">
  <div class="TextBox u-md-sizeFill u-background-color-md-amber-900">
    u-md-sizeFill Me
  </div>
</div>

<div class="u-flex TestCanvas">
  <div class="TextBox u-lg-sizeFill u-background-color-md-amber-900">
    u-lg-sizeFill Me
  </div>
</div>


       
     
The TestBox should sizeFill when the viewport is bigger than [size]-viewport. Downsize the viewport to see the responsive fit switch off.
u-sizeFill Me
u-sm-sizeFill Me
u-md-sizeFill Me
u-lg-sizeFill Me
u-sizeFill
u-sizeFill is applied.
                 

 <div class="u-flex TestCanvas">
      <div class="u-sizeFill TestBoxLeft">
        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
        aliquip nec. Atqui diceret ceteros.
      </div>
      <div class="u-sizeFill TestBoxLeft">
        content
      </div>
      <div class="u-sizeFill TestBox">
        content
      </div>
</div>

       
     
Space is distributed evenly regardless of contained content.
Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros.
content
content
u-sizeFillAlt
u-sizeFillAlt is applied.
                 

 <div class="u-flex TestCanvas">
      <div class="u-sizeFillAlt TestBoxLeft">
        Lorem ipsum dolor sit amet, probo option similique vix te, ei summo
        aliquip nec. Atqui diceret ceteros.
      </div>
      <div class="u-sizeFillAlt TestBoxLeft">
        content
      </div>
      <div class="u-sizeFillAlt TestBox">
        even more content in here
      </div>
</div>
 <div class="u-flex TestCanvas">
      <div class="u-sizeFillAlt TestBoxLeft">
        aliquip nec. Atqui diceret ceteros.
      </div>
      <div class="u-sizeFillAlt TestBoxLeft">
        content
      </div>
      <div class="u-sizeFillAlt TestBox">
        even more content in here
      </div>
</div>

       
     
The space is distributed based on the width taken up by content content.
Lorem ipsum dolor sit amet, probo option similique vix te, ei summo aliquip nec. Atqui diceret ceteros.
content
even more content in here
aliquip nec. Atqui diceret ceteros.
content
even more content in here
u-sizeFull
u-sizeFull is applied.
                 

 <div class="TestCanvas">
      <div class="u-sizeFull TestBox">
        Lorem ipsum.
      </div>
</div>

       
     
The elements width is set to 100% and it expands to the full width of the container.
Lorem ipsum.
u-sizeXofY
u-sizeXofY is applied.
                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-size11of12 TestBox">11 of 12</div>
 </div>


       
     
The item is sized by the ratio.
The flex item size to x/y width of the parent container.
1 of 2
1 of 3
2 of 3
1 of 4
2 of 4
3 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
1 of 8
2 of 8
3 of 8
4 of 8
5 of 8
6 of 8
7 of 8
1 of 10
1 of 10
2 of 10
3 of 10
4 of 10
5 of 10
6 of 10
7 of 10
8 of 10
9 of 10
1 of 12
2 of 12
3 of 12
4 of 12
5 of 12
6 of 12
7 of 12
8 of 12
9 of 12
10 of 12
11 of 12
u-sm-sizeXofY
u-sm-sizeXofY is applied.
                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-sm-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-sm-size11of12 TestBox">11 of 12</div>
 </div>


       
     
The item is sized by the ratio if the reponsive utility is triggered.
The flex item size to x/y width of the parent container.
1 of 2
1 of 3
2 of 3
1 of 4
2 of 4
3 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
1 of 8
2 of 8
3 of 8
4 of 8
5 of 8
6 of 8
7 of 8
1 of 10
1 of 10
2 of 10
3 of 10
4 of 10
5 of 10
6 of 10
7 of 10
8 of 10
9 of 10
1 of 12
2 of 12
3 of 12
4 of 12
5 of 12
6 of 12
7 of 12
8 of 12
9 of 12
10 of 12
11 of 12
u-md-sizeXofY
u-md-sizeXofY is applied.
                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-md-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-md-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-md-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-md-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-md-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-md-size11of12 TestBox">11 of 12</div>
 </div>


       
     
The item is sized by the ratio if the reponsive utility is triggered.
The flex item size to x/y width of the parent container.
1 of 2
1 of 3
2 of 3
1 of 4
2 of 4
3 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
1 of 8
2 of 8
3 of 8
4 of 8
5 of 8
6 of 8
7 of 8
1 of 10
1 of 10
2 of 10
3 of 10
4 of 10
5 of 10
6 of 10
7 of 10
8 of 10
9 of 10
1 of 12
2 of 12
3 of 12
4 of 12
5 of 12
6 of 12
7 of 12
8 of 12
9 of 12
10 of 12
11 of 12
u-lg-sizeXofY
u-lg-sizeXofY is applied.
                 

The flex item size to x/y width of the parent container.
 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of2 TestBox">1 of 2</div>
</div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of3 TestBox">1 of 3</div>
 </div>
 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of3 TestBox">2 of 3</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of4 TestBox">1 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of4 TestBox">2 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of4 TestBox">3 of 4</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of6 TestBox">1 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of6 TestBox">2 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of6 TestBox">3 of 6</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of6 TestBox">4 of 6</div>
 </div>



 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of6 TestBox">5 of 6</div>
 </div>

 <div class="u-flex TestCanvas">
   <div class="u-lg-size1of8 TestBox">1 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of8 TestBox">2 of 8</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of8 TestBox">3 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of8 TestBox">4 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of8 TestBox">5 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size6of8 TestBox">6 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size7of8 TestBox">7 of 8</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of6 TestBox">1 of 10</div>
 </div>


 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of10 TestBox">1 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of10 TestBox">2 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of10 TestBox">3 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of10 TestBox">4 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of10 TestBox">5 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size6of10 TestBox">6 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size7of10 TestBox">7 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size8of10 TestBox">8 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size9of10 TestBox">9 of 10</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size1of12 TestBox">1 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size2of12 TestBox">2 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size3of12 TestBox">3 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size4of12 TestBox">4 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size5of12 TestBox">5 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size6of12 TestBox">6 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size7of12 TestBox">7 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size8of12 TestBox">8 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size9of12 TestBox">9 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size10of12 TestBox">10 of 12</div>
 </div>

 <div class="u-flex TestCanvas">
    <div class="u-lg-size11of12 TestBox">11 of 12</div>
 </div>

       
     
The item is sized by the ratio if the reponsive utility is triggered.
The flex item size to x/y width of the parent container.
1 of 2
1 of 3
2 of 3
1 of 4
2 of 4
3 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
1 of 8
2 of 8
3 of 8
4 of 8
5 of 8
6 of 8
7 of 8
1 of 10
1 of 10
2 of 10
3 of 10
4 of 10
5 of 10
6 of 10
7 of 10
8 of 10
9 of 10
1 of 12
2 of 12
3 of 12
4 of 12
5 of 12
6 of 12
7 of 12
8 of 12
9 of 12
10 of 12
11 of 12
Tests for @superflycss/utilities-layout
u-beforeXofY
u-beforeXofY is applied.
                 

<div class="TestBoxTop u-before1of2 dev-Box">1of2</div>
<div class="TestBox u-before1of3 dev-Box">1of3</div>
<div class="TestBox u-before2of3 dev-Box">2of3</div>

<div class="TestBox u-before1of4 dev-Box">1of4</div>
<div class="TestBox u-before2of4 dev-Box">2of4</div>
<div class="TestBox u-before3of4 dev-Box">3of4</div>    

<div class="TestBox u-before1of6 dev-Box">1of6</div>
<div class="TestBox u-before2of6 dev-Box">2of6</div>
<div class="TestBox u-before3of6 dev-Box">3of6</div>
<div class="TestBox u-before4of6 dev-Box">4of6</div>
<div class="TestBox u-before5of6 dev-Box">5of6</div>

<div class="TestBox u-before1of8 dev-Box">1of8</div>
<div class="TestBox u-before2of8 dev-Box">2of8</div>
<div class="TestBox u-before3of8 dev-Box">3of8</div>
<div class="TestBox u-before4of8 dev-Box">4of8</div>
<div class="TestBox u-before5of8 dev-Box">5of8</div>
<div class="TestBox u-before6of8 dev-Box">6of8</div>
<div class="TestBox u-before7of8 dev-Box">7of8</div>

<div class="TestBox u-before1of10 dev-Box">1of10</div>
<div class="TestBox u-before2of10 dev-Box">2of10</div>
<div class="TestBox u-before3of10 dev-Box">3of10</div>
<div class="TestBox u-before4of10 dev-Box">4of10</div>
<div class="TestBox u-before5of10 dev-Box">5of10</div>
<div class="TestBox u-before6of10 dev-Box">6of10</div>
<div class="TestBox u-before7of10 dev-Box">7of10</div>
<div class="TestBox u-before8of10 dev-Box">8of10</div>
<div class="TestBox u-before9of10 dev-Box">9of10</div>

<div class="TestBox u-before1of12 dev-Box">1of12</div>
<div class="TestBox u-before2of12 dev-Box">2of12</div>
<div class="TestBox u-before3of12 dev-Box">3of12</div>
<div class="TestBox u-before4of12 dev-Box">4of12</div>
<div class="TestBox u-before5of12 dev-Box">5of12</div>
<div class="TestBox u-before6of12 dev-Box">6of12</div>
<div class="TestBox u-before7of12 dev-Box">7of12</div>
<div class="TestBox u-before8of12 dev-Box">8of12</div>
<div class="TestBox u-before9of12 dev-Box">9of12</div>
<div class="TestBox u-before10of12 dev-Box">10of12</div>
<div class="TestBox u-before11of12 dev-Box">11of12</div>


       
     
offsets by X/Y of the parent container.
1of2
1of3
2of3
1of4
2of4
3of4
1of6
2of6
3of6
4of6
5of6
1of8
2of8
3of8
4of8
5of8
6of8
7of8
1of10
2of10
3of10
4of10
5of10
6of10
7of10
8of10
9of10
1of12
2of12
3of12
4of12
5of12
6of12
7of12
8of12
9of12
10of12
11of12
u-beforeNone
u-beforeNone is applied.
                 

<div class="TestBox 
            u-before4of12 
            u-beforeNone 
            u-sm-beforeNone 
            u-md-beforeNone 
            u-lg-beforeNone">
4of12 / beforeNone
</div>

       
     
it removes any margin space before.
4of12 / beforeNone
Tests for @superflycss/utilities-layout
u-afterXofY
u-afterXofY is applied.
                 

<div class="TestBoxTop u-after1of2 dev-Box">1of2</div>
<div class="TestBox u-after1of3 dev-Box">1of3</div>
<div class="TestBox u-after2of3 dev-Box">2of3</div>

<div class="TestBox u-after1of4 dev-Box">1of4</div>
<div class="TestBox u-after2of4 dev-Box">2of4</div>
<div class="TestBox u-after3of4 dev-Box">3of4</div>    

<div class="TestBox u-after1of6 dev-Box">1of6</div>
<div class="TestBox u-after2of6 dev-Box">2of6</div>
<div class="TestBox u-after3of6 dev-Box">3of6</div>
<div class="TestBox u-after4of6 dev-Box">4of6</div>
<div class="TestBox u-after5of6 dev-Box">5of6</div>

<div class="TestBox u-after1of8 dev-Box">1of8</div>
<div class="TestBox u-after2of8 dev-Box">2of8</div>
<div class="TestBox u-after3of8 dev-Box">3of8</div>
<div class="TestBox u-after4of8 dev-Box">4of8</div>
<div class="TestBox u-after5of8 dev-Box">5of8</div>
<div class="TestBox u-after6of8 dev-Box">6of8</div>
<div class="TestBox u-after7of8 dev-Box">7of8</div>

<div class="TestBox u-after1of10 dev-Box">1of10</div>
<div class="TestBox u-after2of10 dev-Box">2of10</div>
<div class="TestBox u-after3of10 dev-Box">3of10</div>
<div class="TestBox u-after4of10 dev-Box">4of10</div>
<div class="TestBox u-after5of10 dev-Box">5of10</div>
<div class="TestBox u-after6of10 dev-Box">6of10</div>
<div class="TestBox u-after7of10 dev-Box">7of10</div>
<div class="TestBox u-after8of10 dev-Box">8of10</div>
<div class="TestBox u-after9of10 dev-Box">9of10</div>

<div class="TestBox u-after1of12 dev-Box">1of12</div>
<div class="TestBox u-after2of12 dev-Box">2of12</div>
<div class="TestBox u-after3of12 dev-Box">3of12</div>
<div class="TestBox u-after4of12 dev-Box">4of12</div>
<div class="TestBox u-after5of12 dev-Box">5of12</div>
<div class="TestBox u-after6of12 dev-Box">6of12</div>
<div class="TestBox u-after7of12 dev-Box">7of12</div>
<div class="TestBox u-after8of12 dev-Box">8of12</div>
<div class="TestBox u-after9of12 dev-Box">9of12</div>
<div class="TestBox u-after10of12 dev-Box">10of12</div>
<div class="TestBox u-after11of12 dev-Box">11of12</div>


       
     
offsets by X/Y of the parent container.
1of2
1of3
2of3
1of4
2of4
3of4
1of6
2of6
3of6
4of6
5of6
1of8
2of8
3of8
4of8
5of8
6of8
7of8
1of10
2of10
3of10
4of10
5of10
6of10
7of10
8of10
9of10
1of12
2of12
3of12
4of12
5of12
6of12
7of12
8of12
9of12
10of12
11of12
u-afterNone
u-afterNone is applied.
                 

<div class="TestBox 
            u-after4of12 
            u-afterNone 
            u-sm-afterNone 
            u-md-afterNone 
            u-lg-afterNone">
4of12 / beforeNone
</div>

       
     
it removes any margin space after.
4of12 / beforeNone