Your Component Library is Not a Design System
summary
Argues that a component library alone leaves out the Gatsby-driven Style Guide (the storefront) and shows a working Emulsify pipeline: Storybook + webpack + twig.js components packaged to NPM, consumed via yarn add, hot-reloaded during development, and pulled live into a Gatsby style guide. Demo builds a Western U site and a Studio Arts property that share org components while permitting property-specific overrides; builds are identical between Storybook and Drupal. Emulsify sees 100,000 downloads, Emulsify Drupal is in beta and the style guide is in alpha.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 1:05What is a component library
- 4:04Why component library isn't a design system
- 5:19What is a design system
- 7:19Key ingredients of a design system
- 12:38Emulsify design system overview
- 14:12Demo: Shared organizational components
- 21:24Demo: Style guide with Gatsby
- 28:18Demo: Custom property components
- 35:01Common questions and answers
- 41:41Q&A and closing
related talks
14mBuilding a component library with React, Vue, Angular or WebComponents
25mFrom Design Systems to Component Libraries
45mYour Styleguide is an API
28mFrom Sketch to Code Designing a Component Kit
24mCase Study: Creating a Component Library in React JS
43mHow to build your reusable UI component library like a pro
28mDesign Decisions for the Components Library
49mLiving Styleguide in your Drupal projects: Benefit from component driven design.