Functional css generator
Functional css (à la tachyons), but customizable for your project's visual language. No more rewriting long stylesheets to include your colours, typefaces, and spacing scale! 🌺
Features
- flexible: easily define colors, type styles, spacing scales
- performant: only generates the breakpoints/variables you need (default kit is 3kb, compared to 14kb+ for tachyons)
- simple: spits out a css string, no fancy client-side work needed
- just javascript: integrates well with css-in-js, easy to extend, automate documentation, etc.
🚧 This project is still v0.x.x
and the API is subject to change.
Install
npm install hibiscss --save
Getting Started
For a quick start, use the default rule kit. You can pass in options to define your project’s visual language:
;; const styles = ;
Then use the classes like so:
Work Sans in pink at 24px!
Yay! 🎉 Check out the examples or default kit docs for more!
Configuration
Hibiscss returns a string of css. You can integrate it with your build system however you'd like. I find the easiest is to spit out a static css file, like so:
Make a file with your config and output it to console.log
, like so:
// css.js ;; const styles = ; console;
Then add a package.json
script to generate the styles:
Run npm run build-css
to create your styles, and re-run whenever you make changes to your kit.
Kits
Hibiscss generates css using kits, presets that map your visual language to functional css styles. Hibiscss comes with two kits bundled into the package:
Kits are functions which take options, and return css rules for hibiscss to generate. For example, using the default kit:
;; const config = spacing: 0 8 16 24 48 64 colors: rausch: '#ff5a5f' foggy: '#767676' fontSize: title: 44 large: 24 regular: 19 fontWeight: light: 300 regular: 400 semibold: 600 ; const rules = ;const css = ;
Will give you classes like:
Semibold and large
Kits let you customize everything whether you can adjust line heights to how verbose the class names should be (eg. mh-2
vs. marginHorizontal-2
).
Making a custom kit
If you'd like fine-grained control over the final css, you can write your own kit. Kits are simply a function that returns a set of rules, created with the rule
helper function.
Check out the custom kit example, or read the API docs to learn more.
Motivation
functional css makes css a lot of fun, but many of the toolkits out there are difficult to customize.
I found myself manually editing tachyons colours, typefaces, and breakpoints more times than I’d like. So I built hibiscss
to provide a simple structure for quickly generating functional css frameworks.
See also
Lots of prior art in the functional css area:
Hibiscss pairs nicely with:
- polished, a utility kit for css-in-js
License
MIT