@chandan632/leaf-css

v1.2.0

Published

10 days ago

A lightweight utility-first CSS engine

0High
0Medium
0Low

chandan632

css utility tailwind framework leaf-css

🍃 leaf-css

A lightweight utility-first CSS engine for the browser.
Write leaf-* class names — styles get injected automatically. No build step. No config. Just drop in a script tag.

Live Demo · npm · CDN

✨ What is leaf-css?

leaf-css scans your DOM for leaf-* class names and dynamically injects a real stylesheet into your page — similar to how Tailwind works, but with zero build tooling required.

<!-- This is all you write -->
<div class="leaf-flex leaf-p-4 leaf-bg-blue leaf-rounded-lg leaf-text-white">
  Hello leaf-css!
</div>

<!-- leaf-css automatically injects into <head> -->
<style id="leaf-css-engine">
  .leaf-flex {
    display: flex;
  }
  .leaf-p-4 {
    padding: 16px;
  }
  .leaf-bg-blue {
    background-color: #3b82f6;
  }
  .leaf-rounded-lg {
    border-radius: 8px;
  }
  .leaf-text-white {
    color: #ffffff;
  }
</style>

🚀 Quick Start

Option 1 — CDN (recommended, no install)

<script src="https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js"></script>

Drop this in your <head> and start using leaf-* classes immediately.

Option 2 — npm

npm install @chandan632/leaf-css

import "@chandan632/leaf-css";

Option 3 — Configure before loading (optional theming)

<script>
  window.__leafConfig = {
    colors: {
      primary: "#6366f1",
      secondary: "#8b5cf6",
      brand: "#ff6b6b",
      success: "#10b981",
      warning: "#f59e0b",
      danger: "#ef4444",
    },
    extend: {
      spacing: { 13: "52px", 15: "60px" },
      fontSizes: { hero: "72px", tiny: "10px" },
    },
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js"></script>

🎨 Utilities

Spacing

| Class | CSS Output | | -------------- | ----------------------------------------- | | leaf-p-4 | padding: 16px | | leaf-px-2 | padding-left: 8px; padding-right: 8px | | leaf-py-3 | padding-top: 12px; padding-bottom: 12px | | leaf-mt-4 | margin-top: 16px | | leaf-mx-auto | margin-left: auto; margin-right: auto |

Colors

Full palette includes: red orange yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose amber — each with light-*, dark-*, and numeric *-100 through *-900 variants. Plus gray, slate, and zinc scales.

| Class | CSS Output | | -------------------- | --------------------------- | | leaf-bg-blue | background-color: #3b82f6 | | leaf-bg-teal | background-color: #14b8a6 | | leaf-bg-indigo | background-color: #6366f1 | | leaf-bg-rose | background-color: #f43f5e | | leaf-bg-light-blue | background-color: #7dd3fc | | leaf-bg-dark-blue | background-color: #1d4ed8 | | leaf-bg-blue-500 | background-color: #3b82f6 | | leaf-bg-green-300 | background-color: #86efac | | leaf-text-gray-500 | color: #6b7280 |

Typography

| Class | CSS Output | | ---------------------- | ---------------------------- | | leaf-text-xs | font-size: 12px | | leaf-text-xl | font-size: 20px | | leaf-text-5xl | font-size: 48px | | leaf-font-bold | font-weight: 700 | | leaf-font-semibold | font-weight: 600 | | leaf-italic | font-style: italic | | leaf-uppercase | text-transform: uppercase | | leaf-underline | text-decoration: underline | | leaf-tracking-wide | letter-spacing: 0.025em | | leaf-leading-relaxed | line-height: 1.625 |

Borders & Radius

| Class | CSS Output | | -------------------- | ---------------------------------------- | | leaf-border | border: 1px solid | | leaf-border-2 | border-width: 2px; border-style: solid | | leaf-border-dashed | border-style: dashed | | leaf-border-dotted | border-style: dotted | | leaf-rounded-lg | border-radius: 8px | | leaf-rounded-full | border-radius: 9999px |

Layout

| Class | CSS Output | | ---------------------- | -------------------------------------------------- | | leaf-flex | display: flex | | leaf-grid | display: grid | | leaf-hidden | display: none | | leaf-items-center | align-items: center | | leaf-justify-between | justify-content: space-between | | leaf-grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) | | leaf-col-span-2 | grid-column: span 2 / span 2 | | leaf-col-span-full | grid-column: 1 / -1 | | leaf-gap-4 | gap: 16px | | leaf-w-full | width: 100% | | leaf-h-screen | height: 100vh |

Effects

| Class | CSS Output | | --------------------- | ----------------------------------- | | leaf-shadow-sm | box-shadow: 0 1px 2px ... | | leaf-shadow-lg | box-shadow: 0 10px 15px ... | | leaf-opacity-50 | opacity: 0.5 | | leaf-cursor-pointer | cursor: pointer | | leaf-transition | transition: all 150ms ease-in-out | | leaf-select-none | user-select: none |

Animations & Transforms

| Class | CSS Output | | ---------------------------- | ----------------------------- | | leaf-animate-spin | spinning loader | | leaf-animate-pulse | skeleton/pulse effect | | leaf-animate-bounce | bouncing element | | leaf-animate-fade-in | fade in on load | | leaf-animate-slide-in-up | slide up on load | | leaf-animate-slide-in-left | slide in from left | | leaf-animate-zoom-in | zoom in on load | | leaf-animate-wiggle | wiggle attention grabber | | leaf-scale-110 | transform: scale(1.1) | | leaf-rotate-45 | transform: rotate(45deg) | | leaf-translate-x-4 | transform: translateX(16px) | | leaf-duration-300 | transition-duration: 300ms |

