zadak-front-kit v1.7.7

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)

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.

Text color (.txt)

Border color (.bc)

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'.

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'.

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.

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

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

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

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

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

Justify Content

Align Items

Full hand classes for Flex layout

Flex Grow (.fg)

{a} (amount):

• from 0 to 200

Transform

Rotation (.rot)

{a} (amount):

• from 0 to 360

Scale Classes (.scl)

{a} (amount):

• from 0 to 200

Translate Classes (.trns)

{a} (amount):

• from 0 to 200

Positioning

Position Classes (.po)

{p} (css position):

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

Positioning Pixel Classes

{a} (amount):

• from 0 to 200

Positioning Percentage Classes

{a} (amount):

• from 0 to 200

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

Font Size (.fs and .fw)

Font Size Classes

{a} (amount):

• from 0 to 200

Font Weight Classes

{a} (amount):

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

Backdrop Filter Classes

{a} (amount):

• from 0 to 100

Filter Classes

{a} (amount):

• from 0 to 100

Z-Index Classes

{a * 5} (amount):

• from 0 to 1000

Box Shadow Classes

{a} (amount):

• from 0 to 200

Opacity Classes

{a} (amount):

• from 0 to 100