Skip to main content

Spacing

Read all spacing variables

Default 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.

VariableValuePixels
--rbrh-spacing-000
--rbrh-spacing-10.125rem2.4px
--rbrh-spacing-20.25rem4px
--rbrh-spacing-30.5rem8px
--rbrh-spacing-40.75rem12px
--rbrh-spacing-51rem16px
--rbrh-spacing-61.25rem20px
--rbrh-spacing-71.5rem24px
--rbrh-spacing-81.75rem28px
--rbrh-spacing-92rem32px
--rbrh-spacing-102.5rem40px
--rbrh-spacing-123rem48px
--rbrh-spacing-143.5rem12px
--rbrh-spacing-164rem64px
--rbrh-spacing-184.5rem4px
--rbrh-spacing-205rem80px
--rbrh-spacing-225.5rem12px
--rbrh-spacing-246rem96px

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