Style Guide Driven Development

Style guide driven development starts from developing Living Style Guide from the earliest stages of development. The living style guide is a prototype that shows how user interface (UI) components will appear throughout the website or web application

KL JS meetup

Transcript

1. Style Guide Driven Development
2. And let the words fall out
3. I’m Azizi Yazit UI Developer at esri Specialised in Component Library Angular & React developer Married and father of two beautiful daughters
4. The GAP between designer and developer Photoshop illustrator sketch Axure Zeplin JavaScript HTML5 CSS3 Angular ReactJS CSS-in-JS
5. Design-Dev collaboration Style Guide as IMAGE https://www.freepngimg.com
6. Design-Dev collaboration Style Guide as PDF
7. Design-Dev collaboration Style Guide as Wireframe
8. Design-Dev collaboration evolution of the Style Guide as IMAGE as PDF as Wireframe
9. Design-Dev collaboration Living Style Guide Source of truth for styles and guidelines Live in code, so it evolves with the apps Collaboration tool for developer and designer +
10. Sample Living Style Guide https://seek-oss.github.io/seek-style-guide/
11. Sample Living Style Guide https://polaris.shopify.com/
12. Sample Living Style Guide https://primer.style/css
13. Sample Living Style Guide http://styleguides.io/
14. Living Style Guide Mark Dalgleish - design system journey At SEEK, we’ve been working on our living style guide for over a year now, with an ever-growing suite of React components. As you might expect, this has introduced a radical shift in how we think about visual design. Suddenly, we had a single source of truth, in code, easily installable, defining how our brand appears across dozens of disparate projects.
15. Living Style Guide Diana Mounter - design system at Github Design systems have become core to the way we design and build at GitHub. Since 2011 GitHub designers have documented UI patterns and shared common styles. In 2012, CSS and other assets were packaged up into a Ruby Gem for use in GitHub websites — this package was named Primer.
16. Style Guide Driven Development - SGDD "We are not designing pages, we are designing systems of components." - Stephen Hay - SGDD is about developing the components and documenting them into Living Style Guide from the earliest stages of Front End development. developing components Atom & Molecules documenting Storybook implementing Applications
17. Atomic Design "Atomic design is methodology for creating design systems” ~ Brad Frost
18. Atomic Design
19. Recap At this point we already know about Gap between designer and developer Evolution of style guide Living Style Guide using Storybook Atomic Design
20. SGDD Process SGDD provides a playground and a framework for development, isolated from the application’s implementation. This isolation encourages creating components in an abstract way, making them more reusable.
21. Discover At this stage the LSG serves as a reference when creating designs. Designer would refer to LSG and considering to reusing or extending the atoms components or create the new atom component.
22. Abstract Once the designs are ready to be implemented, designers and developers can use the style guide to discuss how the new features should be broken down into separate components. These is where activity like recomposing the molecules and introducing new component variants happened.
23. Documenting & Integration Documenting This is the process where the component development started. With SGDD in mind the development is all about creating the component and documenting it in LSG. End of results, the LSG becomes both a framework and a playground. Integration Application developer (library implementor) uses the the atoms and molecules components by referring the LSG for code sample and implementation guide to come up with templates and pages. Its "plug and play" game.
24. Live Demo Setup Angular Storybook - walkthrough tutorial Create a Component Create a Story Create a multiple applications Implement components
25. Summary Serves as the Storefront that showcases all of the design system’s ingredients It helps everyone visualise the eventual outcome Single truth source for design and components It helps everyone integrate the style guide into their workflows The style guide can serve as a road map It serves as a marketing and education tool
26. Resources Angular-storybook source code http://https://github.com/abumuawiyah/ng-playground/tree/kljs-sgdd Sample Living Style Guide using Angular-storybook http://https://ngdesignsystem.netlify.com