Type and space

cu.css uses Utopia to create a fluid responsive design system for both type and space. This removes the need for arbitrary breakpoints and creates type and space that scales depending on the device or viewport.

Choosing a fluid type scale #

Use Utopia’s Fluid Type Scale Calculator to modify typography. Once you are happy with your scale, copy the CSS generated by Utopia and use it to replace the existing type scale found inside assets/scss/abstracts/_type.scss.

/* 
Utopia fluid type

@link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,20,1.25,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,NaN 
*/
:root {
  --step--1: clamp(0.83rem, calc(0.78rem + 0.29vw), 1.00rem);
  --step-0: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --step-1: clamp(1.20rem, calc(1.07rem + 0.63vw), 1.56rem);
  --step-2: clamp(1.44rem, calc(1.26rem + 0.89vw), 1.95rem);
  --step-3: clamp(1.73rem, calc(1.48rem + 1.24vw), 2.44rem);
  --step-4: clamp(2.07rem, calc(1.73rem + 1.70vw), 3.05rem);
}

[!TIP] Customising the prefix If you change the custom property prefix in the generator from step to something else, then make sure to update the values of the --font-size-* properties inside _theme.scss to reflect the new prefix.

It’s generally advised against using these primitive type tokens directly in your styles. Instead, work with the semantic --font-size-* tokens that make use of these primitives. You can find theme inside assets/scss/abstracts/_theme.scss.

Choosing a fluid space scale #

In the same way type scale can be modified, use Utopia’s Fluid Space Calculator to modify the existing space scale. Once you are happy with your scale, copy the CSS generated by Utopia and use it to replace the existing space scale found inside assets/scss/abstracts/_space.scss.

/* 
Utopia fluid space

@link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 
*/
:root {
  --space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem);
  --space-2xs: clamp(0.50rem, calc(0.46rem + 0.22vw), 0.63rem);
  --space-xs: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem);
  --space-s: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
  --space-m: clamp(1.50rem, calc(1.37rem + 0.65vw), 1.88rem);
  --space-l: clamp(2.00rem, calc(1.83rem + 0.87vw), 2.50rem);
  --space-xl: clamp(3.00rem, calc(2.74rem + 1.30vw), 3.75rem);
  --space-2xl: clamp(4.00rem, calc(3.65rem + 1.74vw), 5.00rem);
  --space-3xl: clamp(6.00rem, calc(5.48rem + 2.61vw), 7.50rem);
  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, calc(0.12rem + 0.65vw), 0.63rem);
  --space-2xs-xs: clamp(0.50rem, calc(0.35rem + 0.76vw), 0.94rem);
  --space-xs-s: clamp(0.75rem, calc(0.58rem + 0.87vw), 1.25rem);
  --space-s-m: clamp(1.00rem, calc(0.70rem + 1.52vw), 1.88rem);
  --space-m-l: clamp(1.50rem, calc(1.15rem + 1.74vw), 2.50rem);
  --space-l-xl: clamp(2.00rem, calc(1.39rem + 3.04vw), 3.75rem);
  --space-xl-2xl: clamp(3.00rem, calc(2.30rem + 3.48vw), 5.00rem);
  --space-2xl-3xl: clamp(4.00rem, calc(2.78rem + 6.09vw), 7.50rem);
  /* Custom pairs */
  --space-s-l: clamp(1.00rem, calc(0.48rem + 2.61vw), 2.50rem); 
}

[!TIP] Customising the prefix Keep in mind, changing the prefix in the generator from space to something else will require updating all styles that consume these custom properties.

Unlike the type tokens, use space tokens anywhere in your styles.