1.7.7 • Published 1 year ago

zadak-front-kit v1.7.7

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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 patternExampleInformation
.{s}bg-{m}{c}{a}.bg-surfaceSet themeSurface (with 100% transparency) as Background
.bg-prim50Set primary color with 50% transparency as background
.bg-w-red20Set themeRed plus 20% white as background
.hbg-background75Set 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 patternExampleInformation
.{s}gr-{m}{c}{a}.gr-blue100Set Gradient(themeBlue100 to themeBlue 90) as Background
.gr-prim50Set Gradient(primary50 to primary40) as Background
.gr-w-red60Set Gradient(themeRed60 to themeWhite50) as Background
.hgr-background80Set Gradient(themeBackground80 to themeBackground70) as Background, when its HOVERED

Text color (.txt)

Class patternExampleInformation
.{s}txt-{m}{c}{a}.txt-normalSet normalText (with 100% transparency) as Text color
.txt-prim50Set primary color with 50% transparency as Text color
.txt-w-red20Set themeRed plus 20% white as Text color
.htxt-background75Set themeRed with 75% transparency as Text color, when its HOVERED

Border color (.bc)

Class patternExampleInformation
.{s}bc-{m}{c}{a}.bc-surfaceSet themeSurface (with 100% transparency) as Border color
.bc-prim50Set primary color with 50% transparency as Border color
.bc-w-red20Set themeRed plus 20% white as Border color
.hbc-background75Set 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 patternExampleInformation
.bgp{pp}.bgpccSet Background position ‘center center’.
.bgptlSet 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 patternExampleInformation
.bgr{r}.bgrnrSet Background repeat ‘no-repeat’
.bgrrxSet Background repeat ‘repeat-x’
.bgrrySet 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 patternExampleInformation
.bgs{r}.bgscvSet Background size ‘cover
.bgsctSet Background size ‘contain
.bgsaSet 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 patternExampleInformation
.{mp}{d}{p}.m16Set 16px margin to all sides
.pl24Set 24px padding to left
.mt48Set 48px margin to top
.p16Set 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 patternExampleInformation
.{m}{wh}{u}{a}.w100Set width 100%
.wp64Set width 64px
.wvw40Set width 40vw
.mnwp80Set min-width 80px
.mxwvw40Set max-width 40vw
.h100Set height 100%
.hp64Set height 64px
.hvh40Set height 40vh
.mnhp80Set min-height 80px
.mxhvh40Set 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 patternExampleInformation
.br{t}{d}{a}.brs2Set All border solid 2px
.brd2Set All border dashed 2px
.brst4Set border top solid 4px
.brdb4Set border bottom dashed 4px
.brbl16Set 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 patternExampleInformation
.br{d}{a}.br2Set All border radius 2px
.brtr2Set border top right radius 2px
.brtl8Set border top left radius 8px
.brbr12Set border bottom right radius 12px
.brbl16Set 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

classInformation
.fJustify-content: flex-start
.frJustify-content: center
.fcJustify-content: flex-end
.fwFlex-wrap: wrap

Justify Content

Class patternExampleInformation
.j{j}.jsJustify-content: flex-start
.jcJustify-content: center
.jeJustify-content: flex-end
.jaJustify-content: space-around
.jbJustify-content: space-between

Align Items

Class patternExampleInformation
.a{a}.asAlign-items: flex-start
.acAlign-items: center
.aeAlign-items: flex-end
.achAlign-items: stretch

Full hand classes for Flex layout

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

Flex Grow (.fg)

{a} (amount):

  • from 0 to 200
Class patternExampleInformation
.fg{a}.fg100Flex-grow: 1
.fg25Flex-grow: 0.25

Transform

Rotation (.rot)

{a} (amount):

  • from 0 to 360
Class PatternExampleInformation
.rot{a}.rot90Applies a rotation transformation of 90 degrees

Scale Classes (.scl)

{a} (amount):

  • from 0 to 200
Class PatternExampleInformation
.scl{a}.scl100Applies a scale transformation of 1.00
.hscl{a}.hscl150Applies a scale transformation of 1.50 when hovered

Translate Classes (.trns)

{a} (amount):

  • from 0 to 200
Class PatternExampleInformation
.trnsx{a}.trnsx50Applies a translate transformation along the X-axis of 50%
.trnsx-{a}.trnsx-50Applies a translate transformation along the X-axis of -50%
.trnsy{a}.trnsy50Applies a translate transformation along the Y-axis of 50%
.trnsy-{a}.trnsy-50Applies a translate transformation along the Y-axis of -50%
.trnsxy{a}.trnsxy50Applies a translate transformation along both the X and Y axes of 50%
.trnsxy-{a}.trnsxy-50Applies 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 PatternExampleInformation
.po{p}.posPosition: static
.porPosition: relative
.poaPosition: absolute
.pofPosition: fixed
.postPosition: sticky

