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
7 Oct 20, 2022
41 Dec 29, 2022
2 Jun 21, 2022
32 May 1, 2022
13 Apr 22, 2022
240 Dec 13, 2022
202 Dec 22, 2022
6 Oct 21, 2022
42 Dec 27, 2022
10 Aug 29, 2022