Leverage React, or other Javascript frameworks with Storybook & Styled-components to build a living styleguide

1. #KLJS #styled-components #storybook
Using React, styled-components & storybook

2. #KLJS #styled-components #storybook
Tech Lead & Pixel Pusher, BAE Systems Applied Intelligence
vik@ramanuj.am | https://vik.ramanuj.am | @piggyslasher

3. #KLJS #styled-components #storybook

4. #KLJS #styled-components #storybook
● Share code - Logic & UI
● Less duplication, redundancy,
code, bugs
● More consistency
● Encapsulate logic into
components
● Share components visually
● Reap benefits!

5. #KLJS #styled-components #storybook
● Share code - Logic & UI
● Avoid duplication, redundancy
● Less code, less bugs
● Consistency
● Less work later
● Encapsulate logic into
components
● Share components
● Reap benefits!
● Encapsulation
● Sharing
I.e. presentational components, not smart components a.k.a
containers!

6. #KLJS #styled-components #storybook

7. #KLJS #styled-components #storybook
1994, before CSS

8. #KLJS #styled-components #storybook
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
By Perezpriego

9. #KLJS #styled-components #storybook

10. #KLJS #styled-components #storybook
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
By Perezpriego

11. #KLJS #styled-components #storybook

12. #KLJS #styled-components #storybook
SASS

13. #KLJS #styled-components #storybook
SASS

14. #KLJS #styled-components #storybook
SASS

15. #KLJS #styled-components #storybook

16. #KLJS #styled-components #storybook

17. #KLJS #styled-components #storybook

18. #KLJS #styled-components #storybook
CSS is getting better...

19. #KLJS #styled-components #storybook
Browsers will be supporting this natively as the CSS specs are
implemented.

20. #KLJS #styled-components #storybook

21. #KLJS #styled-components #storybook

22. #KLJS #styled-components #storybook

23. #KLJS #styled-components #storybook
Legacy CSS importing...

24. #KLJS #styled-components #storybook
Legacy CSS importing… CSS is in external stylesheet

25. #KLJS #styled-components #storybook
Inline styling - notice the camelCase.

26. #KLJS #styled-components #storybook
● Allowed tight encapsulation
● Still relied on external
stylesheets
● Devs still used SASS, Less,
PostCSS to build styles
● Was co-created by Glen
Maddern, the co-creator of
styled-components...

27. #KLJS #styled-components #storybook
Traditional CSS/HTML ->
Credit: CSS-Tricks

28. #KLJS #styled-components #storybook
Using CSS Modules ->
Credit: CSS-Tricks

29. #KLJS #styled-components #storybook
The output ->
Generated HTML
Credit: CSS-Tricks
Generated CSS

30. #KLJS #styled-components #storybook

31. #KLJS #styled-components #storybook
● Built on the lessons learnt from
CSS Modules
● Doesn’t need an external build
toolset
● Conceptually tallies with the
Component age - you’ll see why
:)

32. #KLJS #styled-components #storybook
It’s just a better developer experience

33. #KLJS #styled-components #storybook

34. #KLJS #styled-components #storybook
Creating buttons...

35. #KLJS #styled-components #storybook
Creating buttons… sorry, wrong talk.

36. #KLJS #styled-components #storybook
Nick Babich

37. #KLJS #styled-components #storybook

38. #KLJS #styled-components #storybook

39. #KLJS #styled-components #storybook

40. #KLJS #styled-components #storybook

41. #KLJS #styled-components #storybook

42. #KLJS #styled-components #storybook

43. #KLJS #styled-components #storybook
Manipulating the appearance… the traditional way.

44. #KLJS #styled-components #storybook
Credit: Max Stoiber

45. #KLJS #styled-components #storybook
Credit: Max Stoiber

46. #KLJS #styled-components #storybook
Credit: Max Stoiber

47. #KLJS #styled-components #storybook

48. #KLJS #styled-components #storybook

49. #KLJS #styled-components #storybook
Credit: Max Stoiber

50. #KLJS #styled-components #storybook
Credit: Max Stoiber

51. #KLJS #styled-components #storybook

52. #KLJS #styled-components #storybook

53. #KLJS #styled-components #storybook
PDF Styleguide

54. #KLJS #styled-components #storybook

55. #KLJS #styled-components #storybook
Aim - Component library,
hosted & visible to:
● UX
● Your team
● Your project
● Test / QA
● (OSS && ‘The World’)

56. #KLJS #styled-components #storybook

57. #KLJS #styled-components #storybook

58. #KLJS #styled-components #storybook

59. #KLJS #styled-components #storybook
The Storybook knobs addon… lets you play with props!

60. #KLJS #styled-components #storybook
A match made in heaven, not just in the React world!

61. #KLJS #styled-components #storybook

62. #KLJS #styled-components #storybook
!!

63. #KLJS #styled-components #storybook

64. #KLJS #styled-components #storybook

65. #KLJS #styled-components #storybook
● A github repo & webpackbin for you to play about with.
● Styled-components.com
● An introduction to styled-components with Glen Maddern
● Glen Maddern - Styling React Apps with Styled Components
●