santycss

SantyCSS

Utility-first CSS with plain-English class names. No build step required.

Class names say what they do: add-padding-24 instead of p-6. You can read the markup without a cheat sheet, and so can AI tools.

📖 Docs · 🔎 Class reference · 🎮 Playground · 🧩 Templates · 📝 Changelog · 🤝 Contributing

Latest releases: v2.9.3 – v2.9.4

• The icon stylesheet now ships on npm and the CDN (santycss/css/icons).
• Prettier plugin sorts class lists automatically (santycss/prettier).
• npx santycss migrate --from=bootstrap converts Bootstrap 5 markup.

Full changelog →

Quick start

CDN: paste this into <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss@2/dist/santy-start.css">

npm:

npm i santycss

import 'santycss/css/start';

Use it:

<div class="make-flex align-center justify-between gap-16 add-padding-24 background-white round-corners-12 add-shadow-md">
  <h3 class="set-text-20 text-bold color-gray-900">Pro plan</h3>
  <button class="make-button style-primary size-large shape-pill on-hover:scale-105 transition-all">
    Upgrade
  </button>
</div>

That's it. npx santycss init scaffolds a starter page.

The portfolio template, built with SantyCSS. More in the gallery.

The same card in three frameworks

<!-- Tailwind -->
<div class="flex items-center gap-4 p-6 bg-white rounded-xl shadow-md hover:scale-105 transition">
<!-- Bootstrap -->
<div class="d-flex align-items-center gap-3 p-4 bg-white rounded-3 shadow">
<!-- SantyCSS -->
<div class="make-flex align-center gap-16 add-padding-24 background-white round-corners-12 add-shadow-md on-hover:scale-105 transition-all">

Numbers are pixels (gap-16 = 16px), so there's no spacing scale to memorise.

What's included

• Utilities. Layout, spacing, typography, 20 colour families, borders, shadows, transforms. Responsive, state, dark:, :has(), ARIA and RTL variants.
• Components. Buttons, cards, modals, drawers, tabs, toasts, data tables and more: make-button style-success size-large shape-pill.
• santy.js. A dependency-free behaviour layer. data-santy-toggle="modal" gives you focus trapping, Esc to close, scroll lock and ARIA wiring.
• Framework adapters. Custom elements (<santy-modal>), React hooks (santycss/react), Vue composables (santycss/vue).
• Icons. 2,100+ SVG icons as CSS classes: <span class="icon icon-house"></span>. Browse them →
• Animations. 120+, including scroll-triggered effects and creature animations (animate-butterfly). See them →
• Themes. Semantic tokens (background-surface, color-text) that flip with data-theme="dark", plus 5 prebuilt themes.
• Config and plugins. santy.config.json for colours, spacing, breakpoints and a prefix; a plugin API; @apply via santycss/postcss.
• Migrators. npx santycss migrate converts Tailwind; add --from=bootstrap for Bootstrap 5.
• Tooling. Prettier class sorting (santycss/prettier), a VS Code extension and a Figma plugin.

How it compares

Trade-offs

• Longer class names mean larger HTML. Gzip removes most of the difference, but the source is wordier.
• The full bundles are large. Use santy-start.css or santy-core.css, or purge (see below).
• Choose Tailwind if your team knows it, you rely on its ecosystem, or you need arbitrary values like w-[37px].
• Choose Bootstrap if you want its Sass pipeline and long track record.

Install options

<!-- Drop-in: base utilities + components -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss@2/dist/santy-start.css">
<!-- Extended variants: xl:, peer-*, group-*, print:, motion-*, RTL -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss@2/dist/santy-variants.css">
<!-- Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/santycss@2/dist/santy-icons.css">
<!-- Behaviour layer -->
<script src="https://cdn.jsdelivr.net/npm/santycss@2/dist/santy.js" defer></script>

With npm: import 'santycss/css' (everything), 'santycss/css/core', 'santycss/css/icons', and so on. PostCSS, Vite and every module import are in the docs.

Sizes

Purge to the classes you use:

npx santycss purge --input=src --css=node_modules/santycss/dist/santy.min.css --out=dist/santy.css

Naming at a glance

Class count. There are 5,100+ base classes. With every responsive, state and dark variant included the classmap lists about 22,600 class names.

Deprecated names

Older docs used these spellings. Use the current names in new code.

bg-surface, text-primary and text-muted still work. The others were documented but never shipped; npx santycss migrate now outputs the current names.

AI integration

• santycss.context.md is a ready-made system prompt. Paste it into your AI tool and it writes SantyCSS instead of Tailwind.
• santy-classmap.json lists every class name. It's also importable as santycss/classmap, for linters, autocomplete and validating AI output.

Links

• 📖 Website · docs · classes · components · icons · browser support
• 🎮 Playground · templates · Webflow guide
• 📝 Changelog · 🤝 Contributing · 🐛 Issues · 💬 Discussions

License and credits

MIT © Santy. Made in India 🇮🇳.

Icons are adapted from Bootstrap Icons (MIT, © The Bootstrap Authors) and Font Awesome Free (CC BY 4.0, © Fonticons, Inc.). See LICENSE for the third-party notices. Brand icons are trademarks of their owners and are included only to identify those brands. Their inclusion does not imply endorsement.