Documentation

Color Handling

{c} (color):

• prim (primary)
• prim-dark (primaryDark)
• on-prim (onPrimary)
• sec (secondary)
• sec-dark (secondaryDark)
• on-sec (onSecondary)
• normal (normalText)
• dark (darkText)
• invert (invertText)
• surface (themeSurface)
• background (themeBackground)
• red (themeRed)
• green (themeGreen)
• blue (themeBlue)
• orange (themeOrange)
• white (themeWhite)
• black (themeBlack)
• paletteOne (paletteOne)
• paletteTwo (paletteTwo)
• paletteThree (paletteThree)

{m} (color mode):

• “”: Use Alpha variants, Adding 5% of {color} transparency in every step.
• “b-“: Use Black variants, Adding 5% of Black to {color}.
• “w-“: Use White variants, Adding 5% of White to {color}.

{a} (alpha): optional

• Can be empty string (means 100%) or 0, 5, 10, 15, 20, 25, … , 80, 85, 90, 95, 100.

{s} (state): optional

• “”: empty string means default mouse state.
• “h”: hoverd (will generate if div hovered).

Background Color (.bg)

| Class pattern | Example | Information | | --- | --- | --- | | .{s}bg-{m}{c}{a} | .bg-surface | Set themeSurface (with 100% transparency) as Background | | | .bg-prim50 | Set primary color with 50% transparency as background | | | .bg-w-red20 | Set themeRed plus 20% white as background | | | .hbg-background75 | Set themeRed with 75% transparency as background, when its HOVERED |

Background Gradient (.gr)

Alphas in this classes are like 10, 20, 30, 40, 50, 60, 70, 80, 90 ,100 and CAN NOT BE EMPTY String because of 10% differente between gradient start and end point colors.

| Class pattern | Example | Information | | --- | --- | --- | | .{s}gr-{m}{c}{a} | .gr-blue100 | Set Gradient(themeBlue100 to themeBlue 90) as Background | | | .gr-prim50 | Set Gradient(primary50 to primary40) as Background | | | .gr-w-red60 | Set Gradient(themeRed60 to themeWhite50) as Background | | | .hgr-background80 | Set Gradient(themeBackground80 to themeBackground70) as Background, when its HOVERED |

Text color (.txt)

| Class pattern | Example | Information | | --- | --- | --- | | .{s}txt-{m}{c}{a} | .txt-normal | Set normalText (with 100% transparency) as Text color | | | .txt-prim50 | Set primary color with 50% transparency as Text color | | | .txt-w-red20 | Set themeRed plus 20% white as Text color | | | .htxt-background75 | Set themeRed with 75% transparency as Text color, when its HOVERED |

Border color (.bc)

| Class pattern | Example | Information | | --- | --- | --- | | .{s}bc-{m}{c}{a} | .bc-surface | Set themeSurface (with 100% transparency) as Border color | | | .bc-prim50 | Set primary color with 50% transparency as Border color | | | .bc-w-red20 | Set themeRed plus 20% white as Border color | | | .hbc-background75 | Set themeRed with 75% transparency as Border color, when its HOVERED |

Background Image Handling

Background Position (.bgp)

{vh} (vertical position and horizontal position):

• cc: This value sets the background position to 'center center', meaning the background image will be positioned at the center both horizontally and vertically within its container.
• tl: This value sets the background position to 'top left'.
• tc: This value sets the background position to 'top center'.
• tr: This value sets the background position to 'top right'.
• bl: This value sets the background position to 'bottom left'.
• bc: This value sets the background position to 'bottom center'.
• br: This value sets the background position to 'bottom right'.

| Class pattern | Example | Information | | --- | --- | --- | | .bgp{pp} | .bgpcc | Set Background position ‘center center’. | | | .bgptl | Set Background position ‘top left’. |

Background repeat (.bgr)

{r} (repeat mode):

• nr: This value sets the background repeat to 'no-repeat', ensuring that the background image is not repeated and displayed only once.
• rx: This value sets the background repeat to 'repeat-x'.
• ry: This value sets the background repeat to 'repeat-y'.

| Class pattern | Example | Information | | --- | --- | --- | | .bgr{r} | .bgrnr | Set Background repeat ‘no-repeat’ | | | .bgrrx | Set Background repeat ‘repeat-x’ | | | .bgrry | Set Background repeat ‘repeat-y’ |

Background size (.bgs)

{s} (background size):

• cv: This value sets the background size to 'cover', making the background image cover the entire container, possibly cropping some parts of the image to fit.
• a: This value sets the background size to 'auto', allowing the browser to automatically determine the size of the background image.
• ct: This value sets the background size to 'contain', ensuring that the entire background image is visible within the container without cropping, even if it means leaving empty space.

