Style Guide Driven Development

Style Guide Driven Development

3 minutes lightning talk with Azizi the series

861e71f9f52486eb8bba75261a923004?s=128

Azizi Yazit

July 14, 2020
Tweet

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