Graupl Logo

Utilities ​

Alignment ​

Variables

Property Prefixes

  • $align-content-class-prefix: "align-content-" !default;
  • $align-items-class-prefix: "align-items-” !default;
  • $align-self-class-prefix: "align-self-" !default;

Custom Variables to extend properties

  • $custom-align-content-properties
  • $custom-align-items-properties
  • $custom-align-self-properties

Align Content

  • align-content-normal
  • align-content-start
  • align-content-end
  • align-content-center
  • align-content-between
  • align-content-around
  • align-content-evenly
  • align-content-baseline
  • align-content-stretch

Align Items

  • align-items-start
  • align-items-end
  • align-items-center
  • align-items-baseline
  • align-items-stretch

Align Self

  • align-self-auto
  • align-self-start
  • align-self-end
  • align-self-center
  • align-self-baseline
  • align-self-stretch

Color ​

Variables

  • $background-class-prefix: "bg-" !default;
  • $text-class-prefix: "text-" !default;
  • $custom-background-properties
  • $custom-text-properties
  • $custom-colors
  • $custom-dark-map

Color Classes

  • #{defaults.$background-class-prefix}-#{$color}-#{$shade};
  • The class is a combination of the prefix, color, and shade.
  • See table below for examples on how to use the background and text classes.
PrefixColorShadeBackground ClassText Class
bg | textprimary | secondary | tertiary100bg-primary-100text-primary-100
bg | textprimary | secondary | tertiary200bg-primary-200text-primary-200
bg | textprimary | secondary | tertiary300bg-primary-300text-primary-300
bg | textprimary | secondary | tertiary400bg-primary-400text-primary-400
bg | textprimary | secondary | tertiary500bg-primary-500text-primary-500
bg | textprimary | secondary | tertiary600bg-primary-600text-primary-600
bg | textprimary | secondary | tertiary700bg-primary-700text-primary-700
bg | textprimary | secondary | tertiary800bg-primary-800text-primary-800
bg | textprimary | secondary | tertiary900bg-primary-900text-primary-900

Background and text properties

Background PropertyText Property
bg-inherittext-inherit
bg-currenttext-current
bg-transparenttext-transparent

Display ​

  • $display-class-prefix: "display-" !default;
  • $custom-display-properties
Display Property
display-block
display-inline-block
display-inline
display-flex
display-inline-flex
display-grid
display-inline-grid
display-flow-root
display-none
display-contents
display-list-item

Flex ​

  • $flex-direction-class-prefix: "flex-" !default;
  • $flex-wrap-class-prefix: "flex-" !default;
  • $flex-grow-class-prefix: "flex-" !default;
  • $flex-shrink-class-prefix: "flex-" !default;

Custom variables to extend properties

  • $custom-flex-direction-properties
  • $custom-flex-wrap-properties
  • $custom-flex-grow-properties
  • $custom-flex-shrink-properties
PrefixPropertyClass Name
flex-rowflex-row
flex-row-reverseflex-row-reverse
flex-colflex-col
flex-col-reverseflex-col-reverse
flex-wrapflex-wrap
flex-wrap-reverseflex-wrap-reverse
flex-nowrapflex-nowrap
flex-growflex-grow
flex-no-growflex-no-grow
flex-shrinkflex-shrink
flex-no-shrinkflex-no-shrink

Inset ​

  • $custom-inset-properties
  • $custom-inset-values

Every property is mapped to every value. So you can append the property name to any value.

PropertyValueClass Name
inset0 | auto | full | quarter | half | three-quarters | third | two-thirdsinset-auto
inset-x0 | auto | full | quarter | half | three-quarters | third | two-thirdsinset-x-full
inset-y0 | auto | full | quarter | half | three-quarters | third | two-thirdsinset-y-quarter
inset-start0 | auto | full | quarter | half | three-quarters | third | two-thirdsinset-start-half
inset-end0 | auto | full | quarter | half | three-quarters | third | two-thirdsinset-end-three-quarters
top0 | auto | full | quarter | half | three-quarters | third | two-thirdstop-third
right0 | auto | full | quarter | half | three-quarters | third | two-thirdsright-two-thirds
bottom0 | auto | full | quarter | half | three-quarters | third | two-thirdsbottom-0
left0 | auto | full | quarter | half | three-quarters | third | two-thirdsleft-auto

Justification ​

  • $justify-content-class-prefix: "justify-content-" !default;
  • .$justify-items-class-prefix: "justify-items-" !default;
  • $justify-self-class-prefix: "justify-self-" !default;
  • $custom-justify-content-properties
  • $custom-justify-items-properties
  • $custom-justify-self-properties

