Layr

v3.1.0GitHub

Utilities

Utilities are helper classes to modify components and override any existing styles.

Surfaces

This modules includes utility classes that refer to heavily visually style components. These utilities add background colors, text colors, border radius modifications and box shadows. All background color and colors listed in Settings are available.

  • Shadow 1
  • Border 2
  • Shadow 2
  • Border 3
  • Shadow 3
  • Border 4
View sourceHTML + CSS

HTML

<div class="o-Flex o-Flex--j--sa u-center">
  <div class="u-br2 u-bg--bluegreen u-offwhite u-sh--1 u-py4 u-px3 u-m2">
    <ul class="list--reset">
      <li>Shadow 1</li>
      <li>Border 2</li>
    </ul>
  </div>
  <div class="u-br3 u-bg--yellow u-offwhite u-sh--2 u-py4 u-px3 u-m2">
    <ul class="list--reset">
      <li>Shadow 2</li>
      <li>Border 3</li>
    </ul>
  </div>
  <div class="u-br4 u-bg--red u-offwhite u-sh--3 u-py4 u-px3 u-m2">
    <ul class="list--reset">
      <li>Shadow 3</li>
      <li>Border 4</li>
    </ul>
  </div>
</div>

CSS

/*
    Surfaces Utilities

    Corners...........Border Radius Utils.
    Background........Background Values (Color, None)
    Colors............Color and Fill Values
    Shadows...........Material Like Shadows.
  */

  /*----------Background Value Utilities----------*/

.u-bg--none { background: none; }
.u-bg--cover { background-position: cover; }

.u-bg--offwhite { background-color: var(--offwhite); }
.u-bg--black { background-color: var(--black); }
.u-bg--red { background-color: var(--red); }
.u-bg--blue { background-color: var(--blue); }
.u-bg--bluegreen { background-color: var(--bluegreen); }
.u-bg--yellow { background-color: var(--yellow); }
.u-bg--ygreen { background-color: var(--ygreen); }
.u-bg--green { background-color: var(--green); }
.u-bg--orange { background-color: var(--orange); }
.u-bg--purple { background-color: var(--purple); }
.u-bg--indigo { background-color: var(--indigo); }
.u-bg--fuchsia { background-color: var(--fuchsia); }
.u-bg--gray { background-color: var(--gray); }
.u-bg--palegray { background-color: var(--palegray); }
.u-bg--text { background-color: var(--text); }
.u-bg--ltgray { background-color: var(--litegray); }


  /*----------Color Value Utilities----------*/

.u-offwhite { color: var(--offwhite); }
.u-black { color: var(--black); }
.u-red { color: var(--red); }
.u-blue { color: var(--blue); }
.u-bluegreen { color: var(--bluegreen); }
.u-yellow { color: var(--yellow); }
.u-ygreen { color: var(--ygreen); }
.u-green { color: var(--green); }
.u-orange { color: var(--orange); }
.u-purple { color: var(--purple); }
.u-indigo { color: var(--indigo); }
.u-fuchsia { color: var(--fuchsia); }
.u-gray { color: var(--gray); }
.u-palegray { color: var(--palegray); }
.u-text { color: var(--text); }
.u-ltgray { color: var(--litegray); }

.u-fcc { fill: currentColor; }


  /*----------Corner / Border Radius Utilities----------*/

:root {
  --radius-1: calc(var(--base-spacing) * .25);
  --radius-2: calc(var(--base-spacing) * .5);
  --radius-3: calc(var(--base-spacing) * 1);
  --radius-4: calc(var(--base-spacing) * 1.5);
  --radius-5: calc(var(--base-spacing) * 2);
}

.u-br1 { border-radius: var(--radius-1); }
.u-br2 { border-radius: var(--radius-2); }
.u-br3 { border-radius: var(--radius-3); }
.u-br4 { border-radius: var(--radius-4); }
.u-br5 { border-radius: var(--radius-5); }

/* Named Percentage Sizes */

.u-br--quarter { border-radius: 25%; }
.u-br--half { border-radius: 50%; }
.u-br--full { border-radius: 100%; }


  /*----------Box Shadow Utilities----------*/

.u-sh--1 { box-shadow: var(--shadow-1); }
.u-sh--2 { box-shadow: var(--shadow-2); }
.u-sh--3 { box-shadow: var(--shadow-3); }

Layout

Layout has utilities for max-width/width, floats, clearfix, and display.

Floated Left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Floated Right
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
View sourceHTML + CSS

HTML

<div class="u-cf">
  <div class="o-col--5/12 u-fl">
    <h6 class="small u-caps">Floated Left</h6>
    <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small>
  </div>
  <div class="o-col--5/12 u-fr">
    <h6 class="small u-caps">Floated Right</h6>
    <small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</small>
  </div>
</div>

CSS

/*
  Layout Utilities

  Display..........Breakpoint Specific Display Properties.
  Floats...........Clearfix, Breakpoint Floats.
  Width............max-width, width
*/

/*----------Display Utilities----------*/

.u-inbl {
  display: inline-block;
}
.u-in {
  display: inline;
}
.u-bl {
  display: block;
}
.u-none {
  display: none;
}
.u-inflex {
  display: inline-flex;
}
.u-table {
  display: table-cell;
}

@media only screen and (min-width: 31.25rem) {
  .u-inbl\@sm {
    display: inline-block;
  }
  .u-in\@sm {
    display: inline;
  }
  .u-bl\@sm {
    display: block;
  }
  .u-none\@sm {
    display: none;
  }
  .u-inflex\@sm {
    display: inline-flex;
  }
  .u-table\@sm {
    display: table-cell;
  }
}

@media only screen and (min-width: 48rem) {
  .u-inbl\@md {
    display: inline-block;
  }
  .u-in\@md {
    display: inline;
  }
  .u-bl\@md {
    display: block;
  }
  .u-none\@md {
    display: none;
  }
  .u-inflex\@md {
    display: inline-flex;
  }
  .u-table\@md {
    display: table-cell;
  }
}

@media only screen and (min-width: 57.75rem) {
  .u-inbl\@lg {
    display: inline-block;
  }
  .u-in\@lg {
    display: inline;
  }
  .u-bl\@lg {
    display: block;
  }
  .u-none\@lg {
    display: none;
  }
  .u-inflex\@lg {
    display: inline-flex;
  }
  .u-table\@lg {
    display: table-cell;
  }
}

.u-va--top {
  vertical-align: top;
}
.u-va--middle {
  vertical-align: middle;
}
.u-va--baseline {
  vertical-align: baseline;
}


/*----------Float Utilities----------*/

.u-fl {
  float: left;
}
.u-fr {
  float: right;
}
.u-fn {
  float: none;
}

@media only screen and (min-width: 31.25rem) {
  .u-fl\@sm {
    float: left;
  }
  .u-fr\@sm {
    float: right;
  }
  .u-fn\@sm {
    float: none;
  }
}

