A config-driven SASS/SCSS utility CSS framework. Define your design tokens once in _config.scss and Fastcss generates responsive helper classes for colors, typography, spacing, flexbox, grid, shadows, gradients and more — no build magic, just Sass.
Full class reference and live examples at fastcss.org.
- Install via npm or yarn
npm i fastcss
yarn add fastcss
- Copy the default configuration into your project
node_modules/fastcss/scss/_config.scss
- Import fastcss with your custom configuration and compile
@use 'fastcss' with ($config: ...);- Build the CSS
Fastcss uses Webpack, but any bundler that supports the Sass @use rule works fine. See node_modules/fastcss/scss/build.scss for how the module is imported with the default config, and webpack.config.js for the build setup.
All utility classes support responsive breakpoint prefixes:
<div class="flex sm:flex-col md:flex-row">...</div>Available prefixes: xs: sm: md: lg:
Interactive state prefixes work on most utility classes:
<div class="bs-1 hover:bs-3">...</div>Available prefixes: hover: focus: active:
Toggle visibility or display of child or sibling elements based on parent state:
<!-- shows .dropdown when .parent is hovered -->
<div class="parent hover:child-show">
<div class="dropdown child-hidden">...</div>
</div>All design tokens are defined in _config.scss. Key sections:
| Key | What it controls |
|---|---|
colors.palette |
Color names, variants, and their base hex values |
colors.gradients |
Named and numeric gradient definitions |
typography |
Font sizes, weights, families, line heights |
box.shadow |
Named and numeric box shadow definitions |
box.border-width |
Border width scale |
box.border-radius |
Border radius scale |
box.width / box.height |
Width and height scale |
box.spacing |
Margin and padding scale |
Example — adding a custom color:
'colors': (
'palette': (
'brand:100,500,900': #6200EA,
),
),This generates .brand-text:500, .brand-fill:500, .brand-border:500, and their responsive and state variants.
Follow the existing patterns and submit a PR — any contribution is welcomed.
Fastcss is open-sourced under the MIT license.