YAMB is a «no bullshit» CSS boilerplate ready to use in your projects.
This project evolved from my own small CSS micro-framework: reoccuring basic snippets I didn't wanted to copy&paste everytime I start a new project or MVP/demo.
YAMB is ready to use, but can also act as a solid starting point for your own design adventure. It has everything you need!
- 🏝 easy to use, since it is mostly1 classless
- 💻 easy to hack on: it's plain simple CSS, no preproccesors involved!2
- 🎨 easy to customize, since there are a lot of CSS variables defined
- 🔋 Batteries included!
- ⚡ lightweight at just 10kb minified3
- 🌚 dark mode's built in!
- 📰 comes with a print stylesheet4 (yes, really!)
[1] Why "mostly" classless?
There are some classes, because there are some conventions many people are following. E.g. I expect the whole content is being wrapped in a div with a class called page. YAMB is aimed at finding the happy medium. ↩
[2] The CSS is still a bit too verbose for my taste, but since this is just plain CSS without any preprocessors it's as good as it can be. It is easy to imagine how compact the CSS could become if a preprocessor with mixins would be used. This is left to be discovered by the reader. ↩
[3] Minimized with crass, v0.12.3:
crass yamb.css --optimize --O1 > yamb.min.css ↩
[4] Support for paged media is somewhat patchy, so I tend to include CSS2 specs as well as their new counterparts from CSS3. ↩
There are actually some efforts for easy barebone CSS frameworks out there. They are called classless, since you don't need to learn any proprietary conventions used by full fledged frameworks like Tailwind. A user called dohliam made a fine website where you can directly test a lot of those barebone CSS boilerplates. Chef's recommendations: Sakura CSS & and Water CSS.
Worry not, I got you buddy!
A big list full of stuff which might be helpful.
