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

Transcript

1. Your Very Own Component Library @slexaxton
2. What’s a Component Library?
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.
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
40. Add your own checks!
43. what color are these?
46. works every time
47. CIEDE2000
48. You can test CSS!
51. :hover —> .pseudo-hover
54. Every combination of state
55. a failing test
58. abstraction.
59. deleting code is too hard
60. Changing a component means you have to go find every. single. use. in. every. app.
62. abstraction.
63. i thought this was JSConf?!
64. Turn all your CSS Components into JS Application Components
66. never use your component library directly
67. avoid this, in general
71. Auto generated
72. “living” style guide
74. Deleting code?
76. upgrading?
78. Flexbox grid has the same class names as the Bootstrap grid, but uses flexbox
79. 90%
80. 10%
81. Gracias! @slexaxton