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

Your Very Own Component Library

Alex Sexton
November 29, 2014

Your Very Own Component Library

Tips and techniques on creating, testing, and maintaining an HTML CSS and JavaScript UI Component library.

As presented at JSConf Argentina 2014

Alex Sexton

November 29, 2014
Tweet

More Decks by Alex Sexton

Other Decks in Programming

Transcript

  1. Your Very Own Component Library @slexaxton

  2. What’s a Component Library?

  3. None
  4. None
  5. None
  6. Why write one at all?

  7. Alex Sexton’s List of CSS Facts definitely true

  8. CSS Fact 1 Once you write a line of CSS,

    it can never be deleted.
  9. extremely useful styles

  10. CSS Fact 2 Preprocessors are great, as long as you

    know exactly what they output.
  11. ಠ_ಠ

  12. CSS Fact 3 No two people write CSS in a

    similar way.
  13. None
  14. CSS Fact 4 You cannot test CSS.

  15. CSSish Fact 5 You cannot upgrade to a new version

    of bootstrap without an animal sacrifice.
  16. Deleting & Testing go hand in hand

  17. Component Libraries are well tested & highly reusable

  18. Me on a good day

  19. Me on a normal day

  20. Use your best days to build up components that you

    can use mindlessly on your worst days
  21. Keyboard Accessibility

  22. Responsiveness™

  23. Screenreader Accessibility

  24. :focus states

  25. :active:hover:focus states

  26. It turns this…

  27. (crappy clay mario)

  28. into this…

  29. (sweet lego mario)

  30. Documentation & Code Samples built in

  31. Consistency for users

  32. Bonus: consistency for your crappy internal apps too

  33. How Can I Make One?

  34. How Can I Make One that’s better than just using

    Bootstrap?
  35. Choose a preprocessor

  36. KFCSS

  37. SUIT CSS

  38. None
  39. None
  40. Add your own checks!

  41. None
  42. None
  43. what color are these?

  44. None
  45. None
  46. works every time

  47. CIEDE2000

  48. You can test CSS!

  49. None
  50. None
  51. :hover —> .pseudo-hover

  52. None
  53. None
  54. Every combination of state

  55. a failing test

  56. None
  57. None
  58. abstraction.

  59. deleting code is too hard

  60. Changing a component means you have to go find every.

    single. use. in. every. app.
  61. None
  62. abstraction.

  63. i thought this was JSConf?!

  64. Turn all your CSS Components into JS Application Components

  65. None
  66. never use your component library directly

  67. avoid this, in general

  68. None
  69. None
  70. None
  71. Auto generated

  72. “living” style guide

  73. None
  74. Deleting code?

  75. None
  76. upgrading?

  77. None
  78. Flexbox grid has the same class names as the Bootstrap

    grid, but uses flexbox
  79. 90%

  80. 10%

  81. Gracias! @slexaxton