Complete Reference
Every single JugaduCSS utility class. Pattern:
jugadu-{property}-{value}. All classes support modifiers like
chuaa:,
lap:,
raat:.
Installation
Install and build in seconds.
|
Class
|
CSS Output
|
|
npm i -D jugad-aur-css
|
Install as dev dependency
|
|
npx jace build -c jugadu.config.js -o
css/jace.css
|
Compile used classes only
|
|
npx jace watch -c jugadu.config.js -o
css/jace.css
|
JIT watch mode
|
Modifiers (States & Responsive)
Prefix any class with a modifier followed by colon.
Combinable:
lap:chuaa:jugadu-piche-laal-500
|
Class
|
CSS Output
|
|
chuaa:
|
:hover
|
|
dabaaya:
|
:active
|
|
focus:
|
:focus
|
|
disabled:
|
:disabled
|
|
pehla:
|
:first-child
|
|
aakhri:
|
:last-child
|
|
odd:
|
:nth-child(odd)
|
|
even:
|
:nth-child(even)
|
|
phone:
|
@media (min-width: 640px)
|
|
tab:
|
@media (min-width: 768px)
|
|
lap:
|
@media (min-width: 1024px)
|
|
bada-lap:
|
@media (min-width: 1280px)
|
|
bawaal-lap:
|
@media (min-width: 1536px)
|
|
raat:
|
prefers-color-scheme: dark / .dark class
|
|
bada-bhai-chuaa:
|
Group hover (parent .bada-bhai:hover)
|
Display
|
Class
|
CSS Output
|
|
jugadu-dikha
|
display: block
|
|
jugadu-dikh-mat
|
display: none
|
|
jugadu-jugaad-flex
|
display: flex
|
|
jugadu-jugaad-grid
|
display: grid
|
|
jugadu-saath-mein
|
display: inline-block
|
Position
|
Class
|
CSS Output
|
|
jugadu-chipkao
|
position: absolute
|
|
jugadu-chipkao-pakka
|
position: fixed
|
|
jugadu-hoga-to
|
position: relative
|
|
jugadu-jaha-hai-wahi
|
position: static
|
|
jugadu-chipkao-sticky
|
position: sticky
|
Flexbox
|
Class
|
CSS Output
|
|
jugadu-row
|
flex-direction: row
|
|
jugadu-col
|
flex-direction: column
|
|
jugadu-row-ulta
|
flex-direction: row-reverse
|
|
jugadu-col-ulta
|
flex-direction: column-reverse
|
|
jugadu-beech-bajaar
|
justify-content: center; align-items:
center
|
|
jugadu-failao
|
justify-content: space-between
|
|
jugadu-aaspas
|
justify-content: space-around
|
|
jugadu-line-me-lao
|
align-items: center
|
|
jugadu-upar-rakh
|
align-items: flex-start
|
|
jugadu-wrap-kar
|
flex-wrap: wrap
|
|
jugadu-wrap-mat
|
flex-wrap: nowrap
|
Grid
Grid columns, rows, and spans.
|
Class
|
CSS Output
|
|
jugadu-jaali-cols-{1-12}
|
grid-template-columns: repeat(n,
minmax(0, 1fr))
|
|
jugadu-jaali-rows-{1-6}
|
grid-template-rows: repeat(n, minmax(0,
1fr))
|
|
jugadu-jaali-col-span-{n}
|
grid-column: span n / span n
|
|
jugadu-jaali-cols-none
|
grid-template-columns: none
|
Overflow
|
Class
|
CSS Output
|
|
jugadu-bahar-chupao
|
overflow: hidden
|
|
jugadu-bahar-dikhao
|
overflow: visible
|
|
jugadu-scroll-maar
|
overflow: auto
|
|
jugadu-scroll-x
|
overflow-x: auto
|
|
jugadu-scroll-y
|
overflow-y: auto
|
Dabao (Padding) & Khisko (Margin)
Scale: 0, 0.5, 1...10, 12, 14, 16, 20, 24, 28, 32, 40,
48, 56, 64, 72, 80, 96, 112, 128. Where 4 = 1rem.
Supports arbitrary values like
jugadu-dabao-[13px].
|
Class
|
CSS Output
|
|
jugadu-dabao-{n}
|
padding: {value}
|
|
jugadu-dabao-x-{n}
|
padding-left + padding-right
|
|
jugadu-dabao-y-{n}
|
padding-top + padding-bottom
|
|
jugadu-dabao-t-{n}
|
padding-top
|
|
jugadu-dabao-r-{n}
|
padding-right
|
|
jugadu-dabao-b-{n}
|
padding-bottom
|
|
jugadu-dabao-l-{n}
|
padding-left
|
|
jugadu-khisko-{n}
|
margin: {value}
|
|
jugadu-khisko-x-{n}
|
margin-left + margin-right
|
|
jugadu-khisko-y-{n}
|
margin-top + margin-bottom
|
|
jugadu-khisko-t-{n}
|
margin-top
|
|
jugadu-khisko-r-{n}
|
margin-right
|
|
jugadu-khisko-b-{n}
|
margin-bottom
|
|
jugadu-khisko-l-{n}
|
margin-left
|
|
jugadu-beech-mein
|
margin-left: auto; margin-right: auto
|
Fasla (Gap)
|
Class
|
CSS Output
|
|
jugadu-fasla-{n}
|
gap: {value}
|
|
jugadu-fasla-x-{n}
|
column-gap: {value}
|
|
jugadu-fasla-y-{n}
|
row-gap: {value}
|
Choda (Width) & Lamba (Height)
Accepts spacing scale, fractions (1/2, 1/3), or
arbitrary values.
|
Class
|
CSS Output
|
|
jugadu-choda-{n}
|
width: {spacing value}
|
|
jugadu-choda-full
|
width: 100%
|
|
jugadu-choda-screen
|
width: 100vw
|
|
jugadu-choda-min
|
width: min-content
|
|
jugadu-choda-max
|
width: max-content
|
|
jugadu-choda-fit
|
width: fit-content
|
|
jugadu-choda-1/2
|
width: 50%
|
|
jugadu-choda-[350px]
|
width: 350px
|
|
jugadu-lamba-{n}
|
height: {spacing value}
|
|
jugadu-lamba-full
|
height: 100%
|
|
jugadu-lamba-screen
|
height: 100vh
|
|
jugadu-max-choda-{breakpoint}
|
max-width: {screen value}
|
|
jugadu-min-lamba-screen
|
min-height: 100vh
|
Akshar (Font Size)
Sizes: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl,
7xl, 8xl, 9xl. Includes line-height and letter-spacing.
|
Class
|
CSS Output
|
|
jugadu-akshar-xs
|
font-size: 0.75rem; line-height: 1rem
|
|
jugadu-akshar-sm
|
font-size: 0.875rem; line-height:
1.25rem
|
|
jugadu-akshar-base
|
font-size: 1rem; line-height: 1.5rem
|
|
jugadu-akshar-lg
|
font-size: 1.125rem; line-height:
1.75rem
|
|
jugadu-akshar-xl
|
font-size: 1.25rem; line-height: 1.75rem
|
|
jugadu-akshar-2xl
|
font-size: 1.5rem; line-height: 2rem
|
|
jugadu-akshar-4xl
|
font-size: 2.25rem; line-height: 2.5rem
|
|
jugadu-akshar-6xl
|
font-size: 3.75rem; line-height: 1
|
|
jugadu-akshar-9xl
|
font-size: 8rem; line-height: 1
|
|
jugadu-akshar-[22px]
|
font-size: 22px (arbitrary)
|
Mota (Font Weight)
|
Class
|
CSS Output
|
|
jugadu-mota-patla
|
font-weight: 100
|
|
jugadu-mota-halka
|
font-weight: 300
|
|
jugadu-mota-normal
|
font-weight: 400
|
|
jugadu-mota-semi
|
font-weight: 600
|
|
jugadu-mota-bold
|
font-weight: 700
|
|
jugadu-mota-extra-bold
|
font-weight: 800
|
|
jugadu-mota-bawaal
|
font-weight: 900
|
Text Align
|
Class
|
CSS Output
|
|
jugadu-center-kar
|
text-align: center
|
|
jugadu-left-kar
|
text-align: left
|
|
jugadu-right-kar
|
text-align: right
|
|
jugadu-baraabar-kar
|
text-align: justify
|
Text Transform
|
Class
|
CSS Output
|
|
jugadu-bada-akshar
|
text-transform: uppercase
|
|
jugadu-chota-akshar
|
text-transform: lowercase
|
|
jugadu-pehla-bada
|
text-transform: capitalize
|
|
jugadu-normal-akshar
|
text-transform: none
|
Letter Spacing (Khulla/Chipka)
|
Class
|
CSS Output
|
|
jugadu-khulla-khulla
|
letter-spacing: 0.025em (wide)
|
|
jugadu-chipka-chipka
|
letter-spacing: -0.025em (tight)
|
Colors: Rang / Piche / Kinaara / Ghera
Pattern:
jugadu-{rang|piche|kinaara|ghera}-{color}-{shade}. Shades: 50-950. Available palettes: laal (Red), hara
(Green), nila (Blue), pila (Yellow), narangi (Orange),
mitti (Stone), raakh (Slate), sona (Amber), samundari
(Teal), koyla (Zinc). Plus jugadu-orange, deep-space,
kaala, safed, parchai. Supports arbitrary:
jugadu-piche-[#ff6600].
|
Class
|
CSS Output
|
|
jugadu-rang-{color}-{shade}
|
color: {hex}
|
|
jugadu-piche-{color}-{shade}
|
background-color: {hex}
|
|
jugadu-kinaara-{color}-{shade}
|
border-color: {hex}
|
|
jugadu-ghera-{color}-{shade}
|
box-shadow ring with color
|
|
jugadu-rang-safed
|
color: #ffffff
|
|
jugadu-piche-kaala
|
background-color: #000000
|
|
jugadu-piche-jugadu-orange
|
background-color: #EB9115
|
|
jugadu-rang-deep-space
|
color: #0F1115
|
|
jugadu-piche-laal-500
|
background-color: #ef4444
|
|
jugadu-rang-samundari-400
|
color: #2dd4bf
|
|
jugadu-piche-sona-600
|
background-color: #d97706
|
|
jugadu-kinaara-koyla-700
|
border-color: #3f3f46
|
Gol (Border Radius)
|
Class
|
CSS Output
|
|
jugadu-gol-none
|
border-radius: 0px
|
|
jugadu-gol-sm
|
border-radius: 0.125rem
|
|
jugadu-gol
|
border-radius: 0.25rem
|
|
jugadu-gol-md
|
border-radius: 0.375rem
|
|
jugadu-gol-lg
|
border-radius: 0.5rem
|
|
jugadu-gol-xl
|
border-radius: 0.75rem
|
|
jugadu-gol-2xl
|
border-radius: 1rem
|
|
jugadu-gol-3xl
|
border-radius: 1.5rem
|
|
jugadu-gol-4xl
|
border-radius: 2rem
|
|
jugadu-gol-pura
|
border-radius: 9999px
|
|
jugadu-gol-[8px]
|
border-radius: 8px (arbitrary)
|
Kinaara (Border Width)
Directional: t, r, b, l, x, y.
|
Class
|
CSS Output
|
|
jugadu-kinaara
|
border-width: 1px
|
|
jugadu-kinaara-0
|
border-width: 0px
|
|
jugadu-kinaara-2
|
border-width: 2px
|
|
jugadu-kinaara-4
|
border-width: 4px
|
|
jugadu-kinaara-8
|
border-width: 8px
|
|
jugadu-kinaara-t-1
|
border-top-width: 1px
|
|
jugadu-kinaara-b-2
|
border-bottom-width: 2px
|
|
jugadu-kinaara-x-4
|
border-left-width + border-right-width:
4px
|
Border Style
|
Class
|
CSS Output
|
|
jugadu-kinaara-thos
|
border-style: solid
|
|
jugadu-kinaara-dashed
|
border-style: dashed
|
|
jugadu-kinaara-dotted
|
border-style: dotted
|
Parchai (Box Shadow)
From subtle to extreme. Includes colored glows.
|
Class
|
CSS Output
|
|
jugadu-parchai-sm
|
Small subtle shadow
|
|
jugadu-parchai
|
Default shadow
|
|
jugadu-parchai-md
|
Medium shadow
|
|
jugadu-parchai-lg
|
Large card shadow
|
|
jugadu-parchai-xl
|
Extra large shadow
|
|
jugadu-parchai-2xl
|
2XL deep shadow
|
|
jugadu-parchai-bawaal
|
Intense deep shadow
|
|
jugadu-parchai-bawaal-max
|
Maximum drop shadow
|
|
jugadu-parchai-gayab
|
box-shadow: none
|
|
jugadu-parchai-glow-orange
|
Orange brand glow
|
|
jugadu-parchai-glow-nila
|
Blue glow effect
|
Halka (Opacity)
Scale: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90,
95, 100.
|
Class
|
CSS Output
|
|
jugadu-halka-0
|
opacity: 0
|
|
jugadu-halka-25
|
opacity: 0.25
|
|
jugadu-halka-50
|
opacity: 0.5
|
|
jugadu-halka-75
|
opacity: 0.75
|
|
jugadu-halka-100
|
opacity: 1
|
Cursor
|
Class
|
CSS Output
|
|
jugadu-haath
|
cursor: pointer
|
|
jugadu-na-bhai
|
cursor: not-allowed
|
|
jugadu-text-cursor
|
cursor: text
|
User Select
|
Class
|
CSS Output
|
|
jugadu-select-na-kar
|
user-select: none
|
|
jugadu-select-sab
|
user-select: all
|
Badlaav (Transitions)
|
Class
|
CSS Output
|
|
jugadu-badlaav
|
Transition colors, shadows, transforms
(150ms)
|
|
jugadu-badlaav-all
|
Transition all properties (300ms)
|
|
jugadu-badlaav-rang
|
Transition colors only (200ms)
|
Outline
|
Class
|
CSS Output
|
|
jugadu-outline
|
outline-style: solid
|
|
jugadu-outline-gayab
|
outline: 2px solid transparent
|
Disa (Position Coordinates)
Works with spacing scale.
|
Class
|
CSS Output
|
|
jugadu-disa-top-{n}
|
top: {value}
|
|
jugadu-disa-right-{n}
|
right: {value}
|
|
jugadu-disa-bottom-{n}
|
bottom: {value}
|
|
jugadu-disa-left-{n}
|
left: {value}
|
Upar-Aao (Z-Index)
Accepts any number or arbitrary value.
|
Class
|
CSS Output
|
|
jugadu-upar-aao-10
|
z-index: 10
|
|
jugadu-upar-aao-50
|
z-index: 50
|
|
jugadu-upar-aao-[999]
|
z-index: 999
|