Webflow · Custom code

SantyCSS in Webflow

Add SantyCSS once in Project settings → Custom code, then type utility classes on any element under Style panel → Selector (the field next to the class name). Keep this page open: the left sidebar jumps to snippets and the full class reference on classes.html.

Head · Full bundle (recommended)

Paste into Head code. Delivers utilities, components, and animations in one request (~615KB minified from CDN).

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

Non-minified: swap santy.min.css for santy.css.

Head · Split bundles (lighter first paint)

Load only what you need. Add santy-animations.css if you use scroll or hover animations. On the CDN, split modules ship as readable CSS; the single-file santy.min.css bundle is the minified option.

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

Head · Icons

Optional. Add an Embed or icon span with classes from the icon browser.

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

Footer · Scroll-triggered animations

SantyCSS scroll utilities (e.g. animate-on-scroll-*) need a one-time is-visible class. Paste into Footer code.

<script>
(function () {
  var o = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
      if (e.isIntersecting) e.target.classList.add('is-visible');
    });
  }, { threshold: 0.15 });
  document.querySelectorAll('[class*="animate-on-scroll"],[class*="scroll-reveal"]').forEach(function (el) {
    o.observe(el);
  });
})();
</script>

Webflow workflow

Combining classes: Webflow shows one “selector” string per combo. Add multiple Santy utilities as space-separated classes on the same element (same as HTML class).
CMS & embeds: Rich text and embeds still inherit project CSS, so utilities apply there too once the head link is global.
Breakpoints: Use Santy responsive prefixes (md:grid-cols-3, on-mobile:…) on any class field — Webflow’s own breakpoints are separate; test in preview.
Conflicts: If a Webflow style and a utility both set the same property, remove the Webflow property or use a more specific combo class.

Design tokens (optional)

Override brand colors globally via Project settings → Custom code → Head after the SantyCSS link.

<style>
  :root {
    --santy-primary: #3b82f6;
    --santy-secondary: #8b5cf6;
    --santy-accent: #10b981;
    --santy-radius: 0.5rem;
    --santy-font: 'Inter', system-ui, sans-serif;
  }
</style>