🎨 CSS Documentation

Complete Melt CSS reference

Getting Started Installation Themes Layout Components Utilities Responsive Utilities

Getting Started

What is Melt CSS?

<ul>
  <li>Design tokens via <code>:root</code> + <code>[theme="*"]</code></li>
  <li>7 built-in themes (default, dark, royal, bootstrap, material, apple, glass)</li>
  <li>Practical utilities (spacing, layout, display, effects, transforms, filters, etc.)</li>
  <li>Lightweight components (buttons, forms, cards, alerts, tables)</li>
  <li>Responsive helpers (hide/show, grid collapse, mobile menu)</li>
</ul>

Design tokens via :root + [theme="*"]
7 built-in themes (default, dark, royal, bootstrap, material, apple, glass)
Practical utilities (spacing, layout, display, effects, transforms, filters, etc.)
Lightweight components (buttons, forms, cards, alerts, tables)
Responsive helpers (hide/show, grid collapse, mobile menu)

Class Naming System

<ul>
  <li><code>m-*</code>, <code>p-*</code> for spacing (0..5)</li>
  <li><code>text-*</code> for alignment + size + color</li>
  <li><code>rounded-*</code> for radius; directional: <code>rounded-top-2</code>, etc.</li>
  <li><code>d-*</code> for display; responsive helpers: <code>hide-sm</code>, <code>d-md-none</code>, etc.</li>
  <li><code>flex</code> + <code>items-*</code>, <code>justify-*</code> for layout</li>
  <li><code>grid grid-*</code> for N columns (2..6)</li>
  <li>Effects: <code>shadow-*</code>, <code>hv-*</code>, <code>f-*</code>, <code>rotate-*</code>, <code>scale-*</code></li>
</ul>

m-*, p-* for spacing (0..5)
text-* for alignment + size + color
rounded-* for radius; directional: rounded-top-2, etc.
d-* for display; responsive helpers: hide-sm, d-md-none, etc.
flex + items-*, justify-* for layout
grid grid-* for N columns (2..6)
Effects: shadow-*, hv-*, f-*, rotate-*, scale-*

Installation

CDN

<link rel="stylesheet" href="https://expo.aiedrow.co.in/Melt/assets/melt.css">

Local

<link rel="stylesheet" href="assets/melt.css">

Themes

Usage

<body theme="dark">
  <!-- theme options: default, dark, royal, bootstrap, material, apple, glass -->
</body>

Available Themes

<div class="grid grid-3">
  <div class="card" theme="default"><div class="font-bold mb-1">default</div><button class="btn btn-sm">Primary</button></div>
  <div class="card" theme="dark"><div class="font-bold mb-1">dark</div><button class="btn btn-sm">Primary</button></div>
  <div class="card" theme="royal"><div class="font-bold mb-1">royal</div><button class="btn btn-sm">Primary</button></div>
  <div class="card" theme="bootstrap"><div class="font-bold mb-1">bootstrap</div><button class="btn btn-sm">Primary</button></div>
  <div class="card" theme="material"><div class="font-bold mb-1">material</div><button class="btn btn-sm">Primary</button></div>
  <div class="card" theme="apple"><div class="font-bold mb-1">apple</div><button class="btn btn-sm">Primary</button></div>
  <div class="card glass" theme="glass"><div class="font-bold mb-1">glass</div><button class="btn btn-sm">Primary</button></div>
</div>

default

dark

royal

bootstrap

material

apple

glass

Theme Switcher JS

<script>
// Switch body theme at runtime
function setTheme(name){ document.body.setAttribute("theme", name); }
</script>
<div class="btn-group">
  <button class="btn btn-sm" onclick="setTheme('default')">default</button>
  <button class="btn btn-sm" onclick="setTheme('dark')">dark</button>
  <button class="btn btn-sm" onclick="setTheme('royal')">royal</button>
  <button class="btn btn-sm" onclick="setTheme('bootstrap')">bootstrap</button>
  <button class="btn btn-sm" onclick="setTheme('material')">material</button>
  <button class="btn btn-sm" onclick="setTheme('apple')">apple</button>
  <button class="btn btn-sm" onclick="setTheme('glass')">glass</button>
</div>

Custom

<a href="creator.php" class="btn">Build Custom Theme</a>

Build Custom Theme

Layout

Container

<div class="container bg-surface p-2 rounded-2 mb-2">.container</div>
<div class="container-sm bg-surface p-2 rounded-2 mb-2">.container-sm</div>
<div class="container-fluid bg-surface p-2 rounded-2">.container-fluid</div>

.container

.container-sm

.container-fluid

Grid

<div class="grid grid-3">
  <div class="card text-center">Col 1</div>
  <div class="card text-center">Col 2</div>
  <div class="card text-center">Col 3</div>
</div>

Col 1

Col 2

Col 3

Flex

<div class="flex items-center justify-between bg-surface p-2 rounded-2">
  <div>Left</div>
  <div>Right</div>
</div>

Left

Right

Components

Buttons

<div class="flex flex-wrap items-center gap-1">
  <button class="btn">Default</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-danger">Danger</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-outline">Outline</button>
</div>
<div class="flex items-center gap-1 mt-2">
  <button class="btn btn-sm">Small</button>
  <button class="btn">Base</button>
  <button class="btn btn-lg">Large</button>
  <button class="btn btn-xl">XL</button>
</div>

Button Groups

<div class="btn-group">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

Forms

<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-item" placeholder="email@example.com">
</div>
<div class="form-group">
  <label class="form-label">Select</label>
  <select class="form-item">
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>
<div class="form-group">
  <label class="form-label">Textarea</label>
  <textarea class="form-item" placeholder="Write something..."></textarea>
</div>
<div class="flex gap-1">
  <input type="text" class="form-item form-item-sm" placeholder="Small" />
  <input type="text" class="form-item form-item-lg" placeholder="Large" />
  <input type="text" class="form-item form-item-xl" placeholder="XL" />
</div>

Select

Textarea

Cards

<div class="grid grid-3">
  <div class="card">
    <h3 class="card-header">Card Title</h3>
    <p class="card-body">Card content goes here</p>
    <div class="card-footer">
      <button class="btn btn-sm">Action</button>
    </div>
  </div>
  <div class="card hover-lift">
    <h3 class="card-header">Hover Lift</h3>
    <p class="card-body">Hover to see elevation</p>
  </div>
  <div class="card glass">
    <h3 class="card-header">Glass</h3>
    <p class="card-body">Glassmorphism example</p>
  </div>
</div>

Card Title

Card content goes here

Hover Lift

Hover to see elevation

Glass

Glassmorphism example

Alerts

<div class="alert alert-success">Success message</div>
<div class="alert alert-danger">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

Success message

Error message

Warning message

Info message

Tables

<table class="table-sm">
  <thead>
    <tr><th>Name</th><th>Email</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>John Doe</td><td>john@example.com</td><td>Admin</td></tr>
    <tr><td>Jane Roe</td><td>jane@example.com</td><td>User</td></tr>
  </tbody>
</table>
<table class="table-lg mt-2">
  <thead>
    <tr><th>Product</th><th>Price</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td>$19</td><td>In Stock</td></tr>
    <tr><td>Gadget</td><td>$49</td><td>Backorder</td></tr>
  </tbody>
</table>

Name	Email	Role
John Doe	john@example.com	Admin
Jane Roe	jane@example.com	User

Product	Price	Status
Widget	$19	In Stock
Gadget	$49	Backorder

Utilities

Spacing (Margin)

<div class="m-3 bg-surface p-1 rounded-1">m-3</div>
<div class="mt-4 mb-2 bg-surface p-1 rounded-1">mt-4 mb-2</div>
<div class="mx-auto w-50 bg-surface p-1 rounded-1 text-center">mx-auto</div>

m-3

mt-4 mb-2

mx-auto

Spacing (Padding)

<div class="p-4 bg-surface rounded-1 mb-1">p-4</div>
<div class="pt-3 pb-2 bg-surface rounded-1 mb-1">pt-3 pb-2</div>
<div class="px-3 py-2 bg-surface rounded-1">px-3 py-2</div>

