Skip to content
On this page

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.

ClassSideSpace
p Paddingt Top0 0
m Marginr Right1 4px
b Bottom2 8px
l Left3 12px
x Horizontal4 16px
y Vertical5 24px
a All6 32px
7 48px
auto auto

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

ClassProperties
.d-nonedisplay: none;
.d-inlinedisplay: inline;
.d-inline-blockdisplay: inline-block;
.d-blockdisplay-block;
.d-flexdisplay: flex;
.d-inline-flexdisplay: inline-flex;

Width

ClassProperties
.w-25width: 25%;
.w-50width: 50%;
.w-75width: 75%;
.w-100width: 100%;
.w-autowidth: auto;

Height

ClassProperties
.h-100height: 100%;
.h-autoheight: auto;
.h-screenmin-height: 100vh;

Flex

Direction & Growth

ClassProperties
.flex-fillflex: 1 1 auto;
.flex-rowflex-direction: row;
.flex-columnflex-direction: column;
.flex-row-reverseflex-direction: row-reverse;
.flex-column-reverseflex-direction: column-reverse;
.flex-grow-0flex-grow: 0;
.flex-grow-1flex-grow: 1;

Justification

ClassProperties
.justify-content-startjustify-content: flex-start;
.justify-content-endjustify-content: flex-end;
.justify-content-centerjustify-content: center;
.justify-content-betweenjustify-content: space-between;
.justify-content-aroundjustify-content: space-around;

Alignment

ClassProperties
.align-items-startalign-items: flex-start;
.align-items-endalign-items: flex-end;
.align-items-centeralign-items: center;
.align-items-baselinealign-items: baseline;
.align-items-stretchalign-items: stretch;
.align-content-startalign-content: flex-start;
.align-content-endalign-content: flex-end;
.align-content-centeralign-content: center;
.align-content-betweenalign-content: space-between;
.align-content-aroundalign-content: space-around;
.align-content-stretchalign-content: stretch;
.align-self-autoalign-self: auto;
.align-self-startalign-self: flex-start;
.align-self-endalign-self: flex-end;
.align-self-centeralign-self: center;
.align-self-baselinealign-self: baseline;
.align-self-stretchalign-self: stretch;

Float

ClassProperties
.float-leftfloat: left;
.float-rightfloat: right;
.float-centerfloat: center;

Colors

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

ClassPropertiesExample
.type-color: var(--{color})class="color-blue-500"

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

ClassPropertiesExample
.type-font-size: var(--type-{size})class="type-xl"
.monofont-size: calc(var(--type-{size}) * .95)class="mono type-xl"

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)
ClassProperties/Variables
.truncatewhite-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.multi-line-truncationTMaxLineLimit
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.
html
<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>
1
2
3
css
.multi-line-truncation {
  --TMaxLineLimit: 5;
}
1
2
3

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
ClassVariables
.truncate-multiTLineHeight, TMaxLines, TFontSize, TPosRight, TPadRight
html
<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>
1
2
3
css
.truncate-multi {
  --TLineHeight: 24px;
  --TMaxLines: 5;
  --TPosRight: 12px;
  --TPadRight: 8px;
  --TFontSize: 16px;
}
1
2
3
4
5
6
7

General Helpers

ClassProperties
.capitalizetext-transform: capitalize;
.lowercasetext-transform: lowercase;
.uppercasetext-transform: uppercase;
.bold-500font-weight: 500;
.bold-600font-weight: 600;
.bold-700font-weight: 700;
.cursor-pointercursor: pointer;
.overflow-hiddenoverflow: hidden;
.overflow-autooverflow: auto;

Released under the Apache-2.0 License.