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

    View full-size slide

  2. What’s a
    Component Library?

    View full-size slide

  3. Why write one at all?

    View full-size slide

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

    View full-size slide

  5. CSS Fact 1 Once you write a line of CSS,
    it can never be deleted.

    View full-size slide

  6. extremely useful styles

    View full-size slide

  7. CSS Fact 2
    Preprocessors are great,
    as long as you know
    exactly what they output.

    View full-size slide

  8. CSS Fact 3 No two people write CSS
    in a similar way.

    View full-size slide

  9. CSS Fact 4 You cannot test CSS.

    View full-size slide

  10. CSSish Fact 5
    You cannot upgrade to a new
    version of bootstrap without
    an animal sacrifice.

    View full-size slide

  11. Deleting & Testing go hand in hand

    View full-size slide

  12. Component Libraries
    are well tested &
    highly reusable

    View full-size slide

  13. Me on a good day

    View full-size slide

  14. Me on a normal day

    View full-size slide

  15. Use your best days to build up
    components that you can use
    mindlessly on your worst days

    View full-size slide

  16. Keyboard Accessibility

    View full-size slide

  17. Responsiveness™

    View full-size slide

  18. Screenreader
    Accessibility

    View full-size slide

  19. :focus states

    View full-size slide

  20. :active:hover:focus
    states

    View full-size slide

  21. It turns this…

    View full-size slide

  22. (crappy clay mario)

    View full-size slide

  23. into this…

    View full-size slide

  24. (sweet lego mario)

    View full-size slide

  25. Documentation
    &
    Code Samples built in

    View full-size slide

  26. Consistency for users

    View full-size slide

  27. Bonus: consistency
    for your crappy internal apps too

    View full-size slide

  28. How Can I Make One?

    View full-size slide

  29. How Can I Make One
    that’s better than just using Bootstrap?

    View full-size slide

  30. Choose a preprocessor

    View full-size slide

  31. Add your own checks!

    View full-size slide

  32. what
    color
    are
    these?

    View full-size slide

  33. works every time

    View full-size slide

  34. You can test CSS!

    View full-size slide

  35. :hover —> .pseudo-hover

    View full-size slide

  36. Every combination
    of state

    View full-size slide

  37. a failing test

    View full-size slide

  38. abstraction.

    View full-size slide

  39. deleting code is
    too hard

    View full-size slide

  40. Changing a component means
    you have to go find
    every. single. use. in. every. app.

    View full-size slide

  41. abstraction.

    View full-size slide

  42. i thought this was JSConf?!

    View full-size slide

  43. Turn all your
    CSS Components
    into
    JS Application Components

    View full-size slide

  44. never use your
    component library directly

    View full-size slide

  45. avoid this, in general

    View full-size slide

  46. Auto generated

    View full-size slide

  47. “living” style guide

    View full-size slide

  48. Deleting code?

    View full-size slide

  49. Flexbox grid has
    the same class names
    as the Bootstrap grid,
    but uses flexbox

    View full-size slide

  50. Gracias!
    @slexaxton

    View full-size slide