CSS reset

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

These are almost always included in a project along with the base styles and the media queries.

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/reset.css';

Typically this is included above other styles.

See Import Cacao CSS for more information.

Source CSS

Below is the full source for the reset styles.

reset.css

/* =========================================================================== *\
    CSS reset
    Inspired by https://www.joshwcomeau.com/css/custom-css-reset/
\* =========================================================================== */

/*
1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*
2. Remove default margin
*/
* {
    margin: 0;
}

/*
3. Improve text rendering
*/
body {
    -webkit-font-smoothing: antialiased;
}

/*
4. Improve media defaults by setting display to block and max-width to 100%
*/
video,
canvas {
    display: block;
    max-width: 100%;
}

/*
    Images, pictures and SVGs are inline-block instead of block so that multiple images
    within a paragraph (i.e. content from a rich text editor) flow beside each other
    instead of stacking on top of each other. The container around the
    inline-block also ensures that a broken image displays more obviously on a page.The dimensions
    of the image are still applied with inline-block compared to inline.

    max-width: 100% ensures that the image does not exceed the width of its container.

    vertical-align removes the descender gap that inline-level elements would otherwise
    sit above.
*/
img,
svg {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

/*
5. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    font: inherit;
}

/*
6. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}