Positioning Pixel Classes

{a} (amount):

  • from 0 to 200
Class PatternExampleInformation
.lp{a}.lp50Left: 50px
.rp{a}.rp50Right: 50px
.tp{a}.tp50Top: 50px
.bp{a}.bp50Bottom: 50px
.lp-{a}.lp-50Left: -50px
.rp-{a}.rp-50Right: -50px
.tp-{a}.tp-50Top: -50px
.bp-{a}.bp-50Bottom: -50px

Positioning Percentage Classes

{a} (amount):

  • from 0 to 200
Class PatternExampleInformation
.l{a}.l50Left: 50%
.r{a}.r50Right: 50%
.t{a}.t50Top: 50%
.b{a}.b50Bottom: 50%
.l-{a}.l-50Left: -50%
.r-{a}.r-50Right: -50%
.t-{a}.t-50Top: -50%
.b-{a}.b-50Bottom: -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 PatternExampleInformation
.tn{‍e}{a*100}.tne0Transition: ease-in-out 0ms all
.tne1000Transition: ease-in-out 1000ms all
.tnl0Transition: linear 0ms all
.tnl500Transition: linear 500ms all
.tncf0Transition: cubic-bezier(1, 0, 0, 1) 0ms all
.tncf5000Transition: cubic-bezier(1, 0, 0, 1) 5000ms all
.tnch0Transition: cubic-bezier(0.5, 0, 0, 0.5) 0ms all
.tnch400Transition: 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 PatternExampleInformation
.fs{a}.fs10Font-size: 10px
.fs50Font-size: 50px
.fs100Font-size: 100px

Font Weight Classes

{a} (amount):

  • from 100, 200, 300, 400, 500, 600, 700, 800, 900
Class PatternExampleInformation
.fw{a}.fw100Font-weight: 100
.fw500Font-weight: 500
.fw900Font-weight: 900

Backdrop Filter Classes

{a} (amount):

  • from 0 to 100
Class PatternExampleInformation
.bdb{a}.bdb50Backdrop-filter: blur(50px)
.bdi{a}.bdi50Backdrop-filter: invert(50%)

Filter Classes

{a} (amount):

  • from 0 to 100
Class PatternExampleInformation
.flb{a}.flb50Filter: blur(50px)
.flg{a}.flg50Filter: grayscale(50%)

Z-Index Classes

{a * 5} (amount):

  • from 0 to 1000
Class PatternExampleInformation
.zi{a * 5}.zi500Z-index: 500
.zi5000Z-index: 5000

Box Shadow Classes

{a} (amount):

  • from 0 to 200
Class PatternExampleInformation
.bsh{a}.bsh50Box-shadow: 0 50px 100px -25px var(–themeBlack15)

Opacity Classes

{a} (amount):

  • from 0 to 100
Class PatternExampleInformation
.o{a}.o50Opacity: 0.50
.ho{a}.ho80Opacity: 0.80 when hovered
1.7.7

1 year ago

1.7.6

1 year ago

1.2.0

1 year ago

1.6.4

1 year ago

1.4.6

1 year ago

1.2.8

1 year ago

1.6.3

1 year ago

1.4.5

1 year ago

1.2.7

1 year ago

1.6.2

1 year ago

1.4.4

1 year ago

1.2.6

1 year ago

1.6.1

1 year ago

1.4.3

1 year ago

1.2.5

1 year ago

1.6.0

1 year ago

1.4.2

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

1.2.2

1 year ago

1.5.9

1 year ago

1.5.8

1 year ago

1.7.5

1 year ago

1.5.7

1 year ago

1.3.9

1 year ago

1.5.6

1 year ago

1.3.8

1 year ago

1.7.3

1 year ago

1.5.5

1 year ago

1.3.7

1 year ago

1.7.2

1 year ago

1.5.4

1 year ago

1.3.6

1 year ago

1.1.8

1 year ago

1.7.1

1 year ago

1.5.3

1 year ago

1.3.5

1 year ago

1.1.7

1 year ago

1.7.0

1 year ago

1.5.2

1 year ago

1.3.4

1 year ago

1.1.6

1 year ago

1.5.1

1 year ago

1.3.3

1 year ago

1.5.0

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

1.6.9

1 year ago

1.6.8

1 year ago

1.6.7

1 year ago

1.4.9

1 year ago

1.6.6

1 year ago

1.4.8

1 year ago

1.6.5

1 year ago

1.4.7

1 year ago

1.2.9

1 year ago

1.1.5

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago