Fortune.css is a simple CSS variables driven library. It is light, customizable and needs no preprocessor builds.

Fortune is well suited to static sites and code pens, and built to support new CSS specs using current style and naming conventions.

  • Benefits
  • 🌈 Uses CSS custom properties
  • ⚡️ Light-weight at ~ 10kb gzipped
  • ⛔️ No preprocessor required
  • Features
  • 📐 Supports CSS grids and flexbox
  • 🥊 Non-blocking utility classes
  • 💧 Essential components to start


There are a few ways to use Fortune. You can use the CDN, install it from NPM or download it.

Load from CDN

Install from NPM

npm install fortune.css

Use manually


Fortune uses postcss and gulp to generate autoprefixed CSS should you want to build your own components.

npm install
npm run build


Since Fortune is based on CSS proporties, theming is simple. Simply add :root or :scope definitions to your CSS.

:root {

--font-family: 'Roboto', sans-serif;
--headings-font-family: 'Roboto', sans-serif;
--container-width: 125em;
--column-gutter: var(--space-4);