DEPRECATED! Wool is no longer maintained because Tailwind JIT won us over 🙃
🐑 A comprehensive and flexible utility-first styling solution.
- ✨ Concise classnames
- 🏛️ Built with sass
- 🎨 Easy to customize
- 💕 Responsive
- Install it
npm i @selfaware/wool
- Import it
@import '@selfaware/wool/src/index.scss';
To customize the CSS output of wool, import a custom configuration file including your desired overrides before the main wool import we added before.
@import 'my-config';
@import '@selfaware/wool/src/index.scss';
A great way to get started with customization is to reference the default configuration file to learn which settings are available.
At Self Aware, utility-first has been by far the most efficient and maintainable styling methodology. We used to use BEM for everything, but naming things sucks, and we felt the pains of our premature abstractions too many times to continue down that road. We still use BEM on those rare occasions where we need just a little bit more control than wool can offer (i.e. a complex hover effect or hamburger menu interaction). I could go on and on about the benefits, but you should probably just read this article about utility-first, because it's really good and also framework agnostic.
We built wool because we got tired of copying and pasting our accumulation of custom utility classes between codebases — tweaking colors, typography, and other project-specific settings by hand every time.