Pattern Lab

Christopher Bloom

Phase2

Big Takeaways 

• How Drupal theming works

• Prototyping

• Prototyping with Pattern Lab

• Fitting Pattern Lab together with Drupal

Drupal

makes

<HTML/>

Drupal Theming

 

Linux,

Apache,

PHP,

MySQL

Drupal Theming

Technical Walkthrough:

http://slides.com/illepic/pattern-lab#/

Fundamentally, Drupal does one thing:

Drupal makes HTML

That's it.

But a website is made up of:

• HTML
• CSS
• Javascript
• Images
• Fonts

 

But a website is made up of:

• HTML
• CSS
• Javascript
• Images
• Fonts

 

Drupal makes

But a website is made up of:

• HTML
• CSS
• Javascript
• Images
• Fonts

 

Drupal makes

We're on our own

Drupal development can be complex.

Complexity and friction:

• Apache
• MySQL
• PHP
• VirtualBox
• Vagrant

Frontend development is fast

What if the majority of frontend work could be done before Drupal development started?

Pattern Lab is a tool that allows frontenders to work FAST

Pattern Lab makes assets (css, js, fonts, etc) that Drupal references in Drupal HTML.

Frontend work done first INFORMS and GUIDES backend Drupal development

Solve UX issues literally weeks before features are built in Drupal.

No more waiting on (slower) backend development before UX/frontend work is done

"Stakeholders only care about the frontend."