Styles

📄️ Base styles

The base styles provide reasonable defaults for some elements. These are almost always included in a project along with reset and the media queries.

📄️ CSS reset

These styles add some minimal element style resets. It's inspired by Josh Comeau's CSS reset.

📄️ Media queries

Cacao provides a number of different media query variables that you can use in your code.

📄️ Clearfix

If you have content floated to the left or right, you often need to clear the float so that the parent element will expand to the height of the floated element.

📄️ Embedding content

This provides styles for embedding iframes and other media types.

📄️ Grid

This provides styles for setting an element to be displayed as a grid with flexbox.

📄️ Grid number of columns

When building grids using the column size and gutter classes, the CSS needs to know the number of columns in the grid in order to correctly adjust the column widths for the gutters.

The image styles provide helper classes to align images to the left or right of content. The image will have proper margins around it and on small screens it will no longer float but will show as a block element.