Atomic CSS with fractures

Write CSS with immutable, atomic, utility classes

Whether you are iterating on a prototype for a client, updating your design portfolio or building a large scale web product in React, you are facing the same fundamental problems. You want to increase your velocity, write less code, while keeping visual and interactional consistency.

The most valuable promise of immutability in atomic design is that it eliminates unwanted side effects. With single-state, easy to understand helper classes in hand, you are forced to think functionally.

An atomic CSS library instantly grants you a system that can be scaled, extended and build upon.

Fractures is a small, atomic CSS library built with extensibility and accessibility in mind. My main goal was that it should leave the visible UI untouched, enabling other systems to adopt it. I also wanted to avoid global pollution, the whole library is under 3kb, nothing more than the bare minimum. And for good reasons. Besides speed, developer happiness is important even at atomic levels, so the classes are designed as easy-to-remember as possible.

In fractures, utility classes are getting their name by the plain function they do, reducing the effort needed to apprehend their purpose. For example, just like CSS grid layout have grid-gap, fractures introduced flex-gap, which works the same way, but on a single dimensional grid. As CSS working group is about to add row-gap and column-gap to flex, this function will just work, keeping that immutable promise we oath to before.

In larger scale applications, having an atomic CSS library is only the beginning. For sustainable product/development costs, you have to invest in your own design system. Without defined constraints, things will soon start to fall apart—that is normal, and is how it should be. It is hard to resist the urge to carve things into stones, but premature optimization in reality is suboptimal for every system.

Implement reusable elements only when you'll actually reuse them.

Either you're rolling your own internal version, or picking a library for your specific needs, investing small at the right time is important. Thinking and working in systems keeps developers, designers and your users happy.

Writing functional CSS is not a new concept, there are quite few stable atomic libraries you can choose from if you find fractures a bit too spartan. One of the oldest and greatest is tachyons, with responsive features, and with the most active user base. For React, there is rebass, with similarly wide scoped features.

A few great resources that you might find useful: