Building a UI Styleguide in Ember

on YouTube ↗20m

" summary

Ember-CLI addons become a reusable UI kit: components live in an addon and addon exposes components into app namespace so apps get new components without imports; a test-dummy app serves as the live catalog and documentation; build hooks and a small plugin transform a Sass color palette into an ES-module JSON for the guide so styles stay build-time Sass→JSON color compiler up to date; tooling includes live-reload, npm linking, ember-styleguide/ember-freestyle for demos and versioning, and the result is a working styleguide used across apps.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 1:05Why create a UI StyleGuide?
3. 9:01Adding styles to the addon
4. 9:49Adding a visual interface to your UI-Kit
5. 11:58Automated documentation as a source of truth
6. 16:34Building a design system

" related talks

• 30mLiving Style Guide Driven DevelopmentChris LoPresto · EmberConf 2016
• 32mEmber Between Design and DevelopmentLisa Gringl, Francesco Novy · EmberConf 2016
• 08mEmber-Cli AddonsSam Selikoff · EmberConf 2018
• 01h 05mStyleguide-Driven DevelopmentTatiana Kolesnikova, Arvid Torset · NDC London 2018
• 45mMaintainable Style GuidesBermon Painter · Web Unleashed 2015
• 27mUsing Ember to build a universal design systemChris Manson · EmberFest 2021
• 27mDesigning for Ember AppsSteve Trevathan · EmberConf 2015
• 29mBuilding Custom Apps with Ember CLIBrittany Storoz · EmberConf 2015