| Class pattern | Example | Information | | --- | --- | --- | | .bgs{r} | .bgscv | Set Background size ‘cover | | | .bgsct | Set Background size ‘contain | | | .bgsa | Set Background size ‘auto’ |

Margin and Padding Handling (.m and .p)

{mp} (margin or padding):

• m: (margin)
• p: (padding)

{d} (directions): optional

• “”: set value to all sides
• t: (top)
• r: (right)
• b: (bottom)
• l: (left)

{p} (amount in pixel):

• from 0 to 400

| Class pattern | Example | Information | | --- | --- | --- | | .{mp}{d}{p} | .m16 | Set 16px margin to all sides | | | .pl24 | Set 24px padding to left | | | .mt48 | Set 48px margin to top | | | .p16 | Set 16px padding to all sides |

Width and Height (.w and .h)

{m} (attribute mode): optional

• “”: default
• mx: (max-)
• mn: (min-)

{wh} (width or height):

• w: (width)
• h: (height)

{u} (unit): optional

• “”: percent
• p: pixel
• vw: viewport width
• vh: viewport height
• l: (left)

{a} (amount):

• from 0 to 500

| Class pattern | Example | Information | | --- | --- | --- | | .{m}{wh}{u}{a} | .w100 | Set width 100% | | | .wp64 | Set width 64px | | | .wvw40 | Set width 40vw | | | .mnwp80 | Set min-width 80px | | | .mxwvw40 | Set max-width 40vw | | | .h100 | Set height 100% | | | .hp64 | Set height 64px | | | .hvh40 | Set height 40vh | | | .mnhp80 | Set min-height 80px | | | .mxhvh40 | Set max-height 40vw |

Border Handling

Borders (.brs and .brd)

{t} (border type):

• s: set border type solid.
• d: set border type dashed.

{d} (border direction): optional

• “”: set value to all sides
• t: (top)
• r: (right)
• b: (bottom)
• l: (left)

{a} (amount):

• from 0 to 200

| Class pattern | Example | Information | | --- | --- | --- | | .br{t}{d}{a} | .brs2 | Set All border solid 2px | | | .brd2 | Set All border dashed 2px | | | .brst4 | Set border top solid 4px | | | .brdb4 | Set border bottom dashed 4px | | | .brbl16 | Set border bottom leftradius 16px |

Border Radius (.br)

{d} (attribute mode): optional

• “”: Set To all angles.
• tl: This value sets the background position to 'top left'.
• tr: This value sets the background position to 'top right'.
• bl: This value sets the background position to 'bottom left'.
• br: This value sets the background position to 'bottom right'.

{a} (amount):

• from 0 to 200

| Class pattern | Example | Information | | --- | --- | --- | | .br{d}{a} | .br2 | Set All border radius 2px | | | .brtr2 | Set border top right radius 2px | | | .brtl8 | Set border top left radius 8px | | | .brbr12 | Set border bottom right radius 12px | | | .brbl16 | Set border bottom left radius 16px |

Layout Handle

Flex (.f)

{d} (flex directions)

• “”: Sets display flex.
• fr: Sets flex-direction to row.
• fc: Sets flex-direction to column.

{j} (justify contents)

• s: Aligns items to the start of the main axis.
• c: Centers items along the main axis.
• e: Aligns items to the end of the main axis.
• a: Distributes space around items.
• b: Distributes space between items.

{a} (align items)

• s: Aligns items to the start of the cross axis.
• c: Centers items along the cross axis.
• e: Aligns items to the end of the cross axis.
• ch: Stretches items to fill the container (cross axis).

Short hand classes:

Set Display flex and direction

| class | Information | | --- | --- | | .f | Justify-content: flex-start | | .fr | Justify-content: center | | .fc | Justify-content: flex-end | | .fw | Flex-wrap: wrap |

Justify Content

| Class pattern | Example | Information | | --- | --- | --- | | .j{j} | .js | Justify-content: flex-start | | | .jc | Justify-content: center | | | .je | Justify-content: flex-end | | | .ja | Justify-content: space-around | | | .jb | Justify-content: space-between |

Align Items

| Class pattern | Example | Information | | --- | --- | --- | | .a{a} | .as | Align-items: flex-start | | | .ac | Align-items: center | | | .ae | Align-items: flex-end | | | .ach | Align-items: stretch |

Full hand classes for Flex layout

