Spacing system

As this article is part of series, most of the underlying concepts and fundamentals like:

• Modular scale
• Fluidity
• Intrinsic design
• Fallback

are covered in our article about typography. So here we are going just quickly recap some fundamental concepts.

Fundamental concepts

Modular scale strategy

A modular scale is a system that uses ratios to establish consistent and harmonious proportions between elements in design, such as typography and layout. By adhering to a modular scale, we can can establish visual harmony.

Fluidity strategy

CSS fluidity refers to the ability of web page elements to adjust their size and layout dynamically based on the viewport dimensions or parent container’s size.

Intrinsic design strategy

Intrinsic design refers to the ability of elements to naturally adapt space and white space base on component size

Fallback strategy

Fallback strategy is way of organizing CSS to enhance modern browser options, and if browser does not support it offer backup variant for that case which may not look exactly the same, but could improve usability in overall.

Fundamentals in context of space system

To put all of that in perspective, Headspin spacing is based on mathematical model of modular scale, by default it aims to provide Intrinsically aware spacing and scale based on that. If browser does not support container queries it will fallback to fluid strategy using screen size (viewport width – vw unit).

Reducing need of media queries

While there is no way to eliminate media queries fully, we can strategically deploy concepts mentioned above in order to reduce need of using them and spend less time on adjusting spacing on smaller screen sizes. Without this approach you would need to tweak almost everything, and by using this you could just look at exceptions which need correction.

Scales and sizes

Each uses T-shirt like sizing [xxs, xs , s, m, l, xl, xxl ]. First scale or regular space is smaller spacing scale which is used for spacing of the components, second scale or section spacing scale is bigger scale which is mostly used for vertical spacing between sections.

Handling exception

There could be cases where you would need to jump from on scale to another, and it is fine to do that in rare cases. If you need to do that too often that could indicate that you are using it in wrong manner.

Code reference

You can see code reference below which indicates naming schema of tokens in the system and how are steps generated. First step is M, and each smaller subsequent step is divided by modular scale, and each bigger step is multiplied by modular scale.

Fluidity is achieved by using two separate scale and initial values at desktop-ish and mobile-ish viewports. Section space is bigger for value of constant multiplier (section multiplier).

/*Regular spacing scale - smaller */
:root{
--hsp-xxs: ....;
--hsp-xs: ....; /*  {Initial_step / modular_scale / modular_scale  }*/
--hsp-s: ....;
--hsp-m: ....; /*  {Initial_step}  */
--hsp-l: ....;
--hsp-xl: ....; /*  {Initial_step * modular_scale * modular_scale}  */
--hsp-xxl: ....;
}
/*Section spacing scale - bigger*/
:root{
--hss-xxs: ....; 
--hss-xs: ....; /*  {Initial_step / modular_scale / modular_scale  }*/
--hss-s: ....;
--hss-m: ....; /*  {Initial_step}  */
--hss-l: ....;
--hss-xl: ....; /*  {Initial_step * modular_scale * modular_scale}  */
--hss-xxl: ....;
}