Styleguide Driven Development (SDD) is a practice that encourages the separation of UX, Design & Frontend from Backend concerns. This is achieved by developing UI separately in a Living Styleguide.
Pattern Lab is a SDD technology, that helps to build thoughtful, pattern-driven user interfaces using atomic design principles.
Within this talk, you will get an insight on Styleguide Driven Development by using Pattern Lab in a Drupal 8 environment. You'll learn about the benefits of SDD, the tools we use at drunomics and how to easily build a website with direct integration of the Styleguide as a basis for the website.
By using Pattern Lab with Twig templates for the Styleguide, we at drunomics have already created most of the templates we need in a Drupal environment. Our examples from real projects will complement the talk.
Universal Goals of Styleguide Driven Development:
-
Properly factor the frontend codebase so future changes are straightforward and decoupled from each other.
-
Build a proper documentation of the website design, which is always up-to-date.
-
Enable all members of the team to pair on its creation, maintenance and evolution.
The benefit of this approach is to separate the UI and Drupal backend tasks, so they don't rely on each other. It allows teams to iterate fast on prototypes and designs without having to make changes to the Drupal backend. With careful planning they should play nicely together. On the other hand the developer of a Styleguide in a Drupal 8 environment has to know about the technical possibilities in the Backend to adjust the styles properly to the project needs.
Since the documentation process is often a weak spot for modern web teams, a Living Styleguide and its mandatory constant development is a strong basis for the whole project, even after the project has finished.