Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building a UI styleguide with Ember

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.

7b9e7d960776440145b8ad9c100f9b1a?s=128

Frédéric Soumaré

March 19, 2019
Tweet

Transcript

  1. Building a UI Styleguide with Ember

  2. Frédéric Soumaré @hakilebara

  3. None
  4. Why create a UI StyleGuide?

  5. None
  6. None
  7. None
  8. None
  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

  17. None
  18. None
  19. None
  20. None
  21. UI Elements

  22. None
  23. None
  24. None
  25. Register App

  26. None
  27. None
  28. ember addons

  29. Generate the addon

  30. None
  31. None
  32. Ember addon file structure addon/ app/ tests/dummy package.json

  33. Generate an addon component

  34. None
  35. None
  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

  46. None
  47. None
  48. Adding a visual interface to your UI-Kit

  49. https://ember-learn.github.io/ember-cli-addon-docs/

  50. None
  51. Code snippets Live Demos Autogenerated API reference Versioning (use SemVer

    ) Search
  52. None
  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

  57. None
  58. JSON representation of the color palette available at runtime SASS

    color palette Build time magic
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. UI StyleGuide UI-Kit UI Elements

  69. UI StyleGuide UI-Kit UI Elements Design System

  70. None
  71. None
  72. Written Principles Values Scalable core UI patterns

  73. None
  74. None
  75. Building a design system

  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. UI StyleGuide Design System UI-Kit UI Elements

  83. None