More and more the internet is made of components. They're usually defined with three parts: Style, markup and code. Composables fill the style role, designed to work with any markup and code.
Like how React is "just the V" in MVC, Cavepaint is just the styling for components.
Composable CSS classes are written to be simple and work with the other composable classes. They typically output more than one property. They might have rules supporting other composable classes.
Cavepaint works like sort of a caveman jargon for your CSS project, where the vocabulary is mostly based on pre-existing CSS terms. The words are simple, powerful and meant to be combined with others.
Cavepaint keeps things simple:
- No numerals (1, 5, 100, etc)
- No abbreviations (xt, MGS, xt:phablet-xxt)
- If it already exists, use that word
- "No" is powerful, and overrides other classes
- One- or two-word shortcuts to everything useful
- CSS property names apply project-level property base-colors
The Cavepaint site and docs are styled using Cavepaint, with no custom CSS on top.
Frequently Asked Questions
"I don't know CSS. Can I use Cavepaint?"
All you need to use Cavepaint is knowledge of how HTML works. If you can put together HTML elements and add classes to those elements, you're ready to use Cavepaint.
In fact, Cavepaint is a great way to learn CSS, because so many of the classes and conventions use names and terms from CSS.
"I don't know Less. Can I use Cavepaint?"
Cavepaint is powered by Less, the CSS preprocessor. It's made in a way where anyone on the team can use it, though. You don't need to know Less.
When your project is ready for a professional-level CSS approach with Less, switch over to the Less version. Until then, just use the CSS for any project, big or small.
"How do I port all of my colors over from Photoshop?"
Keep your colors in your Less codebase. Use Cavepaint's colors as a starting point and override them with your own when you've got time for refinements.
Cavepaint is officially against complicated workflows. That includes maintaining a working copy of how your website looks in a desktop program, and in your web codebase.