Style Guide Driven Development

Transcript

1. Style-Guide Driven Development 3 mins @aziziyazit Lighting talk 2

2. Style-guide driven development 4 Phases Design Auditing Component Abstraction Publish

   into Storybook Integrated in Apps 1 2 3 4 Placeholder Button Button Button Primary <a-button(click)=“click”> Button </a-button> Button Button Header A Placeholder A Atoms Button Molecules Header Header A Placeholder Button Button Button Secondary Button

3. Style-guide driven development Design Auditing 1 Logout Logout Button Button

   Primary <a-button(click)=“click”> Button </a-button> Button Button Secondary Auditing Button Primary <a-button(click)=“click”> Button </a-button> Button Secondary Button Button

4. Style-guide driven development Component Abstraction 2 Logout Logout Logout Logout

   development

5. Style-guide driven development Publish to Storybook 3 Logout Logout deployment

   Button Primary <a-button(click)=“click”> Button </a-button> Button Secondary Button Button

6. Style-guide driven development Integrate to Apps 4 integration Button Primary

   <a-button(click)=“click”> Button </a-button> Button Secondary Button Button Button Button Button

7. Component architecture Atomic Design A Button Header Placeholder Header A

   Placeholder Button Atom Molecules Organisms Header A Placeholder Button