Moving away from Tailwind, and learning to structure my CSS

1 comments

• wonger_ 20 minutes ago ago

  Good ideas. It's nice to hear a non-frontender's perspective.

  For font sizing and spacing, I always recommend https://utopia.fyi. It generates CSS variables like:

    --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  
    --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  

  that you can copy-paste across projects. Note this is not a fixed scale (1em 2em 4em), but it grows with viewport size, so bigger screens can have bigger text and looser margins. No more breakpoints; only choose min and max supported viewports, and the rest is interpolated.

  I do wonder about interpolating line heights, though. Does anyone who uses utopia.fyi have a good way to manage that?

  Re organizing spacing and layout rules, I still struggle with that. One day I'd like to see what https://every-layout.dev/ recommends.