#⚜️ Design systems

A design system is a broader term usually consisting of a few sub-systems. Most people have their own definitions, but there is a common distinction between a style guide and a component library.

When creating a style guide, you usually take a broader approach, including branding, typography, colors, and components.

In contrast, a component library is often focused on the components themselves.

#What is a component library?

A component library gives developers and designers common ground to look at when discussing form and function.

It is a collection of code that documents UI patterns for a web-based project. It starts with the smallest possible components and builds up to larger page modules.

Examples of naming when talking about component libraries:

• atom, molecule, organism, page
• element, component, module, page
• element, module, blocks, page

#Design System generators

#Fractal

We have used Fractal on a few projects lately and are very happy with it. There is a Twig version so we can use it for production-ready components.

• Fractal - Twig support and an Open Source license

#KSS (Twig)

For smaller projects, a generator like kss-node is a good choice. The concept is to use comments in the CSS to generate a style guide.

It can support Twig and is, therefore, a good match to use with Craft CMS, but the implementation is more or less system agnostic. We have used it with Statamic, and in other scenarios, too.

#Other well-known alternatives that we haven’t tried (yet):

• Storybook - frontend workshop for UI development
• Pattern Lab - create atomic design systems

#Or, a simpler alternative:

• Eleventy Design System

• Fractal

Resources