THE CSS THAT MAKES YOU FEEL GOOD.
Fluid typography, spacing, and grid layouts — all generated from class names. Zero runtime. Pure CSS output.
Write a class name. Get fluid CSS. That's it. Dopamine Fluid turns class names into fluid CSS: typography, spacing, and layout that scale smoothly from mobile to ultrawide. No breakpoint-heavy clamp boilerplate. No pixel babysitting. One class, smooth everywhere.
Built for real-world projects, it includes a lightweight grid system with containers, ratio columns, and flexbox utilities. Everything you need for structure, nothing you do not: no colors, no tokens, no themes, no visual opinions. It does not fight your design system. It sits underneath it.
Drop it into a Drupal theme, a static site, or that legacy codebase everyone avoids. The CLI scans your templates, picks up only the classes you wrote, and outputs pure CSS. If it is not in your markup, it is not in your bundle.
Class name equals spec. Build and done. CSS that makes you feel good.
Install the package, scaffold the starter structure, then build it:
npm install --save-dev dopamine-fluid sass concurrently browser-sync
npx dopamine-fluid init
npm run build # if init added package.json scripts
npm run dev # watch + live reloadRun npm run dev for watch + live reload. If your project does not use package.json scripts, run npx dopamine and npx sass scss/main.scss:css/main.css scss/custom:css/custom --no-source-map directly.
Font size (fluid + fixed), font weight (named + numeric), line height.
fs fw lh
Padding and margin — all sides, individual, axes. Fixed and fluid.
p pt pb px py m mt mb mx my
Width, height, min/max sizing, border radius.
w h maxw minw maxh minh radius
Containers, columns (equal + ratios), gaps, grid alignment.
container cols gap gapx gapy
Display, flex direction, justify, align, wrap. All with breakpoints.
flex grid hidden justify-* align-*
Text alignment, position & offsets, aspect ratio, object fit, overflow, z-index, truncate, sr-only.
text-* inset ratio-16/9 sticky overflow-* z-* truncate
The df.fluid() function for custom styles where you can't add classes.
df.fluid() addons/sass/
Pre-built structural CSS for accordion, modal, menu, tabs, dropdown, collapse. Style with classes.
addons/components/
Pure-CSS styled checkboxes, radios, and switches. Native inputs stay in the DOM — accessible + form-submittable.
checkbox radio switch
The scaffolded project uses this structure. Generated files appear after the first build.
your-project/
├── package.json # optional — init adds missing starter scripts
├── dopamine.config.json # scan/output configuration
├── dopamine-safelist.txt # optional extra classes
├── templates/
│ └── index.html # starter markup
├── scss/
│ ├── _dopamine.scss # generated — utility classes
│ ├── _dopamine-functions.scss # generated — fluid() + mixins
│ ├── main.scss # your SCSS entrypoint
│ └── custom/ # optional extra SCSS files
└── css/
├── main.css # compiled output
└── custom/ # compiled custom stylesEach .scss file in scss/custom/ compiles to its own css/custom/<name>.css.
Find near-duplicate fluid classes across your templates and get merge suggestions to keep your CSS lean:
npx dopamine-auditReads input and ext from your config. Flags classes like fs-16-20 and fs-18-24 that are close enough to merge into one. Use -o to write the report to a file:
npx dopamine-audit -oYou can also provide classes directly in a plain text file — one class per line. Useful for prototyping, generating a utility stylesheet from a curated list, or integrating with tools that output class lists.
Create a file (e.g. dopamine-safelist.txt):
# One class per line
fs-16-48
cols-3Empty lines and lines starting with # are ignored.
Run it via CLI:
npx dopamine --classes dopamine-safelist.txtOr set it in dopamine.config.json:
{
"classes": "./dopamine-safelist.txt"
}Classes from the file are merged with any template-scanned classes. Unrecognized class names will trigger a warning so you can spot typos early. In watch mode, the classes file is also watched for changes.