Padding - Variables

The size of the paddings are set using CSS variables. You will need to either import the cacao-css/dist/padding/variables.css file into your CSS or set all of the variables with your own CSS.

You could import the padding variables file and still override one or more of the variables in your own code. You just want to make sure that the code that overrides the variables is set after this import.

The variables

:where() is used to give the variables no specificity so that they are easily overriden. See the MDN where() documentation for more information.

The following variables are set.

Variable	Value
--padding-0	0px
--padding-1	10px
--padding-2	20px
--padding-3	30px
--padding-4	40px
--padding-5	50px
--padding-6	60px
--padding-7	70px
--padding-8	80px
--padding-9	90px
--padding-10	100px
--padding-11	120px
--padding-12	160px
--padding-13	240px
--padding-14	320px
--padding-15	480px

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/padding/variables.css';

See Import Cacao CSS for more information.

Source CSS

padding/variables.css

/* =========================================================================== *
  Variables for the padding sizes
 * =========================================================================== */

/* :where() is used to give the variables no specificity so that they are easily overriden. https://developer.mozilla.org/en-US/docs/Web/CSS/:where */

:where(html) {
    --padding-0: 0px;
    --padding-1: 10px;
    --padding-2: 20px;
    --padding-3: 30px;
    --padding-4: 40px;
    --padding-5: 50px;
    --padding-6: 60px;
    --padding-7: 70px;
    --padding-8: 80px;
    --padding-9: 90px;
    --padding-10: 100px;
    --padding-11: 120px;
    --padding-12: 160px;
    --padding-13: 240px;
    --padding-14: 320px;
    --padding-15: 480px;
}