DrupalCon Latin America 2015: Choosing the right frontend style guide workflow for your project
Speakers: Aaron Stanush
Frontend style guides (or pattern libraries) have exploded onto to the scene of web development. You can now publicly view the inner workings CSS and documentation of popular websites and web apps such as Starbucks, Github, Yelp, Disqus, and the BBC.
How were these guides built? Who uses them? And most importantly, how did they choose which approach to take?
In this session we’ll first take a look at the landscape of methods, including pattern libraries, Atomic Design, and Style Guide Driven Development (SDD).
Finding your workflow
Then, we’ll talk about how you can adapt these approaches to fit your (or your team’s) desired workflow. There are two broad workflows we’ll look at, discussing the pros and cons of each, as well as what tools are out there to use:
Outside Drupal
This approach involves creating the initial style guide and prototypes before even starting on the Drupal environment. This allows the team to get ahead of the UX and design work while using basic HTML/CSS to rapidly iterate ideas. These artifacts serve as the blueprints and foundation for the site and can be leveraged throughout the project.
Inside Drupal
This method uses the Drupal development environment itself as a way to prototype and style pages. The style guide can also be automatically generated from the development code. This requires an advanced knowledge of the “design in the browser” philosophy, but can save time and effort in the long run.
What you’ll learn
An introduction to style guides and pattern libraries
The philosophy behind Style Guide Driven Development
Platforms for creating style guides and prototypes
Tools for automating your style guide documentation
How to adapt these approaches and tools to fit your workflow
How the process fits with the roles your team members
Frontend style guides (or pattern libraries) have exploded onto to the scene of web development. You can now publicly view the inner workings CSS and documentation of popular websites and web apps such as Starbucks, Github, Yelp, Disqus, and the BBC.
How were these guides built? Who uses them? And most importantly, how did they choose which approach to take?
In this session we’ll first take a look at the landscape of methods, including pattern libraries, Atomic Design, and Style Guide Driven Development (SDD).
Finding your workflow
Then, we’ll talk about how you can adapt these approaches to fit your (or your team’s) desired workflow. There are two broad workflows we’ll look at, discussing the pros and cons of each, as well as what tools are out there to use:
Outside Drupal
This approach involves creating the initial style guide and prototypes before even starting on the Drupal environment. This allows the team to get ahead of the UX and design work while using basic HTML/CSS to rapidly iterate ideas. These artifacts serve as the blueprints and foundation for the site and can be leveraged throughout the project.
Inside Drupal
This method uses the Drupal development environment itself as a way to prototype and style pages. The style guide can also be automatically generated from the development code. This requires an advanced knowledge of the “design in the browser” philosophy, but can save time and effort in the long run.
What you’ll learn
An introduction to style guides and pattern libraries
The philosophy behind Style Guide Driven Development
Platforms for creating style guides and prototypes
Tools for automating your style guide documentation
How to adapt these approaches and tools to fit your workflow
How the process fits with the roles your team members