Building a living styleguide using React & Styled-components
0 likes115 views
The document discusses the integration of React, styled-components, and Storybook, emphasizing the benefits of sharing logic and UI components while reducing redundancy and bugs. It outlines the evolution of CSS, and highlights the advantages of styled-components in creating a better developer experience without the need for external tools. Additionally, it mentions the use of Storybook's knobs addon for testing and visually sharing components.
Building a living styleguide using React & Styled-components
- 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
- 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!
- 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
- 10. #KLJS #styled-components #storybook CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components By Perezpriego
- 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.
- 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
- 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
- 34. #KLJS #styled-components #storybook Creating buttons...
- 35. #KLJS #styled-components #storybook Creating buttons¡ sorry, wrong talk.
- 36. #KLJS #styled-components #storybook Nick Babich
- 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
- 49. #KLJS #styled-components #storybook Credit: Max Stoiber
- 50. #KLJS #styled-components #storybook Credit: Max Stoiber
- 53. #KLJS #styled-components #storybook PDF Styleguide
- 55. #KLJS #styled-components #storybook Aim - Component library, hosted & visible to: ¡ñ UX ¡ñ Your team ¡ñ Your project ¡ñ Test / QA ¡ñ (OSS && ¡®The World¡¯)
- 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!
- 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 ¡ñ