What is fastcss #

A fully customizable, pure-SASS utility CSS framework. Generate only the classes you need from a single config map.

Fastcss generates helper classes at build time from a SASS $config map. The config controls colors, spacing scale, screen breakpoints, typography and more — so the final CSS only contains what you actually configured.

Installation #

npm install fastcss
# or
yarn add fastcss

// Use default config
@use 'fastcss';

// Or supply your own config
@use 'fastcss' with ($config: $myConfig);

sass scss/build.scss dist/fastcss.css

Responsive prefixes #

Almost every utility class is generated for each breakpoint defined in grid.screens. Prefix a class with {screen}: to apply it only at that breakpoint and above.

Text colors #

Format: {color}-text (base / 500 variant) or {color}-text:{variant}

Fill (background) #

Format: {color}-fill or {color}-fill:{variant}

Border colors #

Format: {color}-border or {color}-border:{variant}. Requires a border-width class (e.g. b-1) to be visible.

Gradients #

Format: grad-{key} — the key is defined in colors.gradients config. Use numeric keys for backwards compatibility and named keys for readability.

'gradients': (
  '0':            linear-gradient(...), // → .grad-0
  'blue-to-grey': radial-gradient(...), // → .grad-blue-to-grey
)

State variants are also generated: hover:grad-0, hover:grad-blue-to-grey, etc.

Color state variants #

All color classes (text, fill, border, gradients) are also generated for hover:, focus:, and active: states.

Font family #

Format: ff-{name}

Font size #

Format: fs-{key}

Font weight #

Format: fw-{weight}

Font style #

Format: fs-{style}

Line height #

Format: lh-{key}

Text utilities #

Responsive — all classes work with screen prefixes.

State variants available: hover:text-strike, hover:text-underline, hover:no-decoration

Padding #

Format: {direction}-{value}. Values from config: 0, 1, 2, 3, 4, 5, 10, 15, 20

Margin #

Format: m{direction}-{value}. Values: 0, 5, 10, 15, 20, 30, 40, auto

Border width #

Format: b{direction}-{value}. Values: 0, 1, 2, 3, 4. Combine with a {color}-border class to set the color — border-style is set automatically.

Directions

Widths

Combined directions with color

All border classes also work with responsive prefixes: sm:bl-2, md:b-0, etc.

Border radius #

Format: rad-{value}. Values: 0, 3, 5, 10, 50%

Width & Height #

Width values: 10, 15, 20, 1200, 100% — Height values: 10, 15, 20, 100%, 1

Positions #

Used with absolute / fixed / sticky. Values: 0, 5, 10, 15

Z-index #

Format: z-{value}. Values: -1, 1, 2, 3, 99

Box shadow #

Format: bs-{key} — the key is defined in box.shadow config. Use numeric keys for backwards compatibility and named keys for readability.

'shadow': (
  '0':    "none",                          // → .bs-0
  '1':    "0 1px 3px rgba(0,0,0,0.12)...", // → .bs-1
  'card': "0 2px 8px rgba(0,0,0,0.12)...", // → .bs-card
)

Material scale (bs-0 → bs-5)

State variants

Every shadow class is also generated for hover:, focus:, and active: states. Useful for interactive elements like cards and buttons.

<div class="bs-1 hover:bs-4">Card</div>
<div class="bs-0 hover:bs-card">Flat card</div>
<button class="bs-2 active:bs-0">Button</button>

Add any key to box.shadow in your config to generate a new bs-{key} class with state variants automatically included.

Flexbox — Display #

Flexbox — Direction #

Example: flex flex-col

Flexbox — Wrap #

Flexbox — Grow & Shrink #

Flexbox — Basis #

Flexbox — Justify content #

Flexbox — Align items #

Example: flex items-center

Flexbox — Align content #

Used with multi-line flex containers (flex-wrap).

Flexbox — Align self #

Applied to an individual flex child to override the parent's align-items.

Flexbox — Order #

Flexbox — Shorthand helpers #

Convenience classes that combine display + alignment in one.

Grid — Container #

container

Centered, max-width constrained per breakpoint. Resize the window to see it adapt.

<div class="container">
  <div class="row">
    <div class="xs:col-12 sm:col-3 md:col-2 lg:col-1">...</div>
    <div class="xs:col-6  sm:col-6 md:col-8 lg:col-10">...</div>
    <div class="xs:col-6  sm:col-3 md:col-2 lg:col-1">...</div>
  </div>
</div>

container-fluid

Always stretches to full width, only adds gutter padding on the sides.

<div class="container-fluid">
  <div class="row">
    <div class="xs:col-10 sm:col-6 md:col-8 lg:col-10">...</div>
    <div class="xs:col-2  sm:col-6 md:col-4 lg:col-2">...</div>
  </div>
</div>

Grid — Row #

Grid — Columns #

12-column grid. Responsive: prefix with xs:, sm:, md:, lg:.

<div class="row">
  <div class="col-12 sm:col-6 md:col-4 lg:col-3">...</div>
  <div class="col-12 sm:col-6 md:col-8 lg:col-9">...</div>
</div>

Grid — Offset, Push, Pull #

Grid — Row utilities #

Applied to a .row element to control alignment of its columns.

Utilities — Display #

All are responsive.

Utilities — Position #

All are responsive.

Utilities — Overflow #

Utilities — Float & Clear #

Utilities — Vertical align #

Format: va-{value}

Utilities — Group #

A horizontal flexbox row with no-shrink children. Useful for button groups, navbars, etc.

Utilities — List #

Utilities — Cursor #

Format: cursor-{value}

Utilities — State child/sibling toggles #

Toggle the display of all direct children or all siblings when the element enters a state.

Format: {state}:{target}-{display}

<div class="hover:child-block">
  Hover me
  <div style="display:none">
    Child visible on hover
  </div>
</div>

<input class="focus:sibling-flex" />
<div style="display:none">
  Sibling appears on focus
</div>

<div class="active:child-hide">
  <span>Click me</span>
  <span>Hidden on click</span>
</div>

<div class="hover:child-flex">
  Card content
  <div style="display:none">
    <!-- action buttons -->
  </div>
</div>

<span class="hover:sibling-block">
  Hover for tooltip
</span>
<div style="display:none">
  Sibling tooltip
</div>

<button class="active:sibling-flex">
  Press me
</button>
<div style="display:none">
  Shown while pressed
</div>