Usage
Start with semantic HTML and microbe.css and any modules you need.
About
Microbe is a lightweight CSS framework for building responsive interfaces with semantic HTML. Its core stylesheet provides a small baseline, fluid typography and spacing, accessible form defaults, and a token-based color system. Optional modules add focused patterns such as buttons, cards, navigation, tabs, dialogs, popovers, notifications, and loading states, each available as a separate stylesheet. Most element and component styles are scoped to a microbe container and organized with CSS cascade layers, so you can introduce Microbe incrementally alongside an existing stylesheet. By relying on native HTML elements and browser primitives rather than a JavaScript component runtime, Microbe keeps markup straightforward and is particularly well suited to server-rendered applications.
The design system is built around the golden ratio and the relative units allowing styles to scale beautifully with the surrounding font size.
It ships with opinionated defaults, but you can easily override them using CSS variables and CSS layers.
Modules
Pick the modules you need on the modules page, include the generated link tags in your document, and start with semantic HTML:
Customizable
Change the accent color or the neutral color or override any CSS styles to tweak the appearance.
Scalable
All styles are built on the em unit and scales with the surrounding font size.
Color schemes
Microbe supports dark and light color schemes out of the box.
Find the full docs here.
Computed colors
As colors are based on hue, saturation and ligthness steps, it is often easy to compute colors that works well with the current accent color.
Acknowledgement
Microbe wasn't built in a vacuum; I was heavily inspired by PicoCSS both for the design of the documentation site and some of the element styling in the library. The look of the elements are mainly inspired by Zendesk Garden.