p-4

pt-3 pb-2

px-3 py-2

Typography

<p class="text-left">Left aligned</p>
<p class="text-center">Center aligned</p>
<p class="text-right">Right aligned</p>
<p class="text-primary">Primary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-muted">Muted</p>
<p class="text-xs">xs</p><p class="text-sm">sm</p><p class="text-base">base</p><p class="text-lg">lg</p><p class="text-xl">xl</p><p class="text-2xl">2xl</p>
<p class="font-light">Light</p><p class="font-normal">Normal</p><p class="font-semibold">Semibold</p><p class="font-bold">Bold</p>

Left aligned

Center aligned

Right aligned

Primary

Success

Danger

Muted

base

2xl

Light

Normal

Semibold

Bold

Borders & Radius

<div class="grid grid-3">
  <div class="border p-1 rounded-0">border</div>
  <div class="border border-primary p-1 rounded-2">border-primary</div>
  <div class="border border-success p-1 rounded-3">border-success</div>
</div>
<div class="grid grid-3 mt-2">
  <div class="border p-1 rounded-1">rounded-1</div>
  <div class="border p-1 rounded-full">rounded-full</div>
  <div class="border p-1 rounded-top-2">rounded-top-2</div>
</div>

border

border-primary

border-success

rounded-1

rounded-full

rounded-top-2

Display & Visibility

<div class="d-block">.d-block</div>
<span class="d-inline bg-surface p-1 rounded-1">.d-inline</span>
<div class="d-flex gap-1 mt-1"><span>Flex</span><span>Gap</span></div>
<div class="d-grid mt-1" style="grid-template-columns:repeat(3,1fr);gap:0.5rem;"><div class="bg-surface p-1 rounded-1">1</div><div class="bg-surface p-1 rounded-1">2</div><div class="bg-surface p-1 rounded-1">3</div></div>
<div class="d-none mt-1">Hidden</div>

.d-block

.d-inline

FlexGap

Width / Height

<div class="w-25 bg-surface p-1 rounded-1 mb-1">w-25</div>
<div class="w-50 bg-surface p-1 rounded-1 mb-1">w-50</div>
<div class="w-100 bg-surface p-1 rounded-1 mb-1">w-100</div>
<div class="vh-100 bg-surface p-1 rounded-1">vh-100 (demo area)</div>

w-25

w-50

w-100

vh-100 (demo area)

Positioning & Z-Index

<div class="position-relative bg-surface p-2 rounded-2" style="height:100px;">
  <div class="position-absolute top-0 right-0 z-100 bg-primary p-1 rounded-1">absolute z-100</div>
  <div class="position-sticky top-0 bg-secondary p-1 rounded-1 mt-1">sticky top-0</div>
</div>

absolute z-100

sticky top-0

Opacity / Cursor / Overflow

<div class="opacity-50 bg-surface p-1 rounded-1 mb-1">opacity-50</div>
<div class="cursor-pointer bg-surface p-1 rounded-1 mb-1">cursor-pointer</div>
<div class="overflow-auto bg-surface p-1 rounded-1" style="max-height:60px">
  Overflow auto<br/>Line 2<br/>Line 3<br/>Line 4<br/>Line 5
</div>

opacity-50

cursor-pointer

Overflow auto
Line 2
Line 3
Line 4
Line 5

Scrollbar

<div class="scrollbar-5 overflow-auto bg-surface p-1 rounded-1" style="max-height:80px">
  Custom thin scrollbar<br/>Line 2<br/>Line 3<br/>Line 4<br/>Line 5<br/>Line 6<br/>Line 7
</div>

Custom thin scrollbar
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7

Filters & Hover

<img src="https://picsum.photos/200/100" class="f-grayscale rounded-2 mr-2" alt="grayscale sample" />
<img src="https://picsum.photos/201/100" class="hv-f-grayscale rounded-2 mr-2" alt="hover grayscale" />
<div class="hv-scale bg-surface p-2 inline-block rounded-2 mr-2">hv-scale</div>
<div class="hv-opacity bg-surface p-2 inline-block rounded-2">hv-opacity</div>

hv-scale

