Functional CSS, but only the good parts.

Fractures is the atomic CSS toolkit that helps you create resilient design systems and rapid prototypes by providing a set of non-blocking utility classes.

yarn add @fractures/css @ 2.1.1

Looking for v1?

Goals

Atomic
Framework agnostic
No UI
Fast in every way
Small cognitive load
Tiny footprint

Features

Encourages composition

No more class flooding. Do better than repeating flex flex-wrap items-baseline pl-52 -mt-6 -mr-6 -ml-52 py-6 pr-6 bg-black text-white.

<article className="article-block__item flex p-4">  <span/></article>

Easy but powerful

HSL based color system built in. Customize all color or let the linear scale grade your shades for you, zero javascript.

<header className="flex flex-column">  <a className="bg-blue-700 blue-600"/></header>

Extendible

Fractures was created at the CSS level, and it's incomplete by design. Configure CSS variables at :root and follow the outlined patterns with your own code.

<div className="flex bg-gray-900">  <span className="    teal-700 (forever)    dark:color-darkest (temporary, by you)  "/></div>

Manifesto

Fractures is a relaxed, long term take on design systems and prototyping, trying to abstract away some complexities interface design has to offer. You can build around it or on top of it, but would not replace the work you have to do.

Ask a question on GitHub, say hi on twitter.