Basement

Key

Dynamic

A variant of this class is generated for each item in a setting’s map. For example, the dynamic .p<spacing-unit> class transpiles to .p_25, .p_5, .p_75, .p1, .p2, .p3, .p4, .p6, and .p8 with the default $spacing-unit setting.

Responsive

A variant of this class is generated for each breakpoint. For example the responsive flex class transpiles to .flex, .sm:flex, .md:flex, .lg:flex, and .xl:flex with the default $breakpoint setting.

Class Definitions

Display

.inline

Responsive

        
          display: inline;

.block

Responsive

        
          display: block;

.inline-block

Responsive

        
          display: inline-block;

.table

Responsive

        
          display: table;

.table-cell

Responsive

        
          display: table-cell;

.flex

Responsive

        
          display: flex;

.inline-flex

Responsive

        
          display: inline-flex;

.none

Responsive

        
          display: none;

Position

.absolute

Responsive

        
          position: absolute;

.relative

Responsive

        
          position: relative;

.fixed

Responsive

        
          position: fixed;

.sticky

Responsive

        
          position: sticky;

.t0

        
          top: 0;

.r0

        
          right: 0;

.b0

        
          bottom: 0;

.l0

        
          left: 0;

.z0

        
          z-index: 0;

.z1

        
          z-index: 1;

.z2

        
          z-index: 2;

.z3

        
          z-index: 3;

Float

.left

Responsive

        
          float: left;

.right

Responsive

        
          float: right;

.clearfix

Responsive

        
          ::before {
  content: ' ';
  display: table;
}
::after {
  content: ' ';
  display: table;
  clear: both;
}

Flex

.flex-1

Responsive

        
          flex: 1;

.flex-2

Responsive

        
          flex: 2;

.flex-3

Responsive

        
          flex: 3;

.flex-row

Responsive

        
          flex-direction: row;

.flex-col

Responsive

        
          flex-direction: column;

.flex-row-reverse

Responsive

        
          flex-direction: row-reverse;

.flex-col-reverse

Responsive

        
          flex-direction: column-reverse;

.flex-wrap

Responsive

        
          flex-wrap: wrap;

.flex-nowrap

Responsive

        
          flex-wrap: nowrap;

.items-start

Responsive

        
          align-items: flex-start;

.items-end

Responsive

        
          align-items: flex-end;

.items-center

Responsive

        
          align-items: center;

.items-baseline

Responsive

        
          align-items: baseline;

.items-stretch

Responsive

        
          align-items: stretch;

.justify-start

Responsive

        
          justify-content: flex-start;

.justify-end

Responsive

        
          justify-content: flex-end;

.justify-center

Responsive

        
          justify-content: center;

.justify-between

Responsive

        
          justify-content: space-between;

.justify-around

Responsive

        
          justify-content: space-around;

.justify-evenly

Responsive

        
          justify-content: space-evenly;

.justify-stretch

Responsive

        
          justify-content: stretch;

.self-start

Responsive

        
          align-self: flex-start;

.self-end

Responsive

        
          align-self: flex-end;

.self-center

Responsive

        
          align-self: center;

.self-baseline

Responsive

        
          align-self: baseline;

.self-stretch

Responsive

        
          align-self: stretch;

.content-start

Responsive

        
          align-content: flex-start;

.content-end

Responsive

        
          align-content: flex-end;

.content-center

Responsive

        
          align-content: center;

.content-between

Responsive

        
          align-content: space-between;

.content-around

Responsive

        
          align-content: space-around;

.content-stretch

Responsive

        
          align-content: stretch;

.flex-none

Responsive

        
          flex: none;

.order-0

Responsive

        
          order: 0;

.order-1

Responsive

        
          order: 1;

.order-2

Responsive

        
          order: 2;

.order-3

Responsive

        
          order: 3;

.order-first

Responsive

        
          order: -1;

.order-last

Responsive

        
          order: 9999;

Typography

.regular

        
          font-weight: normal;

.bold

        
          font-weight: bold;

.italic

        
          font-weight: italic;

.capitalize

        
          font-weight: capitalize;

.uppercase

        
          font-weight: uppercase;

.text-left

Responsive

        
          text-align: left;

.text-right

Responsive

        
          text-align: right;

.text-center

Responsive

        
          text-align: center;

.text-justify

Responsive

        
          text-align: justify;

Grid

.col

Responsive

        
          float: left;

.col-<column>

Dynamic

        
          width: <column> / <total-columns> %;