hv-opacity

Transforms

<div class="grid grid-3 items-center">
  <div class="scale-95 bg-surface p-2 rounded-2 text-center">scale-95</div>
  <div class="scale-110 bg-surface p-2 rounded-2 text-center">scale-110</div>
  <div class="rotate-90 bg-surface p-2 rounded-2 text-center">rotate-90</div>
</div>

scale-95

scale-110

rotate-90

Text Truncation & Clamp

<div class="truncate bg-surface p-1 rounded-1" style="max-width:200px;">
  This is a very long single-line text that will be truncated with an ellipsis.
</div>
<p class="line-clamp-2 bg-surface p-1 rounded-1" style="max-width:260px;">
  This is a long paragraph that will be clamped to two lines, demonstrating the line clamp utility working with overflow hidden and display -webkit-box tricks for preview.
</p>

This is a very long single-line text that will be truncated with an ellipsis.

This is a long paragraph that will be clamped to two lines, demonstrating the line clamp utility working with overflow hidden and display -webkit-box tricks for preview.

Placeholder Colors

<input class="form-item placeholder-red mb-1" placeholder="Red placeholder" />
<input class="form-item placeholder-purple placeholder-opacity-30" placeholder="Purple @ 30%" />

Transitions

<button class="btn hover-lift transition-all">Hover Lift</button>
<button class="btn btn-outline ml-1 transition-none">No Transition</button>

Backdrop / Glass

<div class="card glass p-2">
  <div class="font-bold mb-1">Glass Card</div>
  <p class="text-muted">Uses backdrop-filter and translucency.</p>
</div>

Glass Card

Uses backdrop-filter and translucency.

Responsive Utilities

Visibility

<div class="hide-sm bg-surface p-1 rounded-1 mb-1">Hidden on small (&lt;=576px)</div>
<div class="d-md-none bg-surface p-1 rounded-1 mb-1">Hidden on medium (577–768px)</div>
<div class="d-none d-md-block bg-surface p-1 rounded-1">Shown on medium+</div>

Hidden on small (<=576px)

Hidden on medium (577–768px)

Shown on medium+

Layout Helpers

<div class="flex flex-sm-col bg-surface p-2 rounded-2">
  <div class="mb-1">Item A</div>
  <div>Item B</div>
</div>
<div class="grid grid-3 grid-sm-1 mt-2">
  <div class="card">1</div><div class="card">2</div><div class="card">3</div>
</div>

Item A

Item B

Mobile Menu Pattern

<header class="p-1">
  <div class="container flex items-center justify-between">
    <div class="font-bold">Brand</div>
    <button class="mobile-toggle" onclick="document.querySelector('header menu').classList.toggle('mobile-active')">&#9776;</button>
    <menu>
      <a href="#">Home</a>
      <a href="#">Docs</a>
      <a href="#">About</a>
    </menu>
  </div>
</header>

Brand

Home Docs About

CSS Variables

/* Palette & Typography */
--font-sans, --font-mono
--white, --black
--gray-50, --gray-100, --gray-200, --gray-300, --gray-400, --gray-500, --gray-600, --gray-700, --gray-800, --gray-900
--red, --green, --blue, --yellow, --purple, --pink, --orange
--font-size, --font-weight, --font-weight-medium, --font-weight-bold

/* Surfaces */
--bg, --surface, --surface-elevated

/* Text & Borders */
--text, --text-muted, --text-light
--border, --border-hover

/* Brand & State */
--primary, --primary-hover, --primary-light
--secondary, --secondary-hover
--success, --danger, --warning, --info

/* Buttons & Inputs */
--btn-padding, --btn-padding-sm, --btn-padding-lg, --btn-padding-xl
--input-bg, --input-border, --input-focus-border
--input-padding, --input-shadow-focus

/* Radius & Shadows */
--radius, --radius-sm, --radius-md, --radius-lg, --radius-xl, --radius-full
--shadow-sm, --shadow, --shadow-lg, --shadow-xl

/* Motion */
--transition
--btn-transform
--card-hover-shadow

/* Usage */
.custom {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
}

This uses var(--primary) + --radius