Gradients

| Class | CSS Output | | ------------------------ | --------------------------------------- | | leaf-bg-gradient-to-r | linear-gradient(to right, ...) | | leaf-bg-gradient-to-br | linear-gradient(to bottom right, ...) | | leaf-from-blue | sets gradient start color | | leaf-via-purple | sets gradient middle color | | leaf-to-pink | sets gradient end color |

<!-- Two color gradient -->
<div class="leaf-bg-gradient-to-r leaf-from-blue leaf-to-purple">...</div>

<!-- Three color gradient -->
<div class="leaf-bg-gradient-to-r leaf-from-red leaf-via-yellow leaf-to-green">
  ...
</div>

<!-- Gradient text -->
<h1
  class="leaf-bg-gradient-to-r leaf-from-primary leaf-to-secondary"
  style="-webkit-background-clip:text; -webkit-text-fill-color:transparent"
>
  Gradient Text
</h1>

🌙 Dark Mode

Automatically follows system preference. Toggle manually with the dark class on <html>.

<div
  class="leaf-bg-white leaf-dark-bg-gray-900 leaf-text-black leaf-dark-text-white"
>
  Adapts to system theme automatically
</div>

// Manual toggle
document.documentElement.classList.toggle("dark");

📱 Responsive Breakpoints

leaf-sm-*   → min-width: 640px
leaf-md-*   → min-width: 768px
leaf-lg-*   → min-width: 1024px
leaf-xl-*   → min-width: 1280px
leaf-2xl-*  → min-width: 1536px

<!-- Responsive text size -->
<p class="leaf-text-sm leaf-md-text-xl leaf-lg-text-3xl">Responsive text</p>

<!-- Responsive layout -->
<div class="leaf-flex leaf-flex-col leaf-md-flex-row leaf-gap-4">
  Stacked on mobile, row on tablet+
</div>

<!-- Responsive grid -->
<div class="leaf-grid leaf-grid-cols-1 leaf-md-grid-cols-2 leaf-lg-grid-cols-4">
  ...
</div>

🎯 Pseudo-classes

<!-- Hover -->
<button class="leaf-bg-blue leaf-hover-bg-dark-blue leaf-text-white">
  Hover me
</button>

<!-- Focus -->
<input class="leaf-border leaf-focus-border-primary" placeholder="Focus me" />

<!-- Active -->
<button class="leaf-bg-green leaf-active-bg-dark-green">Hold to click</button>

<!-- Combined with responsive -->
<button class="leaf-bg-blue leaf-md-hover-bg-dark-blue">
  Hover only on md+
</button>

Supported: hover · focus · active · disabled · visited · checked · first-child · last-child · focus-within · focus-visible

🔢 Arbitrary Values

Pass any CSS value directly using bracket syntax:

<div class="leaf-p-[30px]">custom padding</div>
<div class="leaf-bg-[#ff6b6b]">custom hex color</div>
<div class="leaf-text-[#9333ea]">custom text color</div>
<div class="leaf-w-[320px]">fixed width</div>
<div class="leaf-w-[calc(100%-40px)]">calc width</div>
<div class="leaf-h-[50vh]">viewport height</div>

⚙️ configure()

Extend the default palette with your own design tokens. Fully optional — defaults work out of the box without any configuration.

<!-- Set BEFORE loading leaf.min.js -->
<script>
  window.__leafConfig = {
    colors: {
      primary: "#6366f1",
      "primary-dark": "#4f46e5",
      "primary-light": "#a5b4fc",
      secondary: "#8b5cf6",
      brand: "#ff6b6b",
      success: "#10b981",
      warning: "#f59e0b",
      danger: "#ef4444",
    },
    extend: {
      spacing: { 13: "52px", 15: "60px", 18: "72px" },
      fontSizes: { hero: "72px", tiny: "10px" },
    },
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/@chandan632/leaf-css/dist/leaf.min.js"></script>

Now use your tokens as classes anywhere on the page:

<div class="leaf-bg-primary leaf-hover-bg-primary-dark leaf-text-white">
  Uses your custom primary color
</div>
<p class="leaf-text-hero leaf-font-extrabold leaf-text-primary">
  Uses your custom font size
</p>

| configure() option | What it does | | ------------------ | ------------------------------------------------- | | colors | Adds new color names to the palette | | extend.colors | Adds colors without replacing built-ins | | extend.spacing | Adds custom spacing keys e.g. leaf-p-13 | | extend.fontSizes | Adds custom font size names e.g. leaf-text-hero | | spacing.base | Changes 1 unit from 4px to any value | | debug | Logs every class resolution to console |

🛠️ How It Works

You add leaf-* classes to any HTML element
leaf-css scans the DOM on page load
It parses each class name and resolves it to a CSS rule
Rules are injected into a <style id="leaf-css-engine"> tag in <head>
A MutationObserver watches for dynamically added elements — works with React, Vue, and any dynamic content

📦 Package Info

| | | | ----------- | ------------------------------------------------------------------------------ | | npm | @chandan632/leaf-css | | CDN | jsDelivr | | Demo | chandan632.github.io/leaf-css | | License | MIT |