@media only screen and (min-width: 48rem) {
  .u-fl\@md {
    float: left;
  }
  .u-fr\@md {
    float: right;
  }
  .u-fn\@md {
    float: none;
  }
}

@media only screen and (min-width: 57.75rem) {
  .u-fl\@lg {
    float: left;
  }
  .u-fr\@lg {
    float: right;
  }
  .u-fn\@lg {
    float: none;
  }
}

/* Clearfix */

.u-cf::after {
  content: '';
  clear: both;
  display: table;
}


.u-wd--100 { width: 100%; }
.u-mxw--auto { max-width: auto; }
.u-mxw--fit { max-width: 100%; }

Fit

Object Fit utilities for cover, contain and position.

Cover / Center Top
Placeholder Image
Cover / Center Bottom
Placeholder Image
Cover / Center Center
Placeholder Image
Contain
Placeholder Image
Fill
Placeholder Image
View sourceHTML + CSS

HTML

<div class="o-Flex o-Flex--wrap o-Flex--j--c">
  <div class="o-Column--5/12 u-m3">
    <h6 class="small u-caps">Cover / Center Top</h6>
    <div class="o-Intrinsic o-Intrinsic--3x1 u-bg--bluegreen">
      <img src="/layr/static/assets/filler-image.svg" class="o-Intrinsic__item u-fit--cover u-fit--tc" alt="Placeholder Image"/>
    </div>
  </div>
  <div class="o-Column--5/12 u-m3">
    <h6 class="small u-caps">Cover / Center Bottom</h6>
    <div class="o-Intrinsic o-Intrinsic--3x1 u-bg--bluegreen">
      <img src="/layr/static/assets/filler-image.svg" class="o-Intrinsic__item u-fit--cover u-fit--cb" alt="Placeholder Image"/>
    </div>
  </div>
  <div class="o-Column--5/12 u-m3">
    <h6 class="small u-caps">Cover / Center Center</h6>
    <div class="o-Intrinsic o-Intrinsic--3x1 u-bg--bluegreen">
      <img src="/layr/static/assets/filler-image.svg" class="o-Intrinsic__item u-fit--cover u-fit--cc" alt="Placeholder Image"/>
    </div>
  </div>
  <div class="o-Column--5/12 u-m3">
    <h6 class="small u-caps">Contain</h6>
    <div class="o-Intrinsic o-Intrinsic--3x1 u-bg--bluegreen">
      <img src="/layr/static/assets/filler-image.svg" class="o-Intrinsic__item u-fit--contain" alt="Placeholder Image"/>
    </div>
  </div>
  <div class="o-Column--5/12 u-m3">
    <h6 class="small u-caps">Fill</h6>
    <div class="o-Intrinsic o-Intrinsic--16x9 u-bg--bluegreen">
      <img src="/layr/static/assets/filler-image.svg" class="o-Intrinsic__item u-fit--fill" alt="Placeholder Image"/>
    </div>
  </div>
</div>

CSS

/*----------Object Fit Utilities----------*/

.u-fit--fill { object-fit: fill; }
.u-fit--contain { object-fit: contain; }
.u-fit--cover { object-fit: cover; }

.u-fit--ct { object-position: center top; }
.u-fit--cc { object-position: center center; }
.u-fit--cb { object-position: center bottom; }

Positioning

Position includes utilities for position, overflow and z-index.

CSS

/*
  Positioning Utilities

  Z-Index..........Small collection of common z-index values
  Overflow.........General, X and Y
  Position.........Absolute, Static, Fixed, Relative
*/

/*----------Z-Index Utilities----------*/

.u-z-n1 { z-index: -1; }
.u-z0 { z-index: 0; }
.u-z1 { z-index: 1; }
.u-z2 { z-index: 2; }
.u-z3 { z-index: 3; }
.u-z4 { z-index: 4; }
.u-z5 { z-index: 5; }
.u-z6 { z-index: 6; }
.u-z7 { z-index: 7; }
.u-z8 { z-index: 8; }
.u-z9 { z-index: 9; }
.u-zX { z-index: 10; }

.u-z--n { z-index: -1; }
.u-z--b { z-index: 0; }
.u-z--m { z-index: 500; }
.u-z--t { z-index: 999; }


/*----------Overflow Utilities----------*/

.u-ov--none { overflow: none; }
.u-ov--vis { overflow: visible; }
.u-ov--hid { overflow: hidden; }
.u-ov--sc { overflow: scroll; }

.u-ovx--none { overflow-x: none; }
.u-ovx--vis { overflow-x: visible; }
.u-ovx--hid { overflow-x: hidden; }
.u-ovx--sc { overflow-x: scroll; }

.u-ovy--none { overflow-y: none; }
.u-ovy--vis { overflow-y: visible; }
.u-ovy--hid { overflow-y: hidden; }
.u-ovy--sc { overflow-y: scroll; }


/*----------Position Utilities----------*/

.u-absolute { position: absolute; }
.u-fixed { position: fixed; }
.u-static { position: static; }
.u-relative { position: relative; }

