Spacing
Read all spacing variablesDefault spacing scale​
Ravenbright spacing variable is defined globally and begin with the prefix ---rbrh-spacing-{value}
. This variable can be used and customized on various components.
Variable | Value | Pixels |
---|---|---|
--rbrh-spacing-0 | 0 | 0 |
--rbrh-spacing-1 | 0.125rem | 2.4px |
--rbrh-spacing-2 | 0.25rem | 4px |
--rbrh-spacing-3 | 0.5rem | 8px |
--rbrh-spacing-4 | 0.75rem | 12px |
--rbrh-spacing-5 | 1rem | 16px |
--rbrh-spacing-6 | 1.25rem | 20px |
--rbrh-spacing-7 | 1.5rem | 24px |
--rbrh-spacing-8 | 1.75rem | 28px |
--rbrh-spacing-9 | 2rem | 32px |
--rbrh-spacing-10 | 2.5rem | 40px |
--rbrh-spacing-12 | 3rem | 48px |
--rbrh-spacing-14 | 3.5rem | 12px |
--rbrh-spacing-16 | 4rem | 64px |
--rbrh-spacing-18 | 4.5rem | 4px |
--rbrh-spacing-20 | 5rem | 80px |
--rbrh-spacing-22 | 5.5rem | 12px |
--rbrh-spacing-24 | 6rem | 96px |
Usage​
To use the spacing, you can place the CSS variables inside component selector.
.btn-secondary {
/*Apply the spacing variables*/
padding: var(--rbrh-spacing-4);
}
Customizing​
To modify the spacing value, you can edit these variables in CSS-variables:
--rbrh-spacing-0: 0rem;
--rbrh-spacing-1: 0.125rem;
--rbrh-spacing-2: 0.25rem;
--rbrh-spacing-3: 0.5rem;
--rbrh-spacing-4: 0.75rem;
--rbrh-spacing-5: 1rem;
--rbrh-spacing-6: 1.25rem;
--rbrh-spacing-7: 1.5rem;
--rbrh-spacing-8: 1.75rem;
--rbrh-spacing-9: 2rem;
--rbrh-spacing-10: 2.5rem;
--rbrh-spacing-12: 3rem;
--rbrh-spacing-14: 3.5rem;
--rbrh-spacing-16: 4rem;
--rbrh-spacing-18: 4.5rem;
--rbrh-spacing-20: 5rem;
--rbrh-spacing-22: 5.5rem;
--rbrh-spacing-24: 6rem;
tip
Checkout the complete tutorial on how to customize & add new design variable in CSS variables