Justify Content

normaljustify-content-normal
startjustify-content-start
endjustify-content-end
centerjustify-content-center
betweenjustify-content-between
aroundjustify-content-around
evenlyjustify-content-evenly
stretchjustify-content-stretch

Justify Items

PropertyClass Name
startjustify-items-start
endjustify-items-end
centerjustify-items-center
stretchjustify-items-stretch

Justify Self

autojustify-self-auto
startjustify-self-start
endjustify-self-end
centerjustify-self-center
stretchjustify-self-stretch

List ​

  • $list-style-type-class-prefix: "list-style-" !default;
  • $list-style-postion-class-prefix: "list-style-" !default;
  • $custom-list-style-type-properties
  • $custom-list-style-postion-properties

List style type properties

PropertyClass Name
nonelist-style-none
disclist-style-disc
decimallist-style-decimal
circlelist-style-circle
squarelist-style-square

List style position properties

insidelist-style-inside
outsidelist-style-outside

Order ​

  • $order-class-prefix
  • $custom-order-properties
PropertyClass Name
noneorder-none
firstorder-first
lastorder-last

Position ​

  • $position-class-prefix
  • $custom-position-properties
PropertyClass Name
staticposition-static
fixedposition-fixed
absoluteposition-absolute
relativeposition-relative
stickyposition-sticky

Ratio ​

Variables

$ratio: var(*--#{root-defaults.$prefix}ratio*);

Contains element add this class to

  • $ratio-selector: ".ratio" !default;

Item that covers the container uses this with the default prefix as “.”

  • $ratio-variant-selector-prefix: "." !default;

Different rations you can use

PropertyClass Name
one-by-oneone-by-one
two-by-onetwo-by-one
four-by-threefour-by-three
four-by-onefour-by-one
sixteen-by-ninesixteen-by-nine
three-by-twothree-by-two
eight-by-fiveeight-by-five

Spacing ​

AbbreviationDescriptionValuesClass Name
ggap1 to 10g-1
rgrow-gap1 to 10rg-2
cgcolumn-gap1 to 10cg-3
ppadding1 to 10p-4
ptpadding-top1 to 10pt-5
prpadding-right1 to 10pr-6
pbpadding-bottom1 to 10pb-7
plpadding-left1 to 10pl-8
pxpadding-left padding-right1 to 10px-9
pypadding-top padding-bottom1 to 10py-10
pbspadding-block-start1 to 10pbs-1
pbepadding-block-end1 to 10pbe-2
pbsepadding-block-start padding-block-end1 to 10pbse-3
pispadding-inline-start1 to 10pis-4
piepadding-inline-end1 to 10pie-5
pisepadding-inline-start padding-inline-end1 to 10pise-6
mmargin1 to 10m-7
mtmargin-top1 to 10mt-8
mrmargin-right1 to 10mr-9
mbmargin-bottom1 to 10mb-10
mlmargin-left1 to 10ml-1
mxmargin-left margin-right1 to 10mx-2
mymargin-top margin-bottom1 to 10my-3
mbsmargin-block-start1 to 10mbs-4
mbemargin-block-end1 to 10mbe-5
mbsemargin-block-start margin-block-end1 to 10mbse-6
mismargin-inline-start1 to 10mis-7
miemargin-inline-end1 to 10mie-8
misemargin-inline-start margin-inline-end1 to 10mise-9

Typography ​

  • $text-class-prefix: "text-" !default;

Text utilities

  • text-paragraph
  • text-small
  • text-h1
  • text-h2
  • text-h3
  • text-h4
  • text-h5
  • text-h6

Font Size Utilities

  • $text-class-prefix: "text-" !default;
PropertyClass Name
xstext-xs
smtext-sm
basetext-base
lgtext-lg
xltext-xl
2xltext-2xl
3xltext-3xl
4xltext-4xl
5xltext-5xl

Font Weight Utilities

  • $font-weight-class-prefix: "font-" !default;
PropertyClass Name
lightfont-light
normalfont-normal
boldfont-bold

Font Style Utilities

  • $font-style-class-prefix: "font-" !default;
PropertyClass Name
normalfont-normal
italicfont-italic

Visibility ​

$visibility-class-prefix: "visibility-" !default;

PropertyClass Name
visiblevisibility-visible
hiddenvisibility-hidden
collapsevisibility-collapse