| Class pattern | Example | Equals to | Information | | --- | --- | --- | --- | | .f{d}{j}{a} | .frss | .fr .js .as | Flex-direction: row, Justify-content: start, Align-items: start | | | .frsc | .fr .js .ac | Flex-direction: row, Justify-content: start, Align-items: center | | | .frse | .fr .js .ae | Flex-direction: row, Justify-content: start, Align-items: end | | | .frsch | .fr .js .ach | Flex-direction: row, Justify-content: start, Align-items: stretch | | | .frcs | .fr .jc .as | Flex-direction: row, Justify-content: center, Align-items: start | | | .frcc | .fr .jc .ac | Flex-direction: row, Justify-content: center, Align-items: center | | | .frce | .fr .jc .ae | Flex-direction: row, Justify-content: center, Align-items: end | | | .frcch | .fr .jc .ach | Flex-direction: row, Justify-content: center, Align-items: stretch | | | .fres | .fr .je .as | Flex-direction: row, Justify-content: end, Align-items: start | | | .frec | .fr .je .ac | Flex-direction: row, Justify-content: end, Align-items: center | | | .free | .fr .je .ae | Flex-direction: row, Justify-content: end, Align-items: end | | | .frech | .fr .je .ach | Flex-direction: row, Justify-content: end, Align-items: stretch | | | .fras | .fr .ja .as | Flex-direction: row, Justify-content: around, Align-items: start | | | .frac | .fr .ja .ac | Flex-direction: row, Justify-content: around, Align-items: center | | | .frae | .fr .ja .ae | Flex-direction: row, Justify-content: around, Align-items: end | | | .frach | .fr .ja .ach | Flex-direction: row, Justify-content: around, Align-items: stretch | | | .frbs | .fr .jb .as | Flex-direction: row, Justify-content: between, Align-items: start | | | .frbc | .fr .jb .ac | Flex-direction: row, Justify-content: between, Align-items: center | | | .frbe | .fr .jb .ae | Flex-direction: row, Justify-content: between, Align-items: end | | | .frbch | .fr .jb .ach | Flex-direction: row, Justify-content: between, Align-items: stretch | | | .fcss | .fc .js .as | Flex-direction: column, Justify-content: start, Align-items: start | | | .fcsc | .fc .js .ac | Flex-direction: column, Justify-content: start, Align-items: center | | | .fcse | .fc .js .ae | Flex-direction: column, Justify-content: start, Align-items: end | | | .fcsch | .fc .js .ach | Flex-direction: column, Justify-content: start, Align-items: stretch | | | .fccs | .fc .jc .as | Flex-direction: column, Justify-content: center, Align-items: start | | | .fccc | .fc .jc .ac | Flex-direction: column, Justify-content: center, Align-items: center | | | .fcce | .fc .jc .ae | Flex-direction: column, Justify-content: center, Align-items: end | | | .fccch | .fc .jc .ach | Flex-direction: column, Justify-content: center, Align-items: stretch | | | .fces | .fc .je .as | Flex-direction: column, Justify-content: end, Align-items: start | | | .fcec | .fc .je .ac | Flex-direction: column, Justify-content: end, Align-items: center | | | .fcee | .fc .je .ae | Flex-direction: column, Justify-content: end, Align-items: end | | | .fcech | .fc .je .ach | Flex-direction: column, Justify-content: end, Align-items: stretch | | | .fcas | .fc .ja .as | Flex-direction: column, Justify-content: around, Align-items: start | | | .fcac | .fc .ja .ac | Flex-direction: column, Justify-content: around, Align-items: center | | | .fcae | .fc .ja .ae | Flex-direction: column, Justify-content: around, Align-items: end | | | .fcach | .fc .ja .ach | Flex-direction: column, Justify-content: around, Align-items: stretch | | | .fcbs | .fc .jb .as | Flex-direction: column, Justify-content: between, Align-items: start | | | .fcbc | .fc .jb .ac | Flex-direction: column, Justify-content: between, Align-items: center | | | .fcbe | .fc .jb .ae | Flex-direction: column, Justify-content: between, Align-items: end | | | .fcbch | .fc .jb .ach | Flex-direction: column, Justify-content: between, Align-items: stretch |

Flex Grow (.fg)

{a} (amount):

• from 0 to 200

| Class pattern | Example | Information | | --- | --- | --- | | .fg{a} | .fg100 | Flex-grow: 1 | | | .fg25 | Flex-grow: 0.25 |

Transform

Rotation (.rot)

{a} (amount):

• from 0 to 360

| Class Pattern | Example | Information | | --- | --- | --- | | .rot{a} | .rot90 | Applies a rotation transformation of 90 degrees |

Scale Classes (.scl)

{a} (amount):

• from 0 to 200

| Class Pattern | Example | Information | | --- | --- | --- | | .scl{a} | .scl100 | Applies a scale transformation of 1.00 | | .hscl{a} | .hscl150 | Applies a scale transformation of 1.50 when hovered |

Translate Classes (.trns)

{a} (amount):

• from 0 to 200

