Functional CSS, but only the good parts.

fr·ctures tries to abstract away the complexities UI design has to offer.

It is really just a thin atomic CSS layer with a small opinionated reset.
Use fractures for rapid prototyping and building out design systems.

Have questions? Open an issue on GitHub.

Goals

  • You can design with — not around it. Leaves UI untouched.
  • Atomic, non blocking.
  • Manageable cognitive load with a small footprint.
  • Fast in every way.
  • Framework agnostic.

Problems

  • I don't think percentage based CSS breakpoints are universal enough, so you have to handle responsive states yourself.
  • You can use it in production, but you have to create your own fallbacks. The prefixed version handles some, but not everything.

Inspiration

I started this project as my own reset.css when having a reset css was cool. It was grown into a common.css, then a tools.css. Now it's somewhat atomic.

I've also learned some tricks from these smart people:

The concept of functional CSS is not new. There are quite a few similar projects out there you can choose from if you looking for something different: #functional-css.