/* .col-3 = width: 25%; in a 12 column grid */

.off-<column>

Dynamic

        
          margin-left: <column> / <total-columns> %;
/* .off-6 = margin-left: 75%; in an 8 column grid */

Margin

.m<spacing-unit>

Dynamic

        
          margin: <spacing-unit>;
/* .m4 = margin: 4rem; with a 4rem spacing unit*/

.mt<spacing-unit>

Dynamic

        
          margin-left: <spacing-unit>;

.mr<spacing-unit>

Dynamic

        
          margin-right: <spacing-unit>;

.mb<spacing-unit>

Dynamic

        
          margin-bottom: <spacing-unit>;

.mx<spacing-unit>

Dynamic

        
          margin-right: <spacing-unit>;
margin-left: <spacing-unit>;

.my<spacing-unit>

Dynamic

        
          margin-top: <spacing-unit>;
margin-bottom: <spacing-unit>;

.mxn<spacing-unit>

Dynamic

        
          margin-left: -<spacing-unit>;
margin-right: -<spacing-unit>;

Padding

.p<spacing-unit>

Dynamic

        
          padding: <spacing-unit>;
/* .p2 = 2rem; with a 2rem spacing unit*/

.pt<spacing-unit>

Dynamic

        
          padding-top: <spacing-unit>;

.pr<spacing-unit>

Dynamic

        
          padding-right: <spacing-unit>;

.pb<spacing-unit>

Dynamic

        
          padding-bottom: <spacing-unit>;

.pl<spacing-unit>

Dynamic

        
          padding-left: <spacing-unit>;

.px<spacing-unit>

Dynamic

        
          padding-right: <spacing-unit>;
padding-left: <spacing-unit>;

.py<spacing-unit>

Dynamic

        
          padding-top: <spacing-unit>;
padding-bottom: <spacing-unit>;

.pxn<spacing-unit>

Dynamic

        
          padding-left: -<spacing-unit>;
padding-right: -<spacing-unit>;

Color

.color-<color>

Dynamic

        
          color: <color>;
/* .color-black = color: #000; with a ‘black’ color*/

.bg-color-<color>

Dynamic

        
          background-color: <color>;

.border-color-<color>

Dynamic

        
          border-color: <color>;

Aspect Ratios

.aspect-<ratio>

Dynamic

This class is used to constrain a child element to a designated aspect ratio. Refer to the usecases section to see it in use.

Circle

.circle

        
          border-radius: 50%;

Visibility

.hidden

        
          visibility: hidden;

.visible

        
          visibility: visible;

Cursor Pointer

.pointer

        
          cursor: pointer;

.events-none

        
          pointer-events: none;

.events-all

        
          pointer-events: all;

Overlay

.overlay

        
          position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

Images

.fit-cover

        
          object-fit: cover;

.fit-contain

        
          object-fit: contain;

.position-top

        
          object-position: top;

.position-bottom

        
          object-position: bottom;

Background

.bg-cover

        
          background-size: cover;
background-position: center;

Width / Height

.w100

Responsive

        
          width: 100%;

.h100

Responsive

        
          height: 100%;

.wauto

Responsive

        
          width: auto;

.hauto

Responsive

        
          height: auto;

Viewport

.vh100

Responsive

        
          height: 100vh;

.vw100

Responsive

        
          width: 100vw;

Opacity

.opacity-0

        
          opacity: 0;

.opacity-1

        
          opacity: 1;

Overflow

.overflow-hidden

        
          overflow: hidden;

.overflow-x-hidden

        
          overflow-x: hidden;

.overflow-y-hidden

        
          overflow-y: hidden;

.overflow-auto

        
          overflow: auto;

.overflow-y-scroll

        
          overflow-y: scroll;

.overflow-x-scroll

        
          overflow-x: scroll;

.overflow-y-auto

        
          overflow-y: auto;

.overflow-x-auto

        
          overflow-x: auto;

Word Wrap

.break-word

        
          word-wrap: break-word;
overflow-wrap: break-word;

White Space

.nowrap

        
          white-space: nowrap;

Text Overflow

.text-overflow-ellipsis

        
          text-overflow: ellipsis;

.text-overflow-clip

        
          text-overflow: clip;

Text Decoration

.underline

        
          text-decoration: underline;

Vertical Align

.vertical-align-top

        
          vertical-align: top;

.vertical-align-middle

        
          vertical-align: middle;

.vertical-align-bottom

        
          vertical-align: bottom;

List Style

.list-style-none

        
          list-style: none;