| Class Pattern | Example | Information | | --- | --- | --- | | .trnsx{a} | .trnsx50 | Applies a translate transformation along the X-axis of 50% | | .trnsx-{a} | .trnsx-50 | Applies a translate transformation along the X-axis of -50% | | .trnsy{a} | .trnsy50 | Applies a translate transformation along the Y-axis of 50% | | .trnsy-{a} | .trnsy-50 | Applies a translate transformation along the Y-axis of -50% | | .trnsxy{a} | .trnsxy50 | Applies a translate transformation along both the X and Y axes of 50% | | .trnsxy-{a} | .trnsxy-50 | Applies a translate transformation along both the X and Y axes of -50% |

Positioning

Position Classes (.po)

{p} (css position):

• s: static
• r: relative
• a: absolute
• f: fixed
• st: sticky

| Class Pattern | Example | Information | | --- | --- | --- | | .po{p} | .pos | Position: static | | | .por | Position: relative | | | .poa | Position: absolute | | | .pof | Position: fixed | | | .post | Position: sticky |

Positioning Pixel Classes

{a} (amount):

• from 0 to 200

| Class Pattern | Example | Information | | --- | --- | --- | | .lp{a} | .lp50 | Left: 50px | | .rp{a} | .rp50 | Right: 50px | | .tp{a} | .tp50 | Top: 50px | | .bp{a} | .bp50 | Bottom: 50px | | .lp-{a} | .lp-50 | Left: -50px | | .rp-{a} | .rp-50 | Right: -50px | | .tp-{a} | .tp-50 | Top: -50px | | .bp-{a} | .bp-50 | Bottom: -50px |

Positioning Percentage Classes

{a} (amount):

• from 0 to 200

| Class Pattern | Example | Information | | --- | --- | --- | | .l{a} | .l50 | Left: 50% | | .r{a} | .r50 | Right: 50% | | .t{a} | .t50 | Top: 50% | | .b{a} | .b50 | Bottom: 50% | | .l-{a} | .l-50 | Left: -50% | | .r-{a} | .r-50 | Right: -50% | | .t-{a} | .t-50 | Top: -50% | | .b-{a} | .b-50 | Bottom: -50% |

Transition Classes (.tn)

{e} (easeing)

• "e": ease-in-out,
• "l": linear,
• "cf": cubic-bezier(1, 0, 0, 1),
• "ch": cubic-bezier(0.5, 0, 0, 0.5),

{a * 100} (amount):

• from 0 to 50

| Class Pattern | Example | Information | | --- | --- | --- | | .tn{‍e}{a*100} | .tne0 | Transition: ease-in-out 0ms all | | | .tne1000 | Transition: ease-in-out 1000ms all | | | .tnl0 | Transition: linear 0ms all | | | .tnl500 | Transition: linear 500ms all | | | .tncf0 | Transition: cubic-bezier(1, 0, 0, 1) 0ms all | | | .tncf5000 | Transition: cubic-bezier(1, 0, 0, 1) 5000ms all | | | .tnch0 | Transition: cubic-bezier(0.5, 0, 0, 0.5) 0ms all | | | .tnch400 | Transition: cubic-bezier(0.5, 0, 0, 0.5) 400ms all |

Font Size (.fs and .fw)

Font Size Classes

{a} (amount):

• from 0 to 200

| Class Pattern | Example | Information | | --- | --- | --- | | .fs{a} | .fs10 | Font-size: 10px | | | .fs50 | Font-size: 50px | | | .fs100 | Font-size: 100px |

Font Weight Classes

{a} (amount):

• from 100, 200, 300, 400, 500, 600, 700, 800, 900

| Class Pattern | Example | Information | | --- | --- | --- | | .fw{a} | .fw100 | Font-weight: 100 | | | .fw500 | Font-weight: 500 | | | .fw900 | Font-weight: 900 |

Backdrop Filter Classes

{a} (amount):

• from 0 to 100

| Class Pattern | Example | Information | | --- | --- | --- | | .bdb{a} | .bdb50 | Backdrop-filter: blur(50px) | | .bdi{a} | .bdi50 | Backdrop-filter: invert(50%) |

Filter Classes

{a} (amount):

• from 0 to 100

| Class Pattern | Example | Information | | --- | --- | --- | | .flb{a} | .flb50 | Filter: blur(50px) | | .flg{a} | .flg50 | Filter: grayscale(50%) |

Z-Index Classes

{a * 5} (amount):

• from 0 to 1000

| Class Pattern | Example | Information | | --- | --- | --- | | .zi{a * 5} | .zi500 | Z-index: 500 | | | .zi5000 | Z-index: 5000 | | | | |

Box Shadow Classes

{a} (amount):

• from 0 to 200

| Class Pattern | Example | Information | | --- | --- | --- | | .bsh{a} | .bsh50 | Box-shadow: 0 50px 100px -25px var(–themeBlack15) |

Opacity Classes

{a} (amount):

• from 0 to 100

| Class Pattern | Example | Information | | --- | --- | --- | | .o{a} | .o50 | Opacity: 0.50 | | .ho{a} | .ho80 | Opacity: 0.80 when hovered |