The CSS version

Visit the main page to customize a CSS version.

Visit the full palette to customize a CSS version with every color.

Visual Studio Code

Both palette options are also available through the Visual Studio Code extension. Install it in two minutes.

A screenshot of the Cavepaint viewer extension in VS Code

While in Visual Studio Code, launch VS Code Quick Open (Ctrl+P), paste the following command, and press Enter:

ext install Cavepaint.cavepaint-viewer

After it's done installing, you'll be able to quickly access the Cavepaint palette and CSS generator inside of Visual Studio Code by bringing up the command palette with Ctrl + Shift + P and typing "Cavepaint."

The Less version

  1. Get the files. Or:
  2. git clone https://github.com/cavepaint/cavepaintCSS.git
  3. Use the files as your starting codebase.
  4. Install Less: npm install less -g
  5. Run Less: lessc cavepaint.less cavepaint.css

It's that easy! If anything here confuses you, or if you just want more, check out the Less usage guide. There are a whole lot of ways to compile Less.

Where to write your styles

If you're using the CSS version, write or include your styles after cavepaint.css

For the Less version, use the Cavepaint Less project download as a simple starting point for your style codebase. More detailed project templates for Less, Sass and Stylus are planned for the future. Cavepaint only uses preprocessing for a few variables and to drive the color system.

Since it's mostly just using CSS custom properties, so the CSS output should play well with any preprocessor.

Moving from CSS to Less

Cavepaint uses the same conventions everywhere. You can get started using the CSS version and your markup will work when or if you transition to Less.

Plenty of projects don't even get off the ground. Don't set up your Less codebase until you need to.

When you do move to Less, here are some quick tips to get started:

  • Edit properties.less for your basic settings.
  • Add whatever you want. Use the Less project as a starting point.
  • Don't bother with updating or adding Cavepaint as a dependency.

Cavepaint overview

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.

Naming conventions

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.