Creating a CSS and JS design system from the ground up
•
1 like•113 views
A talk which I did at the Auckland CSS meetup discussing the approach I took to building a design system for NZs largest online retailer
More Related Content
Similar to Creating a CSS and JS design system from the ground up
Similar to Creating a CSS and JS design system from the ground up (20)
Recently uploaded
Recently uploaded (20)
Creating a CSS and JS design system from the ground up
- 1. IMPLEMENTING A DESIGN SYSTEM FROM THE GROUND UP Styleguide | Component Library Andy Dover | github.com/adover linkedin.com/in/andrewdover
- 2. 1 FRONT END DEVELOPERIn a sea of back end and full stack developers
- 6. MULTIPLE INTERNAL & EXTERNAL REQUIREMENTS 1 x App Styles need to be able to compile to be compatible with native languages 2 x Websites One internally managed and one externally managed ∞ Internal Apps Multiple apps of multiple ages using anything from jQuery to Kendo UI
- 7. 1 FRONT END DEVELOPER"But we don't want a design system"
- 8. VALUABLE LESSON #1 Learn how to sell the value of the design system
- 9. BURNING PLATFORM BURNING DESIRE "Append Only" Stylesheets from 18 years of different developers 500kb bundled CSS file Complete reimplimentations of visibly similar functionality instead of reuse Inconsistent code Full site regression tests required for any code change No coding standards Impossible to update branding Multiple L&Fs and styles IE6 - 10 vendor prefixes and hacks Sad UX people, hacking away at stuff Quick! Easy! Declare once, apply everywhere Consistency Build pipeline with full optimisation and autoformatting Component isolation and test suites IDE automated coding standards (Prettier & StyleLint) Update branding from one file Up front implementation Happy UX people!
- 10. A STYLEGUIDE WAS BORN / component library
- 11. VALUABLE LESSON #2 Font declarations, grids and colours does not a design system make
- 12. "DESIGN SYSTEM, RIGHT AHEAD!" Page Layout Templates Elements Reacting to Other Elements Internationalisation Futureproofing Documentation Automation Accessibility The easy stuff is the tip of the iceberg Font Formats Packaging & Hosting Build Pipelines Platform Requirements Enforcing Constraints Linting Readmes Baseline Grids Library Architecture Language & Approach
- 13. SIDENOTE
- 14. BASELINES, SPACINGS, PRESETS, FTW Sort it out early and save yourself a tonne of headaches and iterations colors: ( background: ( ... ), heading: ( light: map-get($colors, porcelain), dark: map-get($colors, fun-green), ), ), borders: ( default: 1px solid map-get($colors, silver-sand), nav: 8px solid map-get($colors, fun-green), ), spacing: ( default: ( h: 1rem, v: 0.75rem, ), medium: ( h: 2rem, v: 1.5rem, ), large: ( h: 4rem, v: 3rem, ), ),
- 15. VALUABLE LESSON #3 Split your design system into multiple layers to allow optimum reuse
- 16. YO DAWG I HEARD YOU LIKE LAYERS... Components JavaScript implementations importing styles Sandbox Scenario-Driven component development environment Guide Documentation built from comments and readme files Styles CSS styles which can be imported and reused Configs Agreed base colours and spacing multipliers
- 17. VALUABLE LESSON #4 Pick your approach, live it, breathe it, learn how to explain it to a 5 year old
- 19. ITCSS Settings Configurations, Variables, Transitions, Animations, Presets Functions, Mixins Resets, Theme Imports, Shared Libraries HTML Tags, Singular UI Elements (Cards, Overlays etc.) Banners, Accordions, Navs, Notifications, Popups, etc Login, Navigation Drawer, Tabsets Page Flows Tools Global Imports Elements Atoms Objects Molecules Components Organisms Templates Atomic
- 20. AUTOMATE ALL THE THINGS Sandboxing StoryBook.js Angular Playground Documentation JSDoc SassDoc CompoDoc Calculations or building code blocks SASS functions Mixins Webpack helpers Asset copying and packaging Bash Scripts NPM Packages Pipeline Builds Choosing which npm script to run ntl
- 21. VALUABLE LESSON #5 Build a Proof of Concept to break your (and your designers) great ideas
- 22. AfterBefore 500kb Bundle Size 90kb Bundle Size 300+ Line height declarations 6 Line height declarations
- 23. THANKS!