Spacing

The underlying scale used to create balance and harmony throughout components and layouts.

All underlying spacing, sizing, and layout concepts in Sipster follow a modified 4px (0.25rem) baseline scale. This scale is implemented via rem units instead of hard pixel values (where appropriate) to allow for more adaptive and responsive layouts.

The base font-size for Sipster (and most browser environments) is 16px (1rem), so a 4px (0.25rem) scale provides easily divisible whole numbers while still offering a wide variety of options. Maintaining a baseline scale leads to improved spacial balance and vertical rhythm throughout projects.

Spacing values are implemented in rem units, but are named after their equivalent pixel value to help ease translation between mockups and development.

Spacing Value	Pixel Equivalant	Computed REM Value
0*	0	0
2	2 px	0.125 rem
4	4 px	0.25 rem
8	8 px	0.5 rem
12	12 px	0.75 rem
16	16 px	1 rem
24	24 px	1.5 rem
32	32 px	2 rem
40	40 px	2.5 rem
48	48 px	3 rem
56	56 px	3.5 rem
64	64 px	4 rem
72	72 px	4.5 rem
80	80 px	5 rem
88	88 px	5.5 rem
96	96 px	6 rem
104	104 px	6.5 rem
112	112 px	7 rem
120	120 px	7.5 rem
128	128 px	8 rem

*The zero (0) value is provided, but it's not necessarily required to be used. In most circumstances where a value of 0 is needed, it makes sense to just use a raw 0 instead of relying on a custom Sass function and compilation to derive that value.

---

Applying Spacing

Applying spacing is fairly straightforward in both design and development.

Design: Figma Library

The baseline scale is available in the SDS Core Figma library as a reusable component, which can be accessed via the 'Assets' tab in Figma. Navigate to the SDS Core library, find the 'Spacing' page, and add the component to your design.

Once the Spacing component is added to your design, select it to bring up the Component properties in Figma's right sidebar. Here you will see 2 additional options: unit and orientation.

The unit option allows you to quickly change between the available spacing values.

The orientation option allows you to choose between vertical(Y) and horizontal(X) spacing.

This Spacing component should primarily be used for handoff files or dedicated redline specs to help communicate layouts and any shifts across breakpoints. It is not expected or required to add the actual component to every layout, of every page, of every file...but the space in all designs should still adhere to the scale.

Development: SCSS Spacing Function

To streamline implementation for developers, Sipster provides a custom spacing function: sds-spc().

This function allows you to pass the desired spacing $value (required), which will compile to the correct rem value as outlined in the table above.

sds-spc($value);

Example:

.myCustomComponent {
  margin: sds-spc(4) sds-spc(8);
}

.sds_Card {
  padding: sds-spc(16);
}

Compiled CSS:

.myCustomComponent {
  margin: 0.25rem 0.5rem;
}

.sds_Card {
  padding: 1rem;
}

While this function can be used inside any CSS property that accepts an integer, it should primarily be used for properties such as margin, padding, and other spacing related concepts.