Your Very Own Component Library

on YouTube ↗20m

" summary

A concrete kit called Bootstripe replaces vanilla Bootstrap with opinionated components, a small-module preprocessor kfcss (rework plugins), and a color checker CSS Color Guard; tests run in CI by taking screenshots and doing visual diff CI so every visual change fails build until a designer signs off. Components are exposed as React/Ember wrappers, markup centralizes fixes (e.g. adding button type="button" to stop accidental submits), and a flexbox grid plus naming rules make safe deletions and upgrades practical.

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 3:27Deleting & Testing go hand in hand
3. 3:39Component Libraries
4. 4:44Me on a normal day
5. 7:39Choose a preprocessor
6. 7:54KFCSS
7. 9:36Add your own checks!
8. 10:38works every time
9. 14:54abstraction.
10. 18:31Deleting code?

" related talks

• 22mStyling Components for React UI KitsJavi Velasco · ReactJS Day 2017
• 24mCase Study: Creating a Component Library in React JSKathryn Grayson Nanz · NationJS Frontrunners React 2019
• 43mBuilding a component based library with ReactFerry Kobus · Frontend United 2018
• 28mFrom Sketch to Code Designing a Component KitSamantha Bretous · React Boston 2018
• 44mBest Practices on building a UI component library for your companyDavid Wells · Full Stack Fest 2016
• 31mAn agnostic components design system for ReactJavi Velasco · AgentConf 2018
• 16mCSS, Design Systems & Developer ExperienceEmily Plummer · dotCSS 2019
• 05mReact is the new Lego - how we deal with a lot of componentsOndřej Bartas · ReactiveConf 2016