Skip to main content

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.

How to import into your CSS​

Import this into your CSS with:

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

Typically this is included above other styles.

See Import Cacao CSS for more information.

Source CSS​

base.css
/* =========================================================================== *\
    Reasonable base defaults for some elements
\* =========================================================================== */

/**
 * Add smooth scrolling by default.
 * Disable it for those who prefer reduced motion
 * See https://ashleemboyer.com/accessible-smooth-scroll-to-top-buttons-with-little-code
 */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/**
 * Make all buttons look clickable
 */

button {
    cursor: pointer;
}

/**
 * Always hide an element with the `hidden` HTML attribute (from PureCSS).
 */

[hidden] {
    display: none !important;
}

/**
 * Remove the focus outline for mouse uses but preserve for keyboard users with :focus-visible
 * See https://twitter.com/LeaVerou/status/1045768279753666562
 * See https://css-tricks.com/the-focus-visible-trick/
 */
:focus:not(:focus-visible) {
    outline: none;
}