Skip to main content

Cacao CSS

CSS utility classes for rapid web development

Get 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.)

Unopinionated utility styles

Cacao is designed to work seamlessly with your custom designs. It doesn't impose any design decisions on you.

Only include what you need

Each utility style is in a separate file. Only include the ones that you need for your website.

Base styles included

Cacao includes some base styles to get you started. Media query breakpoints are included, along with reasonable browser reset CSS.

Included modules

  • Aspect ratios
  • Clearfix
  • Display styles
  • Embed media
  • Fit
  • Grid
  • Grid columns
  • Gutter
  • Height
  • Images
  • Links
  • Margin
  • Padding
  • Position
  • Pull
  • Push
  • Spacing
  • Typography
  • Width

Included breakpoints

  • 3xs: >= 240px
  • 2xs: >= 360px
  • xs: >= 420px
  • sm: >= 576px
  • md: >= 768px
  • lg: >= 1024px
  • xl: >= 1280px
  • 2xl: >= 1440px
  • 3xl: >= 1600px
  • 4xl: >= 1920px
  • 5xl: >= 2560px