Skip to main content

Getting Started

Cacao is a utility class CSS library. It intentionally does not provide styles for specific components. Rather, it has utility classes for doing common things like grids, setting heights and widths, and gutters.

The embed style is the exception to that rule, but it only provides the minimal CSS to responsively embed an iframe.

The first step is to install Cacao.

Installation​

npm install cacao-css

Include the CSS into your project​

We recommend that you import the Cacao modules after your site styles. This allows the Cacao styles to override site styles if necessary.

For example, the .hidden may need to override the display style of a component. It can't do that unless it's included after your site styles.

It's strongly recommended that you always include these imports:

  • @import 'cacao-css/dist/media.css';
  • @import 'cacao-css/dist/reset.css';
  • @import 'cacao-css/dist/base.css';

See Import Cacao CSS for the full list of imports available.

Build your CSS​

You will need to use PostCSS to compile your CSS. You will need the following PostCSS plugins:

If you haven't done so already, you can install them with:

npm install postcss postcss-import postcss-custom-media

Use the classes in your HTML​

As an example, here is a grid

<div class="grid g-3">
    <div class="col-1-1 col-1-2-md">
        Column one content here. I'll be a 50/50 grid on medium or larger screens and one column on small screens.
    </div>
    <div class="col-1-1 col-1-2-md">
        Column two content here. <a href="/some-url" class="link-subtle">A subtle link</a>
        <p class="mt-5">I'm a paragraphy with a large top margin.</p>
    </div>
</div>