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.

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