.u-tblr {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Spacing

This module contains utilities for responsive margin and padding. This is an adapted from Basscss. (This example is best viewed on desktop to see the real effects of the spacing in context)

key value
m margin
p padding
x left & right
y top & bottom
a auto
l left
r right
t top
b bottom
View sourceHTML + CSS

HTML

<div>
  <div class="u-mb1">
    <div class="u-p3 u-bg--yellow">
    </div>
  </div>
  <div class="u-mb2">
    <div class="u-p3 u-bg--yellow">
    </div>
  </div>
  <div class="u-mb3">
    <div class="u-p3 u-bg--yellow">
    </div>
  </div>
  <div class="u-mb4">
    <div class="u-p3 u-bg--yellow">
    </div>
  </div>
  <div class="u-mb5">
    <div class="u-p3 u-bg--yellow">
    </div>
  </div>
  <div class="u-mb6">
    <div class="u-p3 u-bg--yellow">
    </div>
  </div>
  <div class="u-inbl u-mr1">
    <div class="u-p3 u-bg--orange">
    </div>
  </div>
  <div class="u-inbl u-mr2">
    <div class="u-p3 u-bg--orange">
    </div>
  </div>
  <div class="u-inbl u-mr3">
    <div class="u-p3 u-bg--orange">
    </div>
  </div>
  <div class="u-inbl u-mr4">
    <div class="u-p3 u-bg--orange">
    </div>
  </div>
  <div class="u-inbl u-mr5">
    <div class="u-p3 u-bg--orange">
    </div>
  </div>
  <div class="u-inbl u-mr6">
    <div class="u-p3 u-bg--orange">
    </div>
  </div>
</div>

CSS

/*---------Spacing Utilities----------*/

/*
  NOTE: Adapted from Basscss from Brent Jackson
  http://www.basscss.com/#basscss-margin
  http://www.basscss.com/#basscss-padding
*/

/*---------Spacing Utilities: Margin----------*/

/* Spacing Level 0 */

.u-m0 {
  margin: 0;
}
.u-mt0 {
  margin-top: 0;
}
.u-mr0 {
  margin-right: 0;
}
.u-mb0 {
  margin-bottom: 0;
}
.u-ml0 {
  margin-left: 0;
}

.u-mx0 {
  margin-right: 0;
  margin-left: 0;
}

.u-my0 {
  margin-top: 0;
  margin-bottom: 0;
}

/* Spacing Level 1 */

.u-m1 {
  margin: var(--spacing-1);
}
.u-mt1 {
  margin-top: var(--spacing-1);
}
.u-mr1 {
  margin-right: var(--spacing-1);
}
.u-mb1 {
  margin-bottom: var(--spacing-1);
}
.u-ml1 {
  margin-left: var(--spacing-1);
}

.u-mx1 {
  margin-right: var(--spacing-1);
  margin-left: var(--spacing-1);
}

.u-my1 {
  margin-top: var(--spacing-1);
  margin-bottom: var(--spacing-1);
}

/* Spacing Level 2 */

.u-m2 {
  margin: var(--spacing-2);
}
.u-mt2 {
  margin-top: var(--spacing-2);
}
.u-mr2 {
  margin-right: var(--spacing-2);
}
.u-mb2 {
  margin-bottom: var(--spacing-2);
}
.u-ml2 {
  margin-left: var(--spacing-2);
}

.u-mx2 {
  margin-right: var(--spacing-2);
  margin-left: var(--spacing-2);
}

.u-my2 {
  margin-top: var(--spacing-2);
  margin-bottom: var(--spacing-2);
}

/* Spacing Level 3 */

.u-m3 {
  margin: var(--spacing-3);
}
.u-mt3 {
  margin-top: var(--spacing-3);
}
.u-mr3 {
  margin-right: var(--spacing-3);
}
.u-mb3 {
  margin-bottom: var(--spacing-3);
}
.u-ml3 {
  margin-left: var(--spacing-3);
}

.u-mx3 {
  margin-right: var(--spacing-3);
  margin-left: var(--spacing-3);
}

.u-my3 {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

/* Spacing Level 4 */

.u-m4 {
  margin: var(--spacing-4);
}
.u-mt4 {
  margin-top: var(--spacing-4);
}
.u-mr4 {
  margin-right: var(--spacing-4);
}
.u-mb4 {
  margin-bottom: var(--spacing-4);
}
.u-ml4 {
  margin-left: var(--spacing-4);
}

.u-mx4 {
  margin-right: var(--spacing-4);
  margin-left: var(--spacing-4);
}

.u-my4 {
  margin-top: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

/* Spacing Level 5 */

.u-m5 {
  margin: var(--spacing-5);
}
.u-mt5 {
  margin-top: var(--spacing-5);
}
.u-mr5 {
  margin-right: var(--spacing-5);
}
.u-mb5 {
  margin-bottom: var(--spacing-5);
}
.u-ml5 {
  margin-left: var(--spacing-5);
}

.u-mx5 {
  margin-right: var(--spacing-5);
  margin-left: var(--spacing-5);
}

.u-my5 {
  margin-top: var(--spacing-5);
  margin-bottom: var(--spacing-5);
}

/* Spacing Level 6 */

.u-m6 {
  margin: var(--spacing-6);
}
.u-mt6 {
  margin-top: var(--spacing-6);
}
.u-mr6 {
  margin-right: var(--spacing-6);
}
.u-mb6 {
  margin-bottom: var(--spacing-6);
}
.u-ml6 {
  margin-left: var(--spacing-6);
}

.u-mx6 {
  margin-right: var(--spacing-6);
  margin-left: var(--spacing-6);
}

.u-my6 {
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-6);
}

/* Spacing Auto */

.u-mla {
  margin-left: auto;
}
.u-mra {
  margin-right: auto;
}

.u-mxa {
  margin-right: auto;
  margin-left: auto;
}

.u-mya {
  margin-top: auto;
  margin-bottom: auto;
}

@media only screen and (min-width: 31.25rem) {
  /* Spacing Level 0 */

  .u-m0\@sm {
    margin: 0;
  }
  .u-mt0\@sm {
    margin-top: 0;
  }
  .u-mr0\@sm {
    margin-right: 0;
  }
  .u-mb0\@sm {
    margin-bottom: 0;
  }
  .u-ml0\@sm {
    margin-left: 0;
  }

  .u-mx0\@sm {
    margin-right: 0;
    margin-left: 0;
  }

  .u-my0\@sm {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Spacing Level 1 */

  .u-m1\@sm {
    margin: var(--spacing-1);
  }
  .u-mt1\@sm {
    margin-top: var(--spacing-1);
  }
  .u-mr1\@sm {
    margin-right: var(--spacing-1);
  }
  .u-mb1\@sm {
    margin-bottom: var(--spacing-1);
  }
  .u-ml1\@sm {
    margin-left: var(--spacing-1);
  }

  .u-mx1\@sm {
    margin-right: var(--spacing-1);
    margin-left: var(--spacing-1);
  }

  .u-my1\@sm {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }

  /* Spacing Level 2 */

  .u-m2\@sm {
    margin: var(--spacing-2);
  }
  .u-mt2\@sm {
    margin-top: var(--spacing-2);
  }
  .u-mr2\@sm {
    margin-right: var(--spacing-2);
  }
  .u-mb2\@sm {
    margin-bottom: var(--spacing-2);
  }
  .u-ml2\@sm {
    margin-left: var(--spacing-2);
  }

  .u-mx2\@sm {
    margin-right: var(--spacing-2);
    margin-left: var(--spacing-2);
  }

  .u-my2\@sm {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }

  /* Spacing Level 3 */

  .u-m3\@sm {
    margin: var(--spacing-3);
  }
  .u-mt3\@sm {
    margin-top: var(--spacing-3);
  }
  .u-mr3\@sm {
    margin-right: var(--spacing-3);
  }
  .u-mb3\@sm {
    margin-bottom: var(--spacing-3);
  }
  .u-ml3\@sm {
    margin-left: var(--spacing-3);
  }

  .u-mx3\@sm {
    margin-right: var(--spacing-3);
    margin-left: var(--spacing-3);
  }

  .u-my3\@sm {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }

  /* Spacing Level 4 */

  .u-m4\@sm {
    margin: var(--spacing-4);
  }
  .u-mt4\@sm {
    margin-top: var(--spacing-4);
  }
  .u-mr4\@sm {
    margin-right: var(--spacing-4);
  }
  .u-mb4\@sm {
    margin-bottom: var(--spacing-4);
  }
  .u-ml4\@sm {
    margin-left: var(--spacing-4);
  }

  .u-mx4\@sm {
    margin-right: var(--spacing-4);
    margin-left: var(--spacing-4);
  }

  .u-my4\@sm {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }

  /* Spacing Level 4 */

  .u-m5\@sm {
    margin: var(--spacing-5);
  }
  .u-mt5\@sm {
    margin-top: var(--spacing-5);
  }
  .u-mr5\@sm {
    margin-right: var(--spacing-5);
  }
  .u-mb5\@sm {
    margin-bottom: var(--spacing-5);
  }
  .u-ml5\@sm {
    margin-left: var(--spacing-5);
  }

  .u-mx5\@sm {
    margin-right: var(--spacing-5);
    margin-left: var(--spacing-5);
  }

  .u-my5\@sm {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }

  /* Spacing Level 6 */

  .u-m6\@sm {
    margin: var(--spacing-6);
  }
  .u-mt6\@sm {
    margin-top: var(--spacing-6);
  }
  .u-mr6\@sm {
    margin-right: var(--spacing-6);
  }
  .u-mb6\@sm {
    margin-bottom: var(--spacing-6);
  }
  .u-ml6\@sm {
    margin-left: var(--spacing-6);
  }

  .u-mx6\@sm {
    margin-right: var(--spacing-6);
    margin-left: var(--spacing-6);
  }

  .u-my6\@sm {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }

  /* Spacing Auto */

  .u-mla\@sm {
    margin-left: auto;
  }
  .u-mra\@sm {
    margin-right: auto;
  }

  .u-mxa\@sm {
    margin-right: auto;
    margin-left: auto;
  }

  .u-mya\@sm {
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media only screen and (min-width: 48rem) {
  /* Spacing Level 0 */

  .u-m0\@md {
    margin: 0;
  }
  .u-mt0\@md {
    margin-top: 0;
  }
  .u-mr0\@md {
    margin-right: 0;
  }
  .u-mb0\@md {
    margin-bottom: 0;
  }
  .u-ml0\@md {
    margin-left: 0;
  }

  .u-mx0\@md {
    margin-right: 0;
    margin-left: 0;
  }

  .u-my0\@md {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Spacing Level 1 */

  .u-m1\@md {
    margin: var(--spacing-1);
  }
  .u-mt1\@md {
    margin-top: var(--spacing-1);
  }
  .u-mr1\@md {
    margin-right: var(--spacing-1);
  }
  .u-mb1\@md {
    margin-bottom: var(--spacing-1);
  }
  .u-ml1\@md {
    margin-left: var(--spacing-1);
  }

  .u-mx1\@md {
    margin-right: var(--spacing-1);
    margin-left: var(--spacing-1);
  }

  .u-my1\@md {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }

  /* Spacing Level 2 */

  .u-m2\@md {
    margin: var(--spacing-2);
  }
  .u-mt2\@md {
    margin-top: var(--spacing-2);
  }
  .u-mr2\@md {
    margin-right: var(--spacing-2);
  }
  .u-mb2\@md {
    margin-bottom: var(--spacing-2);
  }
  .u-ml2\@md {
    margin-left: var(--spacing-2);
  }

  .u-mx2\@md {
    margin-right: var(--spacing-2);
    margin-left: var(--spacing-2);
  }

  .u-my2\@md {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }

  /* Spacing Level 3 */

  .u-m3\@md {
    margin: var(--spacing-3);
  }
  .u-mt3\@md {
    margin-top: var(--spacing-3);
  }
  .u-mr3\@md {
    margin-right: var(--spacing-3);
  }
  .u-mb3\@md {
    margin-bottom: var(--spacing-3);
  }
  .u-ml3\@md {
    margin-left: var(--spacing-3);
  }

  .u-mx3\@md {
    margin-right: var(--spacing-3);
    margin-left: var(--spacing-3);
  }

  .u-my3\@md {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }

  /* Spacing Level 4 */

  .u-m4\@md {
    margin: var(--spacing-4);
  }
  .u-mt4\@md {
    margin-top: var(--spacing-4);
  }
  .u-mr4\@md {
    margin-right: var(--spacing-4);
  }
  .u-mb4\@md {
    margin-bottom: var(--spacing-4);
  }
  .u-ml4\@md {
    margin-left: var(--spacing-4);
  }

  .u-mx4\@md {
    margin-right: var(--spacing-4);
    margin-left: var(--spacing-4);
  }

  .u-my4\@md {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }

  /* Spacing Level 5 */

  .u-m5\@md {
    margin: var(--spacing-5);
  }
  .u-mt5\@md {
    margin-top: var(--spacing-5);
  }
  .u-mr5\@md {
    margin-right: var(--spacing-5);
  }
  .u-mb5\@md {
    margin-bottom: var(--spacing-5);
  }
  .u-ml5\@md {
    margin-left: var(--spacing-5);
  }

  .u-mx5\@md {
    margin-right: var(--spacing-5);
    margin-left: var(--spacing-5);
  }

  .u-my5\@md {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }

  /* Spacing Level 6 */

  .u-m6\@md {
    margin: var(--spacing-6);
  }
  .u-mt6\@md {
    margin-top: var(--spacing-6);
  }
  .u-mr6\@md {
    margin-right: var(--spacing-6);
  }
  .u-mb6\@md {
    margin-bottom: var(--spacing-6);
  }
  .u-ml6\@md {
    margin-left: var(--spacing-6);
  }

  .u-mx6\@md {
    margin-right: var(--spacing-6);
    margin-left: var(--spacing-6);
  }

  .u-my6\@md {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }

  /* Spacing Auto */

  .u-mla\@md {
    margin-left: auto;
  }
  .u-mra\@md {
    margin-right: auto;
  }

  .u-mxa\@md {
    margin-right: auto;
    margin-left: auto;
  }

  .u-mya\@md {
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media only screen and (min-width: 57.75rem) {
  /* Spacing Level 0 */

  .u-m0\@lg {
    margin: 0;
  }
  .u-mt0\@lg {
    margin-top: 0;
  }
  .u-mr0\@lg {
    margin-right: 0;
  }
  .u-mb0\@lg {
    margin-bottom: 0;
  }
  .u-ml0\@lg {
    margin-left: 0;
  }

  .u-mx0\@lg {
    margin-right: 0;
    margin-left: 0;
  }

  .u-my0\@lg {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Spacing Level 1 */

  .u-m1\@lg {
    margin: var(--spacing-1);
  }
  .u-mt1\@lg {
    margin-top: var(--spacing-1);
  }
  .u-mr1\@lg {
    margin-right: var(--spacing-1);
  }
  .u-mb1\@lg {
    margin-bottom: var(--spacing-1);
  }
  .u-ml1\@lg {
    margin-left: var(--spacing-1);
  }

  .u-mx1\@lg {
    margin-right: var(--spacing-1);
    margin-left: var(--spacing-1);
  }

  .u-my1\@lg {
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
  }

  /* Spacing Level 2 */

  .u-m2\@lg {
    margin: var(--spacing-2);
  }
  .u-mt2\@lg {
    margin-top: var(--spacing-2);
  }
  .u-mr2\@lg {
    margin-right: var(--spacing-2);
  }
  .u-mb2\@lg {
    margin-bottom: var(--spacing-2);
  }
  .u-ml2\@lg {
    margin-left: var(--spacing-2);
  }

  .u-mx2\@lg {
    margin-right: var(--spacing-2);
    margin-left: var(--spacing-2);
  }

  .u-my2\@lg {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
  }

  /* Spacing Level 3 */

  .u-m3\@lg {
    margin: var(--spacing-3);
  }
  .u-mt3\@lg {
    margin-top: var(--spacing-3);
  }
  .u-mr3\@lg {
    margin-right: var(--spacing-3);
  }
  .u-mb3\@lg {
    margin-bottom: var(--spacing-3);
  }
  .u-ml3\@lg {
    margin-left: var(--spacing-3);
  }

  .u-mx3\@lg {
    margin-right: var(--spacing-3);
    margin-left: var(--spacing-3);
  }

  .u-my3\@lg {
    margin-top: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }

  /* Spacing Level 4 */

  .u-m4\@lg {
    margin: var(--spacing-4);
  }
  .u-mt4\@lg {
    margin-top: var(--spacing-4);
  }
  .u-mr4\@lg {
    margin-right: var(--spacing-4);
  }
  .u-mb4\@lg {
    margin-bottom: var(--spacing-4);
  }
  .u-ml4\@lg {
    margin-left: var(--spacing-4);
  }

  .u-mx4\@lg {
    margin-right: var(--spacing-4);
    margin-left: var(--spacing-4);
  }

  .u-my4\@lg {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }

  /* Spacing Level 5 */

  .u-m5\@lg {
    margin: var(--spacing-5);
  }
  .u-mt5\@lg {
    margin-top: var(--spacing-5);
  }
  .u-mr5\@lg {
    margin-right: var(--spacing-5);
  }
  .u-mb5\@lg {
    margin-bottom: var(--spacing-5);
  }
  .u-ml5\@lg {
    margin-left: var(--spacing-5);
  }

  .u-mx5\@lg {
    margin-right: var(--spacing-5);
    margin-left: var(--spacing-5);
  }

  .u-my5\@lg {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
  }

  /* Spacing Level 6 */

  .u-m6\@lg {
    margin: var(--spacing-6);
  }
  .u-mt6\@lg {
    margin-top: var(--spacing-6);
  }
  .u-mr6\@lg {
    margin-right: var(--spacing-6);
  }
  .u-mb6\@lg {
    margin-bottom: var(--spacing-6);
  }
  .u-ml6\@lg {
    margin-left: var(--spacing-6);
  }

  .u-mx6\@lg {
    margin-right: var(--spacing-6);
    margin-left: var(--spacing-6);
  }

  .u-my6\@lg {
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-6);
  }

  /* Spacing Auto */

  .u-mla\@lg {
    margin-left: auto;
  }
  .u-mra\@lg {
    margin-right: auto;
  }

  .u-mxa\@lg {
    margin-right: auto;
    margin-left: auto;
  }

  .u-mya\@lg {
    margin-top: auto;
    margin-bottom: auto;
  }
}


/*---------Spacing Utilities: Padding----------*/

/* Spacing Level 0 */

.u-p0 {
  padding: 0;
}
.u-pt0 {
  padding-top: 0;
}
.u-pr0 {
  padding-right: 0;
}
.u-pb0 {
  padding-bottom: 0;
}
.u-pl0 {
  padding-left: 0;
}

.u-px0 {
  padding-right: 0;
  padding-left: 0;
}

.u-py0 {
  padding-top: 0;
  padding-bottom: 0;
}

/* Spacing Level 1 */

.u-p1 {
  padding: var(--spacing-1);
}
.u-pt1 {
  padding-top: var(--spacing-1);
}
.u-pr1 {
  padding-right: var(--spacing-1);
}
.u-pb1 {
  padding-bottom: var(--spacing-1);
}
.u-pl1 {
  padding-left: var(--spacing-1);
}

.u-px1 {
  padding-right: var(--spacing-1);
  padding-left: var(--spacing-1);
}

.u-py1 {
  padding-top: var(--spacing-1);
  padding-bottom: var(--spacing-1);
}

/* Spacing Level 2 */

.u-p2 {
  padding: var(--spacing-2);
}
.u-pt2 {
  padding-top: var(--spacing-2);
}
.u-pr2 {
  padding-right: var(--spacing-2);
}
.u-pb2 {
  padding-bottom: var(--spacing-2);
}
.u-pl2 {
  padding-left: var(--spacing-2);
}

.u-px2 {
  padding-right: var(--spacing-2);
  padding-left: var(--spacing-2);
}

.u-py2 {
  padding-top: var(--spacing-2);
  padding-bottom: var(--spacing-2);
}

/* Spacing Level 3 */

.u-p3 {
  padding: var(--spacing-3);
}
.u-pt3 {
  padding-top: var(--spacing-3);
}
.u-pr3 {
  padding-right: var(--spacing-3);
}
.u-pb3 {
  padding-bottom: var(--spacing-3);
}
.u-pl3 {
  padding-left: var(--spacing-3);
}

.u-px3 {
  padding-right: var(--spacing-3);
  padding-left: var(--spacing-3);
}

.u-py3 {
  padding-top: var(--spacing-3);
  padding-bottom: var(--spacing-3);
}

/* Spacing Level 4 */

.u-p4 {
  padding: var(--spacing-4);
}
.u-pt4 {
  padding-top: var(--spacing-4);
}
.u-pr4 {
  padding-right: var(--spacing-4);
}
.u-pb4 {
  padding-bottom: var(--spacing-4);
}
.u-pl4 {
  padding-left: var(--spacing-4);
}

.u-px4 {
  padding-right: var(--spacing-4);
  padding-left: var(--spacing-4);
}

.u-py4 {
  padding-top: var(--spacing-4);
  padding-bottom: var(--spacing-4);
}

/* Spacing Level 5 */

.u-p5 {
  padding: var(--spacing-5);
}
.u-pt5 {
  padding-top: var(--spacing-5);
}
.u-pr5 {
  padding-right: var(--spacing-5);
}
.u-pb5 {
  padding-bottom: var(--spacing-5);
}
.u-pl5 {
  padding-left: var(--spacing-5);
}

.u-px5 {
  padding-right: var(--spacing-5);
  padding-left: var(--spacing-5);
}

.u-py5 {
  padding-top: var(--spacing-5);
  padding-bottom: var(--spacing-5);
}

/* Spacing Level 6 */

.u-p6 {
  padding: var(--spacing-6);
}
.u-pt6 {
  padding-top: var(--spacing-6);
}
.u-pr6 {
  padding-right: var(--spacing-6);
}
.u-pb6 {
  padding-bottom: var(--spacing-6);
}
.u-pl6 {
  padding-left: var(--spacing-6);
}

.u-px6 {
  padding-right: var(--spacing-6);
  padding-left: var(--spacing-6);
}

.u-py6 {
  padding-top: var(--spacing-6);
  padding-bottom: var(--spacing-6);
}

/* Spacing Auto */

.u-px-auto {
  padding-right: auto;
  padding-left: auto;
}

.u-py-auto {
  padding-top: auto;
  padding-bottom: auto;
}

@media only screen and (min-width: 31.25rem) {
  /* Spacing Level 0 */

  .u-p0\@sm {
    padding: 0;
  }
  .u-pt0\@sm {
    padding-top: 0;
  }
  .u-pr0\@sm {
    padding-right: 0;
  }
  .u-pb0\@sm {
    padding-bottom: 0;
  }
  .u-pl0\@sm {
    padding-left: 0;
  }

  .u-px0\@sm {
    padding-right: 0;
    padding-left: 0;
  }

  .u-py0\@sm {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Spacing Level 1 */

  .u-p1\@sm {
    padding: var(--spacing-1);
  }
  .u-pt1\@sm {
    padding-top: var(--spacing-1);
  }
  .u-pr1\@sm {
    padding-right: var(--spacing-1);
  }
  .u-pb1\@sm {
    padding-bottom: var(--spacing-1);
  }
  .u-pl1\@sm {
    padding-left: var(--spacing-1);
  }

  .u-px1\@sm {
    padding-right: var(--spacing-1);
    padding-left: var(--spacing-1);
  }

  .u-py1\@sm {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }

  /* Spacing Level 2 */

  .u-p2\@sm {
    padding: var(--spacing-2);
  }
  .u-pt2\@sm {
    padding-top: var(--spacing-2);
  }
  .u-pr2\@sm {
    padding-right: var(--spacing-2);
  }
  .u-pb2\@sm {
    padding-bottom: var(--spacing-2);
  }
  .u-pl2\@sm {
    padding-left: var(--spacing-2);
  }

  .u-px2\@sm {
    padding-right: var(--spacing-2);
    padding-left: var(--spacing-2);
  }

  .u-py2\@sm {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  /* Spacing Level 3 */

  .u-p3\@sm {
    padding: var(--spacing-3);
  }
  .u-pt3\@sm {
    padding-top: var(--spacing-3);
  }
  .u-pr3\@sm {
    padding-right: var(--spacing-3);
  }
  .u-pb3\@sm {
    padding-bottom: var(--spacing-3);
  }
  .u-pl3\@sm {
    padding-left: var(--spacing-3);
  }

  .u-px3\@sm {
    padding-right: var(--spacing-3);
    padding-left: var(--spacing-3);
  }

  .u-py3\@sm {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }

  /* Spacing Level 4 */

  .u-p4\@sm {
    padding: var(--spacing-4);
  }
  .u-pt4\@sm {
    padding-top: var(--spacing-4);
  }
  .u-pr4\@sm {
    padding-right: var(--spacing-4);
  }
  .u-pb4\@sm {
    padding-bottom: var(--spacing-4);
  }
  .u-pl4\@sm {
    padding-left: var(--spacing-4);
  }

  .u-px4\@sm {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
  }

  .u-py4\@sm {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }

  /* Spacing Level 4 */

  .u-p5\@sm {
    padding: var(--spacing-5);
  }
  .u-pt5\@sm {
    padding-top: var(--spacing-5);
  }
  .u-pr5\@sm {
    padding-right: var(--spacing-5);
  }
  .u-pb5\@sm {
    padding-bottom: var(--spacing-5);
  }
  .u-pl5\@sm {
    padding-left: var(--spacing-5);
  }

  .u-px5\@sm {
    padding-right: var(--spacing-5);
    padding-left: var(--spacing-5);
  }

  .u-py5\@sm {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
  }

  /* Spacing Level 6 */

  .u-p6\@sm {
    padding: var(--spacing-6);
  }
  .u-pt6\@sm {
    padding-top: var(--spacing-6);
  }
  .u-pr6\@sm {
    padding-right: var(--spacing-6);
  }
  .u-pb6\@sm {
    padding-bottom: var(--spacing-6);
  }
  .u-pl6\@sm {
    padding-left: var(--spacing-6);
  }

  .u-px6\@sm {
    padding-right: var(--spacing-6);
    padding-left: var(--spacing-6);
  }

  .u-py6\@sm {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }

  /* Spacing Auto */

  .u-px-auto\@sm {
    padding-right: auto;
    padding-left: auto;
  }

  .u-py-auto\@sm {
    padding-top: auto;
    padding-bottom: auto;
  }
}

@media only screen and (min-width: 48rem) {
  /* Spacing Level 0 */

  .u-p0\@md {
    padding: 0;
  }
  .u-pt0\@md {
    padding-top: 0;
  }
  .u-pr0\@md {
    padding-right: 0;
  }
  .u-pb0\@md {
    padding-bottom: 0;
  }
  .u-pl0\@md {
    padding-left: 0;
  }

  .u-px0\@md {
    padding-right: 0;
    padding-left: 0;
  }

  .u-py0\@md {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Spacing Level 1 */

  .u-p1\@md {
    padding: var(--spacing-1);
  }
  .u-pt1\@md {
    padding-top: var(--spacing-1);
  }
  .u-pr1\@md {
    padding-right: var(--spacing-1);
  }
  .u-pb1\@md {
    padding-bottom: var(--spacing-1);
  }
  .u-pl1\@md {
    padding-left: var(--spacing-1);
  }

  .u-px1\@md {
    padding-right: var(--spacing-1);
    padding-left: var(--spacing-1);
  }

  .u-py1\@md {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }

  /* Spacing Level 2 */

  .u-p2\@md {
    padding: var(--spacing-2);
  }
  .u-pt2\@md {
    padding-top: var(--spacing-2);
  }
  .u-pr2\@md {
    padding-right: var(--spacing-2);
  }
  .u-pb2\@md {
    padding-bottom: var(--spacing-2);
  }
  .u-pl2\@md {
    padding-left: var(--spacing-2);
  }

  .u-px2\@md {
    padding-right: var(--spacing-2);
    padding-left: var(--spacing-2);
  }

  .u-py2\@md {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  /* Spacing Level 3 */

  .u-p3\@md {
    padding: var(--spacing-3);
  }
  .u-pt3\@md {
    padding-top: var(--spacing-3);
  }
  .u-pr3\@md {
    padding-right: var(--spacing-3);
  }
  .u-pb3\@md {
    padding-bottom: var(--spacing-3);
  }
  .u-pl3\@md {
    padding-left: var(--spacing-3);
  }

  .u-px3\@md {
    padding-right: var(--spacing-3);
    padding-left: var(--spacing-3);
  }

  .u-py3\@md {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }

  /* Spacing Level 4 */

  .u-p4\@md {
    padding: var(--spacing-4);
  }
  .u-pt4\@md {
    padding-top: var(--spacing-4);
  }
  .u-pr4\@md {
    padding-right: var(--spacing-4);
  }
  .u-pb4\@md {
    padding-bottom: var(--spacing-4);
  }
  .u-pl4\@md {
    padding-left: var(--spacing-4);
  }

  .u-px4\@md {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
  }

  .u-py4\@md {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }

  /* Spacing Level 5 */

  .u-p5\@md {
    padding: var(--spacing-5);
  }
  .u-pt5\@md {
    padding-top: var(--spacing-5);
  }
  .u-pr5\@md {
    padding-right: var(--spacing-5);
  }
  .u-pb5\@md {
    padding-bottom: var(--spacing-5);
  }
  .u-pl5\@md {
    padding-left: var(--spacing-5);
  }

  .u-px5\@md {
    padding-right: var(--spacing-5);
    padding-left: var(--spacing-5);
  }

  .u-py5\@md {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
  }

  /* Spacing Level 6 */

  .u-p6\@md {
    padding: var(--spacing-6);
  }
  .u-pt6\@md {
    padding-top: var(--spacing-6);
  }
  .u-pr6\@md {
    padding-right: var(--spacing-6);
  }
  .u-pb6\@md {
    padding-bottom: var(--spacing-6);
  }
  .u-pl6\@md {
    padding-left: var(--spacing-6);
  }

  .u-px6\@md {
    padding-right: var(--spacing-6);
    padding-left: var(--spacing-6);
  }

  .u-py6\@md {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }

  /* Spacing Auto */

  .u-px-auto\@md {
    padding-right: auto;
    padding-left: auto;
  }

  .u-py-auto\@md {
    padding-top: auto;
    padding-bottom: auto;
  }
}

@media only screen and (min-width: 57.75rem) {
  /* Spacing Level 0 */

  .u-p0\@lg {
    padding: 0;
  }
  .u-pt0\@lg {
    padding-top: 0;
  }
  .u-pr0\@lg {
    padding-right: 0;
  }
  .u-pb0\@lg {
    padding-bottom: 0;
  }
  .u-pl0\@lg {
    padding-left: 0;
  }

  .u-px0\@lg {
    padding-right: 0;
    padding-left: 0;
  }

  .u-py0\@lg {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Spacing Level 1 */

  .u-p1\@lg {
    padding: var(--spacing-1);
  }
  .u-pt1\@lg {
    padding-top: var(--spacing-1);
  }
  .u-pr1\@lg {
    padding-right: var(--spacing-1);
  }
  .u-pb1\@lg {
    padding-bottom: var(--spacing-1);
  }
  .u-pl1\@lg {
    padding-left: var(--spacing-1);
  }

  .u-px1\@lg {
    padding-right: var(--spacing-1);
    padding-left: var(--spacing-1);
  }

  .u-py1\@lg {
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-1);
  }

  /* Spacing Level 2 */

  .u-p2\@lg {
    padding: var(--spacing-2);
  }
  .u-pt2\@lg {
    padding-top: var(--spacing-2);
  }
  .u-pr2\@lg {
    padding-right: var(--spacing-2);
  }
  .u-pb2\@lg {
    padding-bottom: var(--spacing-2);
  }
  .u-pl2\@lg {
    padding-left: var(--spacing-2);
  }

  .u-px2\@lg {
    padding-right: var(--spacing-2);
    padding-left: var(--spacing-2);
  }

  .u-py2\@lg {
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
  }

  /* Spacing Level 3 */

  .u-p3\@lg {
    padding: var(--spacing-3);
  }
  .u-pt3\@lg {
    padding-top: var(--spacing-3);
  }
  .u-pr3\@lg {
    padding-right: var(--spacing-3);
  }
  .u-pb3\@lg {
    padding-bottom: var(--spacing-3);
  }
  .u-pl3\@lg {
    padding-left: var(--spacing-3);
  }

  .u-px3\@lg {
    padding-right: var(--spacing-3);
    padding-left: var(--spacing-3);
  }

  .u-py3\@lg {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
  }

  .u-p4\@lg {
    padding: var(--spacing-4);
  }
  .u-pt4\@lg {
    padding-top: var(--spacing-4);
  }
  .u-pr4\@lg {
    padding-right: var(--spacing-4);
  }
  .u-pb4\@lg {
    padding-bottom: var(--spacing-4);
  }
  .u-pl4\@lg {
    padding-left: var(--spacing-4);
  }

  .u-px4\@lg {
    padding-right: var(--spacing-4);
    padding-left: var(--spacing-4);
  }

  .u-py4\@lg {
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
  }

  /* Spacing Level 5 */

  .u-p5\@lg {
    padding: var(--spacing-5);
  }
  .u-pt5\@lg {
    padding-top: var(--spacing-5);
  }
  .u-pr5\@lg {
    padding-right: var(--spacing-5);
  }
  .u-pb5\@lg {
    padding-bottom: var(--spacing-5);
  }
  .u-pl5\@lg {
    padding-left: var(--spacing-5);
  }

  .u-px5\@lg {
    padding-right: var(--spacing-5);
    padding-left: var(--spacing-5);
  }

  .u-py5\@lg {
    padding-top: var(--spacing-5);
    padding-bottom: var(--spacing-5);
  }

  /* Spacing Level 6 */

  .u-p6\@lg {
    padding: var(--spacing-6);
  }
  .u-pt6\@lg {
    padding-top: var(--spacing-6);
  }
  .u-pr6\@lg {
    padding-right: var(--spacing-6);
  }
  .u-pb6\@lg {
    padding-bottom: var(--spacing-6);
  }
  .u-pl6\@lg {
    padding-left: var(--spacing-6);
  }

  .u-px6\@lg {
    padding-right: var(--spacing-6);
    padding-left: var(--spacing-6);
  }

  .u-py6\@lg {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
  }

  /* Spacing Auto */

  .u-px-auto\@lg {
    padding-right: auto;
    padding-left: auto;
  }

  .u-py-auto\@lg {
    padding-top: auto;
    padding-bottom: auto;
  }
}


:root {
  --spacing-1: calc(var(--base-spacing) / 4);
  --spacing-2: calc(var(--base-spacing) / 2);
  --spacing-3: calc(var(--base-spacing));
  --spacing-4: calc(var(--base-spacing) * 2);
  --spacing-5: calc(var(--base-spacing) * 2.4);
  --spacing-6: calc(var(--base-spacing) * 4);
}

Typography

Utilities for text-alignment, font weights, line-height, letter-spacing, rendering, text columns and text-transform.

Aligned Left
Aligned Center
Aligned Right
UppercaseLowercase
Font Weight 700 and Letter Spaced by 5px
Reponsive Text Columns

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quaerat, laudantium est temporibus inventore cum, vero repudiandae et veniam quia debitis amet architecto quam necessitatibus mollitia laboriosam natus sint, sunt.

Culpa tempore, ipsum minus harum non saepe reiciendis pariatur delectus? Ut cum, voluptatem voluptatibus soluta commodi odio id, libero quia minus facilis distinctio, obcaecati aliquam debitis sed optio rem quae.

Quas pariatur cupiditate magni natus ab saepe velit deleniti earum quidem vero commodi quis, libero nostrum quisquam officiis eos nam sunt voluptatem consequatur inventore, perspiciatis recusandae eligendi maiores tenetur. Totam.

Impedit molestias soluta incidunt modi possimus suscipit non, consectetur expedita quaerat recusandae dolores vero labore culpa numquam excepturi est voluptatum maiores fugiat nostrum! Placeat doloremque harum molestias, quaerat, delectus deserunt.

View sourceHTML + CSS

HTML

<div class="u-py3">
  <h6 class="small u-caps u-left">Aligned Left</h6>
  <h6 class="small u-caps u-center">Aligned Center</h6>
  <h6 class="small u-caps u-right">Aligned Right</h6>
</div>
<div class="u-py3">
  <span class="u-caps">Uppercase</span>
  <span class="u-lower">Lowercase</span>
</div>
<div class="u-py3">
  <h6 class="u-w700 u-lt-5">
    <span class="u-caps">Font Weight 700 and Letter Spaced by</span> <code class="u-w400 u-lt-1">5px</code>
    </h6>
  </div>
  <div class="u-py3 u-tclm-3">
    <header class="u-mb4">
      <h6>Reponsive Text Columns</h6>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quaerat, laudantium est temporibus inventore cum, vero repudiandae et veniam quia debitis amet architecto quam necessitatibus mollitia laboriosam natus sint, sunt.</p>
    <p>Culpa tempore, ipsum minus harum non saepe reiciendis pariatur delectus? Ut cum, voluptatem voluptatibus soluta commodi odio id, libero quia minus facilis distinctio, obcaecati aliquam debitis sed optio rem quae.</p>
    <p>Quas pariatur cupiditate magni natus ab saepe velit deleniti earum quidem vero commodi quis, libero nostrum quisquam officiis eos nam sunt voluptatem consequatur inventore, perspiciatis recusandae eligendi maiores tenetur. Totam.</p>
    <p>Impedit molestias soluta incidunt modi possimus suscipit non, consectetur expedita quaerat recusandae dolores vero labore culpa numquam excepturi est voluptatum maiores fugiat nostrum! Placeat doloremque harum molestias, quaerat, delectus deserunt.</p>
  </div>

CSS

/*
  Typographic Utilities

  Text Columns.........Responsive Text Columns
  Align................Breakpoint Specific Text Align.
  Type Assorted........Font Weights, Letter Spacing, Rendering, Text Transform
*/

/*----------Text Align Utilities----------*/

.u-left {
  text-align: left;
}
.u-right {
  text-align: right;
}
.u-center {
  text-align: center;
}
.u-justify {
  text-align: justify;
}

@media only screen and (min-width: 31.25rem) {
  .u-left\@sm {
    text-align: left;
  }
  .u-right\@sm {
    text-align: right;
  }
  .u-center\@sm {
    text-align: center;
  }
  .u-justify\@sm {
    text-align: justify;
  }
}

@media only screen and (min-width: 48rem) {
  .u-left\@md {
    text-align: left;
  }
  .u-right\@md {
    text-align: right;
  }
  .u-center\@md {
    text-align: center;
  }
  .u-justify\@md {
    text-align: justify;
  }
}

@media only screen and (min-width: 57.75rem) {
  .u-left\@lg {
    text-align: left;
  }
  .u-right\@lg {
    text-align: right;
  }
  .u-center\@lg {
    text-align: center;
  }
  .u-justify\@lg {
    text-align: justify;
  }
}

/*---------Text Column Utilties----------*/
/*
  NOTE: there is no 1 for column sizes
*/

:root {
  --column-size-2: calc(var(--base-container) / 3 - ((var(--base-spacing) * 2) * 1));
  --column-size-3: calc(var(--base-container) / 3 - ((var(--base-spacing) * 3) * 2));
  --column-size-4: calc(var(--base-container) / 3 - ((var(--base-spacing) * 4) * 3));
}

.u-tclm-2 {
  columns: 2 var(--column-size-2);
  column-gap: calc(var(--base-spacing) * 2);
}

.u-tclm-3 {
  columns: 3 var(--column-size-3);
  column-gap: calc(var(--base-spacing) * 3);
}

.u-tclm-4 {
  columns: 4 var(--column-size-4);
  column-gap: calc(var(--base-spacing) * 4);
}

/*----------Typographic Grab-Bag----------*/

/* Font Rendering */

.u-anti {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.u-legi { text-rendering: optimizeLegibility; }

/* Family */

.u-serif { font-family: var(--ff-serif); }
.u-sans { font-family: var(--ff-sans-serif); }
.u-mono { font-family: var(--ff-mono); }
.u-system { font-family: var(--ff-default); }

/* Font Features Settings */

.u-ffs-lnum { font-feature-settings: 'lnum'; }
.u-ffs-smcp { font-feature-settings: 'smcp'; }
.u-ffs-frac { font-feature-settings: 'frac'; }
.u-ffs-swsh { font-feature-settings: 'swsh' 2; }

/* Line Height */

.u-lh-1 { line-height: 1; }
.u-lh-auto { line-height: auto; }

/* Case */

.u-caps { text-transform: uppercase; }
.u-lower { text-transform: lowercase; }

/* Weights */

.u-w100 { font-weight: 100; }
.u-w200 { font-weight: 200; }
.u-w300 { font-weight: 300; }
.u-w400 { font-weight: 400; }
.u-w500 { font-weight: 500; }
.u-w600 { font-weight: 600; }
.u-w700 { font-weight: 700; }
.u-w800 { font-weight: 800; }
.u-w900 { font-weight: 900; }


/* Tracking */

.u-lt-1 { letter-spacing: 1px; }
.u-lt-2 { letter-spacing: 2px; }
.u-lt-3 { letter-spacing: 3px; }
.u-lt-4 { letter-spacing: 4px; }
.u-lt-5 { letter-spacing: 5px; }

Run the reference implementation

npm install
npm run dev --workspace layr-documentation