Utilities ​

Spacing ​

We provide a combination of margin and padding classes similar to bootstrap and tailwindcss. You can set a padding or margin to any side by providing a class like p{side}-{size} or .m{side}-{size}. The space coincides with our preset list of spacing.

Example: .pt-2 would add 8px of padding to the top of the element, .mx-0 would make the horizontal margin zero, and .ma-0 would make both the horizontal and vertical margins zero.

Examples ​

• Adding top of 8px

  html

  <div class="pt-2"></div>

  1
  
  css

  .pt-2 {
    padding-top: 8px;
  }

  1
  2
  3
  

• Adding margin x (left and right) of 0px

  html

  <div class="mx-0"></div>

  1
  
  css

  .mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  1
  2
  3
  4
  

• Adding margin all (left, right, top, bottom) of 0px

  html

  <div class="ma-0"></div>

  1
  
  css

  .ma-0 {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  1
  2
  3
  4
  5
  6
  

Display ​

Width ​

Height ​

Flex ​

Direction & Growth ​

Justification ​

Alignment ​

Float ​

Colors ​

For each color in our color palette we include a utility class that is prefixed with color-.

Type Sizes ​

For each size in our .type- rules we include a utility class that is prefixed with type-. You can also add the class of .mono to style as mono

Truncation ​

We support both single line truncation as well as multi-line. Multi-line truncation is customizable with the following CSS variable:

• TMaxLineLimit - the maximum number of allowed lines (defaults to 3)

<div class="multi-line-truncation" style="width: 425px; height: 84px; border: 1px solid black; padding: 8px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum leo a neque tristique faucibus. Praesent at imperdiet elit, vel tincidunt metus. Praesent elementum mollis libero, et semper diam efficitur tristique. Nam aliquam tortor a leo pretium vestibulum. Proin posuere auctor odio, sit amet elementum massa aliquet in.
</div>

.multi-line-truncation {
  --TMaxLineLimit: 5;
}

Truncation - deprecated ​

Deprecated - Multi-line truncation is customizable with the following properties:

• TLineHeight - the height of each line
• TMaxLines - the maximum number of allowed lines
• TFontSize - the size of the font to truncate
• TPosRight - css property right position of the ellipsis
• TPadRight - the amount of padding on the right side of the container

<div class="truncate-multi" style="width: 425px; height: 84px; border: 1px solid black; padding: 8px;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer condimentum leo a neque tristique faucibus. Praesent at imperdiet elit, vel tincidunt metus. Praesent elementum mollis libero, et semper diam efficitur tristique. Nam aliquam tortor a leo pretium vestibulum. Proin posuere auctor odio, sit amet elementum massa aliquet in.
</div>

.truncate-multi {
  --TLineHeight: 24px;
  --TMaxLines: 5;
  --TPosRight: 12px;
  --TPadRight: 8px;
  --TFontSize: 16px;
}

General Helpers ​