DEV Community

Eka
Eka

Posted on

Is there a tool for creating a UI Pattern Library in multiple frameworks?

This question has been bugging me for a while… finally got round to writing it down if only to get it off my chest!

Summary/TLDR

  • Is there a tool that makes it easier to create/set up a “pattern library” to document and develop UI components in multiple frameworks (HTML, WebComponent, React, Vue, etc)?

Definition

I use the term “pattern library” to refer to a collection of UI components, which is a subclass of a design system, as described in the following articles.

I use the term “framework” loosely for the sake of brevity, hence the inclusion of React (a UI library) and of course HTML. It refers to any way to render UI components.

Inspiration

IBM’s Carbon Design System has UI components in vanilla (HTML+SCSS+JS), React, Angular, and Vue! 🤯

GitHub logo carbon-design-system / carbon

A design system built by IBM

Carbon Design System

Carbon Design System

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Carbon is released under the Apache-2.0 license Build Status Maintained with Lerna PRs welcome Chat with us on Gitter

Getting started

If you're just getting started, check out carbon-components. If you're looking for React components, take a look at carbon-components-react.

We also have community-contributed components for the following technologies:

If you're trying to find something specific, here's a full list of packages that we support!

Package name Description
carbon-components Component styles and Vanilla JavaScript
carbon-components-react React components
@carbon/elements IBM Design Language elements like colors, type, iconography, and more
@carbon/colors Work with IBM Design Language colors
@carbon/grid Build layouts using the new 16 column grid system
@carbon/icons Iconography assets. We also offer support in: React, Angular, and Vue
@carbon/pictograms Pictogram assets. We also offer support

Github’s Primer provides Primer CSS and React pattern library Primer Components. It also provides implementation of the components in pure HTML.

GitHub logo primer / components

Primer React components

Primer Components

React components for the Primer Design System

Documentation

Our documentation site lives at primer.style/components. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.

Installation

Install @primer /components in your project with your package manager of choice:

npm install @primer/components

// or

yarn add @primer/components

Contributing

We love collaborating with folks inside and outside of GitHub and welcome contributions!

👉 See the contributing docs for more info on code style, testing, coverage, and troubleshooting.






Lastly, Salesforce’s Lightning Design System provides HTML+CSS and WebComponent usage.

Rationale & Problems

Having a UI pattern library at hand—combined with tools like Storybook—speeds up prototyping, design, development, and even documentation. However, tools like Storybook and Patternlab only allow you to work in one framework OR vanilla HTML. (Storybook does support numerous frameworks but you have to set up separate projects.)

Why not stick to one framework? You (ie. your organisation or your client) might have multiple products that require different stacks, or you might want to experiment with new stacks. If you are the sole front-end dev in a small product team or a freelance dev, you might not have the resources to work on multiple separate codebases just to document your components.

  • How do we make it easier to develop in multiple frameworks—hence reducing excessive dependence on one particular library?
  • HTML is the basic building block for the web, so UI components have to be available in plain HTML. On the other hand, some developers might find it easier/faster to prototype in, say, React. How do we encourage getting the best of both worlds without turning it into a “versus” thing?
  • How do we streamline component development and documentation across frameworks? How do we make sure UI components are developed in a consistent manner across frameworks? (choice of elements, class names, attributes and props, etc)

(Vague) Ideas & Further Questions

Disclaimer: I’m a beginner and have not fully mastered the complexities of front-end tooling; just considering the possibilities as far as I could understand.

  • Set up a yarn workspaces that contains multiple packages. One package exports branding/foundations design tokens. We write the components in one “primary” component package (in WebComponents because it’s closest to native web platform? or in vanilla JS because it’s easy to convert to other formats?); use bundler/compiler/transpiler(?) to export to multiple formats.
  • Then from separate packages, import those components that you can further modify if you so choose. Each package would have similar folder structure and have Storybook setup for each framework. (Is there a “generator” of sorts that can automatically generate this?)
  • Use SCSS/Sass as single source of truth. (To some extent I’m already doing this—I use the same CSS for a React Storybook pattern library and a Laravel web app.)
  • Where do design tools that output code (Sketch, Figma, Zeplin) figure in this? Should they be the source of truth? (ie. Should they be developed to output code for multiple frameworks?)
    • Design-to-code tools seem to get much hype, and I guess it’s ideal for visual-oriented designers and developers (which unfortunately I’m not)—but it would mean you have to develop from those tools? 🤔

Would love to know if anyone has experience with or insights about this topic.

Top comments (2)

Collapse
 
roblevintennis profile image
Rob Levin

I have an article coming out on CSS tricks in a couple of days on this very topic. It goes over steps to build a component that supports React, Vue, Svelte, and Angular.

Same exact setup that I used for AgnosticUI

Collapse
 
jasonhjohnson profile image
Jason

I have no answers but am hoping you found some and can share?