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

Installation

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

Load from CDN

unpkg.com/fortune.css/dist/fortune.css

Install from NPM

npm install fortune.css

Use manually

Download

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

npm install
npm run build

Theming

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);
}

Tokens

Colors

--red
--pink
--grape
--violet
--indigo
--blue
--cyan
--teal
--green
--lime
--yellow
--orange
--state-primary
--state-secondary
--state-success
--state-info
--state-warning
--state-danger
--state-disabled
--white
--smoke
--light
--silver
--dark
--gray
--black
--space-0
--hdg
--media-hdg
--columns-width
--column-gutter
--column-gap
--border-width
--component-bg-color
--component-border-color
--component-border-radius
--component-border-width
--component-focus
--component-speed
--component-shadow
--component-margin-bottom
--component-padding
--darken
--darken-more
--lighten
--lighten-more
--shadow
--shadow-more