This question has been bugging me for a while… finally got round to writing it down if only to get it off my chest!
- 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)?
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.
- A comprehensive guide to design systems
- Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference?
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.
IBM’s Carbon Design System has UI components in vanilla (HTML+SCSS+JS), React, Angular, and Vue! 🤯
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.
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!
||IBM Design Language elements like colors, type, iconography, and more|
||Work with IBM Design Language colors|
||Build layouts using the new 16 column grid system|
||Iconography assets. We also offer support in: React, Angular, and Vue|
||Pictogram assets. We also offer support|
React components for the Primer Design System
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.
Install @primer /components in your project with your package manager of choice:
npm install @primer/components // or yarn add @primer/components
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.
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)
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.