zadak-front-kit

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