Fluid Design Systems With Netlify On-demand Builders

A proof of concept demonstrating how Netlify on-demand builders can help generate fluid, custom property based design systems on the fly — entirely based on the incredible Utopia.fyi ✨

Usage

To add a fluid typography and spacing system to your project, add a <link> tag like so:

<!-- generate/min-viewport/min-font-size/min-scale/max-viewport/max-font-size/max-scale -->
<link
  rel="stylesheet"
  href="https://fluid-design-system.netlify.app/generate/320/16/minor-third/1920/20/perfect-fourth"
/>

Once included, the link above will add a set of CSS custom properties to the html element, something like this:

:where(html) {
  /* Font Sizes */
  --step-0: clamp();
  /* ... */

  /* Spacing Units */
  --space-s: clamp();
  /* ... */

  /* Spacing Pairs */
  --space-s-m: clamp();
  /* ... */
}

These custom properties follow the exact same structure and syntax as the systems generated by Utopia.fyi — I highly reccomend taking a look there for more information on this approach to responsive design! ❤️

Note: Once generated, these external CSS files will be cached thanks to Netlify's On-demand builders.

Demo

To view a very simple working example of this on-demand builder, take a look at this CodePen 👀