Building a UI styleguide with Ember

How big should we make our buttons? What’s the colour code of our logo? How do we display error states on our forms?

Did you know that Ember-CLI’s powerful addon system can be used to build a kit of reusable UI components? In this talk, you will learn how to build your own styleguide addon and how to use it to keep your UI consistent across apps.

Transcript

1. Building a UI Styleguide with Ember
2. Frédéric Soumaré @hakilebara
4. Why create a UI StyleGuide?
9. Flexbox Grid
10. -Eric A. Meyer I envy “the kids”, the ones just starting to learn front end now. They’re likely never going to know the pain of float drop, or wrestling with inline blocks, or not being able to center along one axis.
11. Brand identity
12. How to create a UI-Kit?
13. How to create a UI-Kit? wat.
14. Component library StyleG uide Design System UI-Kit Component-kit UI Elements
15. UI StyleGuide Design System UI-Kit UI Elements
16. UI StyleGuide Design System UI-Kit UI Elements
21. UI Elements
25. Register App
28. ember addons
29. Generate the addon
32. Ember addon file structure addon/ app/ tests/dummy package.json
33. Generate an addon component
36. app/ & addon/ folders app/ addon/ app/ The Ember Addon The Ember App exports automagic
 “merge” manual
 imports
37. Addon dev tips
38. Linking to the addon while developing The Ember addon The Ember app
39. Linking to the addon while developing
40. Enable live reload while developing the addon
41. • T Remember to add ember-cli-htmlbars to the addon’s packages deps https://github.com/ember-cli/ember-cli/issues/4436 #helpwanted
42. Adding styles to the addon
43. Manage shared styles in your component kit my-ui-kit/addon/styles/mu-ui-kit.css Automatically include SCSS stylesheets from the addon my-ui-kit/app/styles/mu-ui-kit.css Manually include stylesheets from the addon
44. Manage shared styles in your addon
45. UI-Kit UI Elements
48. Adding a visual interface to your UI-Kit
49. https://ember-learn.github.io/ember-cli-addon-docs/
51. Code snippets Live Demos Autogenerated API reference Versioning (use SemVer ) Search
53. UI-Kit UI Elements
54. Consistency Colors Typography Branding
55. UI StyleGuide UI-Kit UI Elements
56. Automated documentation as a source of truth
58. JSON representation of the color palette available at runtime SASS color palette Build time magic
68. UI StyleGuide UI-Kit UI Elements
69. UI StyleGuide UI-Kit UI Elements Design System
72. Written Principles Values Scalable core UI patterns
75. Building a design system
82. UI StyleGuide Design System UI-Kit UI Elements