CSS tools
Maple
Style pages with utility classes - no build step, no configuration
A runtime CSS engine that generates atomic styles from the utility classes it finds on the page. Instead of shipping a compiled stylesheet, it ships a small script that watches the DOM and builds the CSS as elements appear. Add one script tag to any page and start styling.
What we love ❤️
- Open source under the Root Source License, a MIT-style permissions with one added distribution condition
- Works anywhere you can add a script tag - any framework, any backend, or plain HTML
- One ~14kb file no matter how large the project grows
- Styles are generated only for classes that actually appear, so there is no unused CSS
- No build step, no config file, no dependencies to install
- Server-rendered and static HTML need no special treatment
- Playground to try the syntax before committing to it
Worth noting 💡
- Requires JavaScript - it generates styles in the browser instead of shipping a stylesheet
- Loads as a blocking script in the head, the same way a stylesheet blocks rendering
- Generation work scales with the number of unique classes on the page, not the number of elements
Maple takes the opposite path from the usual CSS toolchain: rather than scanning source files and compiling a stylesheet ahead of time, it waits until a class shows up on the page and styles it then. The trade is a runtime dependency in exchange for having nothing to configure and nothing to purge. Worth a look if your styling setup has grown more complicated than the styling itself.