ChaiCSS

Complete Utility Documentation

Get started

🚀 Quick Start

Add the script, then start writing shorthand utility classes directly in your HTML.

CDN 

<script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css@1"></script>

<div class="chai-p-16 chai-bg-[#111] chai-text-[#f5f5f5] chai-rounded-12">
	Hello ChaiCSS
</div>

🎨 Typography Utilities

Text styling and font utilities. All numeric values convert to REM (÷ 16).

Utility CSS Property Example Converts To
text color chai-text-[#f5f5f5] color: #f5f5f5
fs fontSize chai-fs-16 fontSize: 1rem
align textAlign chai-align-center textAlign: center
weight fontWeight chai-weight-bold fontWeight: bold
leading lineHeight chai-leading-[1.5] lineHeight: 1.5
tracking letterSpacing chai-tracking-[0.05em] letterSpacing: 0.05em
decoration textDecorationLine chai-decoration-underline textDecorationLine: underline
style fontStyle chai-style-italic fontStyle: italic
transform textTransform chai-transform-uppercase textTransform: uppercase
transform textTransform chai-transform-lowercase textTransform: lowercase
transform textTransform chai-transform-capitalize textTransform: capitalize
family fontFamily chai-family-[Arial] fontFamily: Arial

Example: 

<h2 class="chai-fs-26 chai-text-[#f5f5f5] chai-weight-bold">Heading</h2>
<p class="chai-fs-14 chai-text-[#bb4d00] chai-align-center">Text</p>

📏 Sizing Utilities

Width, height, and constraint utilities. Numeric values convert to REM, percentage suffix converts to %.

Utility CSS Property Example Converts To
w width chai-w-100 width: 6.25rem
h height chai-h-100 height: 6.25rem
w (percent) width chai-w-50p width: 50%
h (viewport) height chai-h-100vh height: 100vh
min-w minWidth chai-min-w-200 minWidth: 12.5rem
max-w maxWidth chai-max-w-600 maxWidth: 37.5rem
min-h minHeight chai-min-h-100 minHeight: 6.25rem
max-h maxHeight chai-max-h-[300px] maxHeight: 300px

Example: 

<div class="chai-w-100p chai-h-100vh">Full screen</div>
<img class="chai-w-80 chai-h-80" src="image.jpg" />
<div class="chai-max-w-600">Max width container</div>

📐 Layout Utilities

Display, positioning, overflow, and visibility utilities.

Utility CSS Property Example Converts To
display display chai-display-flex display: flex
pos position chai-pos-absolute position: absolute
top top chai-top-[20px] top: 20px
right right chai-right-0 right: 0
bottom bottom chai-bottom-16 bottom: 1rem
left left chai-left-0 left: 0
z zIndex chai-z-50 zIndex: 50
overflow overflow chai-overflow-hidden overflow: hidden
visibility visibility chai-visibility-visible visibility: visible
overflow-x overflowX chai-overflow-x-auto overflowX: auto
overflow-y overflowY chai-overflow-y-auto overflowY: auto
object objectFit chai-object-cover objectFit: cover

Example: 

<div class="chai-display-flex chai-pos-relative">Flex container</div>
<div class="chai-pos-absolute chai-top-0 chai-left-0 chai-z-10">Positioned</div>

📦 Spacing Utilities

Padding and margin utilities with directional control. All numeric values convert to REM.

Property Utility CSS Property Example Converts To
Padding p padding chai-p-16 padding: 1rem
pt paddingBlockStart chai-pt-8 paddingBlockStart: 0.5rem
pb paddingBlockEnd chai-pb-8 paddingBlockEnd: 0.5rem
px paddingInline chai-px-16 paddingInline: 1rem
py paddingBlock chai-py-12 paddingBlock: 0.75rem
pl paddingInlineStart chai-pl-12 paddingInlineStart: 0.75rem
pr paddingInlineEnd chai-pr-12 paddingInlineEnd: 0.75rem
Margin m margin chai-m-16 margin: 1rem
mt marginBlockStart chai-mt-8 marginBlockStart: 0.5rem
mb marginBlockEnd chai-mb-8 marginBlockEnd: 0.5rem
mx marginInline chai-mx-auto marginInline: auto
my marginBlock chai-my-16 marginBlock: 1rem
ml marginInlineStart chai-ml-12 marginInlineStart: 0.75rem
mr marginInlineEnd chai-mr-12 marginInlineEnd: 0.75rem

Example: 

<div class="chai-p-32">Padding all sides: 2rem</div>
<div class="chai-py-16 chai-px-24">Vertical 1rem, Horizontal 1.5rem</div>
<div class="chai-m-auto">Centered with auto margin</div>

🎨 Background Utilities

Background color utilities with hex color support.

Utility CSS Property Example Converts To
bg backgroundColor chai-bg-[#0a0a0a] backgroundColor: #1a1a1a

Example: 

<div class="chai-bg-[#0a0a0a]">Dark background</div>
<div class="chai-bg-[#bb4d00]">Primary background</div>

🔲 Border Utilities

Border width, color, style, and radius utilities.

Utility CSS Property Example Converts To
bw borderWidth chai-bw-1 borderWidth: 0.0625rem
bc borderColor chai-bc-[#ccc] borderColor: #ccc
bs borderStyle chai-bs-solid borderStyle: solid
rounded borderRadius chai-rounded-8 borderRadius: 0.5rem
rounded (percent) borderRadius chai-rounded-50p borderRadius: 50%
border-collapse borderCollapse chai-border-collapse borderCollapse: collapse

Example: 

<div class="chai-bw-1 chai-bc-[#ccc] chai-bs-solid chai-rounded-8">
  Bordered box
</div>
<div class="chai-rounded-50p">Circle</div>

🔄 Flexbox Utilities

Direction, alignment, sizing, and spacing utilities for flexbox layouts.

Category Utility CSS Property Example Value
Direction & Wrapping flex-row flexDirection chai-flex-row row
flex-col flexDirection chai-flex-col column
flex-row flexDirection chai-flex-row-reverse row-reverse
flex-col flexDirection chai-flex-col-reverse column-reverse
wrap flexWrap chai-wrap-wrap wrap
Alignment justify justifyContent chai-justify-center center
items alignItems chai-items-center center
self alignSelf chai-self-end end
Sizing flex flex chai-flex-1 1
grow flexGrow chai-grow-1 1
shrink flexShrink chai-shrink-0 0
gap gap chai-gap-16 1rem

Examples: 

<!-- Centered flex row -->
<div class="chai-display-flex chai-flex-row chai-gap-16 chai-justify-center chai-items-center">
  <div class="chai-flex-1">Item 1</div>
  <div class="chai-flex-1">Item 2</div>
</div>

<!-- Flex column -->
<div class="chai-display-flex chai-flex-col chai-gap-8">
  <div>Header</div>
  <div>Content</div>
  <div>Footer</div>
</div>

🎯 Value Formatting System

The Chai engine automatically converts values based on their format.

🔢 Numeric Values → REM Conversion

Numeric values divide by 16 (base scale).

Format Example Calculation Result
Numeric chai-p-32 32 ÷ 16 padding: 2rem
Numeric chai-fs-24 24 ÷ 16 fontSize: 1.5rem
Numeric chai-gap-16 16 ÷ 16 gap: 1rem

📊 Percentage Suffix (p)

Values ending with 'p' convert to percentage.

Format Example Result
Percentage chai-w-50p width: 50%
Percentage chai-h-100p height: 100%
Percentage chai-rounded-50p borderRadius: 50%

📱 Viewport Units (vh/vw)

Viewport units pass through unchanged.

Format Example Result
Viewport chai-h-100vh height: 100vh
Viewport chai-w-50vw width: 50vw

🎨 Hex Colors (brackets)

Hex colors in brackets get brackets stripped.

Format Example Result
Hex Color chai-bg-[#0a0a0a] backgroundColor: #1a1a1a
Hex Color chai-text-[#f5f5f5] color: #f5f5f5
Hex Color chai-bc-[#ccc] borderColor: #ccc

📦 Custom Values (brackets)

Any custom value in brackets passes through as-is with brackets stripped.

Format Example Result
Custom chai-min-w-[300px] minWidth: 300px
Custom chai-p-[1.5em] padding: 1.5em

🏷️ String Keywords

String values pass through unchanged.

Format Example Result
Keyword chai-display-flex display: flex
Keyword chai-items-center alignItems: center
Keyword chai-m-auto margin: auto

📊 REM Scale Reference

All numeric values use 16px base scale with automatic REM conversion.

Numeric Value REM Unit Pixels Example Usage
4 0.25rem 4px chai-gap-4
8 0.5rem 8px chai-p-8
12 0.75rem 12px chai-pl-12
16 1rem 16px chai-fs-16
24 1.5rem 24px chai-m-24
32 2rem 32px chai-p-32
48 3rem 48px chai-gap-48
64 4rem 64px chai-p-64
80 5rem 80px chai-w-80
96 6rem 96px chai-h-96
100 6.25rem 100px chai-w-100

🚀 Live Rendered Examples

Example 1: Card Component

Card Title

This is a card component built entirely with Chai utilities, showing proper spacing, typography, and layout.

Code: 

<div class="chai-bg-[#111] chai-p-32 chai-rounded-16 chai-display-flex chai-flex-col chai-gap-16">
  <h2 class="chai-fs-24 chai-weight-bold chai-text-[#f5f5f5] chai-m-0">
    Card Title
  </h2>
  <p class="chai-fs-14 chai-text-[#bb4d00] chai-m-0">
    Card description
  </p>
  <button class="chai-bg-[#000] chai-text-white chai-p-12 chai-rounded-12">
    Action Button
  </button>
</div>

Example 2: Two-Column Layout

Left Column

Content for the left column with proper spacing and typography.

Right Column

Content for the right column with matching layout and styling.

Code: 

<div class="chai-display-flex chai-flex-row chai-gap-24">
  <div class="chai-w-300 chai-bg-[#111] chai-p-24 chai-rounded-12">
    Left column
  </div>
  <div class="chai-w-300 chai-bg-[#111] chai-p-24 chai-rounded-12">
    Right column
  </div>
</div>

Example 3: Typography Showcase

Heading Large (fs-48)

Heading Medium (fs-32)

Heading Small (fs-24)

This is a regular paragraph with font size 16. It has proper line height and spacing for readability.

This is a smaller paragraph with font size 14, often used for secondary text or descriptions.

This is small text with font size 12, perfect for captions or metadata.

Bold Text Italic Text Underlined Text Uppercase Text

Code: 

<h1 class="chai-fs-48 chai-weight-bold">Heading Large</h1>
<p class="chai-fs-16 chai-text-[#f5f5f5]">Regular paragraph</p>
<span class="chai-weight-bold chai-style-italic chai-decoration-underline">
  Styled text
</span>

Example 4: Flexbox Layout & Alignment

justify-center, items-center:

Item 1
Item 2
Item 3

justify-between, items-center:

Left
Center
Right

flex-col, gap-8:

Item 1
Item 2
Item 3

Code: 

<div class="chai-display-flex chai-justify-center chai-items-center chai-gap-12">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Example 5: Sizing & Dimensions

60×60

Small

80×80

Medium

100×100

Large

50%×80

Responsive

Code: 

<div class="chai-w-80 chai-h-80 chai-bg-[#d4a574] chai-rounded-8">
  80×80 Box
</div>

<div class="chai-w-50p chai-h-80 chai-bg-[#bb4d00]">
  Responsive width
</div>

✨ Summary

📊 Statistics

• 70+ Total Utilities • 7 Categories • 40+ CSS Properties

🎨 Categories

Typography • Sizing • Layout • Spacing • Background • Border • Flexbox

🚀 Key Features

✅ Auto REM Scaling ✅ Smart Value Parsing ✅ Hex Color Support ✅ Responsive-First