Documentation
Learn the classnames for modules and what modules they currently work with!
Note: Limited classes are still in active development & testing they may not always work as intended
Padding
Around
No Padding: .p-none
Padding Extra Small: p-xs
Padding Small: p-sm
Padding Medium: p-md
Padding Large: p-lg
Padding Extra-Large: p-xl
Padding 2XL: p-2xl
Padding 3XL: p-3xl
Right
Padding Right Extra Small: pr-xs
Padding Right Small: pr-sm
Padding Right Medium: pr-md
Padding Right Large: pr-lg
Padding Right Extra-Large: pr-xl
Padding Right 2XL: pr-2xl
Padding Right 3XL: pr-3xl
Bottom
Padding Extra Bottom Small: pb-xs
Padding Bottom Small: pb-sm
Padding Bottom Medium: pb-md
Padding Bottom Large: pb-lg
Padding Bottom Extra-Large: pb-xl
Padding Bottom 2XL: pb-2xl
Padding Bottom 3XL: pb-3xl
Left
Padding Left Extra Small: pl-xs
Padding Left Small: pl-sm
Padding Left Medium: pl-md
Padding Left Large: pl-lg
Padding Left Extra-Large: pl-xl
Padding Left 2XL: pl-2xl
Padding Left 3XL: pl-3xl
Margin
Around
Margin Extra Small: m-xs
Margin Small: m-sm
Margin Medium: m-md
Margin Large: m-lg
Margin Extra-Large: m-xl
Margin 2XL: m-2xl
Margin 3XL: m-3xl
Right
Margin Right Extra Small: mr-xs
Margin Right Small: mr-sm
Margin Right Medium: mr-md
Margin Right Large: mr-lg
Margin Right Extra-Large: mr-xl
Margin Right 2XL: mr-2xl
Margin Right 3XL: mr-3xl
Bottom
Margin Bottom Extra Small: mb-xs
Margin Bottom Small: mb-sm
Margin Bottom Medium: mb-md
Margin Bottom Large: mb-lg
Margin Bottom Extra-Large: mb-xl
Margin Bottom 2XL: mb-2xl
Margin Bottom 3XL: mb-3xl
Left
Margin Left Extra Small: ml-xs
Margin Left Small: ml-sm
Margin Left Medium: ml-md
Margin Left Large: ml-lg
Margin Left Extra-Large: ml-xl
Margin Left 2XL: ml-2xl
Margin Left 3XL: ml-3xl
Excluded Modules: Buttons
Heading
Heading Extra Small: hd-xs
Heading Small: hd-sm
Heading Medium: hd-md
Heading Large: hd-lg
Heading Extra-Large: hd-xl
Heading 2XL: hd-2xl
Heading 3XL: hd-3xl
Regular Text
Text Extra Small: tx-xs
Text Small: tx-sm
Text Medium: tx-md
Text Large: tx-lg
Text Extra-Large: tx-xl
Text 2XL: tx-2xl
Text 3XL: tx-3xl
Font Weight
Light Font 300: light
Normal Font 400: normal
Medium Font 500: medium
Semibold Font 600: semibold
Bold Font 700: bold
Extra Bold Font 800: extrabold
Black Font 900: black
Border Radius
Border Radius Extra Small: r-xs
Border Radius Small: r-sm
Border Radius Medium: r-md
Border Radius Large: r-lg
Border Radius Extra-Large: r-xl
Border Radius 2XL: r-2xl
Border Radius 3XL: r-3xl
Shadows
Shadow Small: sh-sm
Shadow Medium: sh-md
Shadow Large: sh-lg
Shadow Extra Large: sh-xl
Module Alignment
Align Center: ct
Align Right: rt
Align Left: lt
Align Justify: jt
Flexbox
Flexbox: f
Flex Column: f-col
Flex Column Reverse: f-col-rev
Mobile Classes
Mobile Flexbox: mb-f
Mobile Flex Column: mb-f-col
Mobile Flex column Reverse: mb-f-col-rev
Tablet Classes
Tablet Flexbox: tb-f
Tablet Flex Column: tb-f-col
Tablet Flex Column Reverse: tb-f-col-rev
Max-Width
Max Width 10-1200px: mx-w-10 through 1200
Mobile Classes
Mobile Max Width None: mb-mx-w-n
Tablet Classes
Tablet Max Width None: tb-mx-w-n
Min-Width
Min Width 10-1200px: mn-w-10 through 1200
Min Height (vh)
Min Height: mn-h-10vh through 100vh
Transform Scale
Hover Transform Scale: sc-10 through sc-100
Background Color
Background Color Grey: bg-g-50 through 950