Module Documentation

santycss/
├── dist/
│   ├── santy.css            ← Full bundle (718KB) — all utilities + components + animations
│   ├── santy.min.css        ← Minified full bundle (629KB)
│   ├── santy-core.css       ← Utilities only (598KB)
│   ├── santy-components.css ← Components only (68KB)
│   ├── santy-animations.css ← 120+ animations (53KB)
│   └── santy-email.css      ← Email template CSS (13KB)
├── postcss/
│   └── index.js             ← PostCSS plugin (tree-shaking)
├── lib/
│   ├── purge-core.js        ← Purge API (tree-shaking engine)
│   └── animations.js        ← Animation definitions
├── index.js               ← Main entry — CSS path helpers + purge API
├── santy-jit.js           ← JIT runtime (generates classes on-the-fly)
├── vite-plugin-santycss.js ← Vite plugin
└── purge.js               ← CLI purge tool

<!-- Full minified bundle — recommended for production -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy.min.css">

<!-- Version-pinned (best practice for production) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss@1.7.0/dist/santy.min.css">

<!-- Utilities only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-core.css">

<!-- Components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-components.css">

<!-- Animations -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-animations.css">

<!-- Email module -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-email.css">

<!-- unpkg alternative -->
<link rel="stylesheet" href="https://unpkg.com/santycss/dist/santy.css">

// Minimal dashboard UI — ~50 KB total
import 'santycss/css/reset';
import 'santycss/css/flex';
import 'santycss/css/grid';
import 'santycss/css/spacing';
import 'santycss/css/typography';
import 'santycss/css/colors';
import 'santycss/css/components';  // pre-built UI components

// Add responsive / hover / dark-mode variants if you use them
import 'santycss/css/variants';

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-reset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-flex.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-spacing.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-typography.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss/dist/santy-colors.css">

const santy = require('santycss');

// Absolute paths for webpack / rollup config
santy.reset      // → /path/to/dist/santy-reset.css
santy.flex       // → /path/to/dist/santy-flex.css
santy.spacing    // → /path/to/dist/santy-spacing.css
santy.typography // → /path/to/dist/santy-typography.css
santy.colors     // → /path/to/dist/santy-colors.css
// … and: santy.layout, santy.grid, santy.sizing, santy.borders, santy.effects

<!-- Typing indicator -->
<div class="typing-indicator">
  <span></span><span></span><span></span>
</div>

<!-- Chat bubbles -->
<div class="chat-bubble-user">How many calories in a banana?</div>
<div class="chat-bubble-ai">About 89 calories.</div>

<!-- Tinted badges -->
<span class="badge badge-green">Protein</span>
<span class="badge badge-blue">Carbs</span>
<span class="badge badge-yellow">Fat</span>

<!-- Progress with colour variants -->
<div class="progress">
  <div class="progress-bar progress-bar-green" style="width:70%"></div>
</div>

import 'santycss/css/animations';

<!-- Fade in on page load -->
<div class="animate-fade-in">Appears smoothly</div>

<!-- Staggered entrance -->
<div class="animate-slide-in-from-left animation-delay-0">Item 1</div>
<div class="animate-slide-in-from-left animation-delay-200">Item 2</div>
<div class="animate-slide-in-from-left animation-delay-400">Item 3</div>

<!-- Reduced motion accessibility -->
<div class="motion-safe:animate-bounce motion-reduce:animate-none">
  Bounces only if user hasn't requested reduce-motion
</div>

# 1. Clone or download the plugin folder
# figma-plugin-santycss/ contains: manifest.json, code.js, ui.html

# 2. In Figma Desktop:
#    Plugins → Development → Import plugin from manifest…
#    → select figma-plugin-santycss/manifest.json

# 3. Select any layer on the canvas
#    Plugins → Development → SantyCSS Inspector

figma-plugin-santycss/
├── manifest.json   ← Plugin config (name, API version, entry points)
├── code.js         ← Runs in Figma sandbox — reads node properties via Figma API
├── ui.html         ← Plugin window UI — grouped output, copy buttons, dark mode
└── README.md       ← Install & publish instructions

<!-- Full outer wrapper → max 600px, centered -->
<table class="email-wrapper" role="presentation"><tr><td>
  <table class="email-container" role="presentation">

    <!-- Two-column layout -->
    <tr>
      <td class="email-col-half">Left column</td>
      <td class="email-col-half">Right column</td>
    </tr>

    <!-- Three-column layout -->
    <tr>
      <td class="email-col-third">Col 1</td>
      <td class="email-col-third">Col 2</td>
      <td class="email-col-third">Col 3</td>
    </tr>

  </table>
</td></tr></table>

<!-- Dark header with logo -->
<tr><td class="email-header">
  <img src="logo.png" class="email-logo" alt="Brand" width="140">
</td></tr>

<!-- Light header variant -->
<tr><td class="email-header-light"> ... </td></tr>

<!-- Gradient hero banner -->
<tr><td class="email-hero-gradient">
  <h1 class="email-h1" style="color:#fff;">Welcome aboard! 🎉</h1>
  <p  class="email-p-lead" style="color:rgba(255,255,255,.85);">Let's get started.</p>
</td></tr>

<!-- Footer with legal -->
<tr><td class="email-footer">
  <p class="email-legal">© 2026 Company Inc · 123 Street, City</p>
  <a href="{{unsubscribe_url}}" class="email-unsubscribe">Unsubscribe</a>
</td></tr>

<tr><td class="email-body-wrap">
  <h1 class="email-h1">Main heading</h1>
  <h2 class="email-h2">Section heading</h2>
  <h3 class="email-h3">Sub-heading</h3>
  <p  class="email-p-lead">Large intro paragraph</p>
  <p  class="email-p">Normal body text. <a href="#" class="email-link">Inline link</a></p>
  <p  class="email-muted">Small muted helper text</p>
  <p  class="email-small">Fine print / disclaimer</p>
</td></tr>

<!-- Primary button (blue) -->
<div class="email-btn-center">
  <a href="https://example.com" class="email-btn">Get Started</a>
</div>

<!-- Button variants -->
<a href="#" class="email-btn email-btn-sm">Small button</a>
<a href="#" class="email-btn email-btn-lg">Large button</a>
<a href="#" class="email-btn email-btn-outline">Outline button</a>
<a href="#" class="email-btn email-btn-dark">Dark button</a>
<a href="#" class="email-btn email-btn-success">Confirm order ✓</a>
<a href="#" class="email-btn email-btn-danger">Cancel subscription</a>
<a href="#" class="email-btn email-btn-warning">Action required ⚠</a>

<!-- White card with border -->
<div class="email-card">
  <h3 class="email-h3">Order Summary</h3>
  <p class="email-p">Item × 2 — $49.00</p>
</div>

<!-- Coloured callout banners -->
<div class="email-callout-success">✓ Payment received — thank you!</div>
<div class="email-callout-warning">⚠ Your subscription expires in 3 days.</div>
<div class="email-callout-danger">✕ We couldn't process your payment.</div>

<!-- Bulleted list -->
<ul class="email-list">
  <li>Unlimited projects</li>
  <li>Priority support</li>
</ul>

<!-- Checkmark list (✓ prefix via CSS) -->
<ul class="email-check-list">
  <li>No credit card required</li>
  <li>Cancel any time</li>
  <li>Free 14-day trial</li>
</ul>

<span class="email-badge-blue">Info</span>
<span class="email-badge-green">Active</span>
<span class="email-badge-red">Expired</span>
<span class="email-badge-yellow">Pending</span>
<span class="email-badge-purple">Pro</span>
<span class="email-badge-gray">Draft</span>
<span class="email-badge-new">New</span>

<table class="email-table"><tr>
  <td class="email-cell" style="text-align:center;">
    <div class="email-stat-value">1,284</div>
    <div class="email-stat-label">Page views</div>
  </td>
  <td class="email-cell" style="text-align:center;">
    <div class="email-stat-value">42%</div>
    <div class="email-stat-label">Open rate</div>
  </td>
  <td class="email-cell" style="text-align:center;">
    <div class="email-stat-value">$3.2k</div>
    <div class="email-stat-label">Revenue</div>
  </td>
</tr></table>

<!-- Horizontal rule -->
<div class="email-divider"></div>

<!-- Vertical spacing blocks (px values: 4 8 16 24 32 48 64) -->
<div class="email-spacer-8"></div>
<div class="email-spacer-24"></div>
<div class="email-spacer-48"></div>

<!-- Code block (developer emails) -->
<pre class="email-code">npm install santycss</pre>

<!-- Inline code -->
Use the <code class="email-code-inline">email-btn</code> class for buttons.

<!-- Responsive images -->
<img src="banner.jpg" class="email-img-full" alt="Banner">     <!-- full-width -->
<img src="photo.jpg"  class="email-img-rounded" alt="Photo">  <!-- 8px radius -->
<img src="avatar.jpg" class="email-avatar-md"   alt="Avatar">  <!-- 48px circle -->

<!-- Hidden preview text (shows in inbox before open) -->
<div class="email-preheader">Your invoice is ready — view it now</div>

<!-- Social media row -->
<div class="email-social-wrap">
  <a href="https://twitter.com/yourco" class="email-social-link">
    <img src="twitter-icon.png" width="24" alt="Twitter">
  </a>
  <a href="https://linkedin.com/company/yourco" class="email-social-text-link">LinkedIn</a>
</div>

// postcss.config.js
const santycss = require('santycss/postcss');

module.exports = {
  plugins: [
    santycss({
      content: [
        './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
        './pages/**/*.{js,jsx,ts,tsx}',
      ],
      safelist: ['animate-spin', 'make-hidden'], // never purge these
    }),
  ],
};

// Install
npm install santycss

// app/layout.tsx  (Next.js App Router)
import 'santycss/css';
export default function RootLayout({ children }) {
  return <html><body>{children}</body></html>;
}

// Usage in any component
export default function Card() {
  return (
    <div className="background-white round-corners-16 add-padding-24 add-shadow-md">
      <h2 className="set-text-20 text-bold color-gray-900">Hello</h2>
      <button className="btn btn-primary add-margin-top-16">Click</button>
    </div>
  );
}

// main.js
import { createApp } from 'vue';
import 'santycss/css';
import App from './App.vue';
createApp(App).mount('#app');

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['santycss/dist/santy.css'],
});

<!-- MyComponent.vue -->
<template>
  <div class="make-flex align-center gap-16">
    <button class="btn btn-primary">Save</button>
  </div>
</template>