Red Hat needed a new pattern library that would be flexible enough to integrate into our current Drupal 7 site, yet powerful enough to build future D7, D8 and other Red Hat branded sites. This pattern library would create a consistent, brand approved, look across all of our web properties, and become a common UI development platform for Designers, UX, Devs and Project managers. In this case study we’ll explain our architectural approach to deliver dozens of tightly packaged components to Redhat.com and other web properties through a variety of distribution methods.

2. Redhat.com: An Architectural
Case Study
Ryan Wilson
Micah Godbolt
Shawn Iwinski

3. redhat.com
UX
DEV
QA
BA
Height of Development
4 large groups of people creating one website…

4. • Manual
processes
• Lack of
reusability
• Inconsistent
designs
UX
• Waiting on
UX for
markup, css,
and js
DEV
• Test after dev
implementation
• No target to
test against
QA
• Review after
implementation
• Refer to
outdated
artifacts
BA
We all faced challenges

5. Front-end
Styleguide Driven Development
Our solution
Back-end

7. • A sprint ahead
• Better handoffs to our Devs
• Improved maintainability
UX
Styleguide Driven Development
Creating a relevant design system
Build Process and Pattern Library

8. DEV
Styleguide Driven Development
Creating a relevant design system
• Faster UX hand-off to a backend developer
• Implementation Instructions
Improved Implementation

9. QA
Styleguide Driven Development
Creating a relevant design system
• A target to test against
• Cross browser testing sooner
• Earlier exposure to patterns
Visual Guidelines

10. BA
Styleguide Driven Development
Creating a relevant design system
• Able to review features before dev implements
• Full page prototypes in the browser
Reliable Reference

11. “[The Styleguide] helped conversations
with product owner and clarified
implementation approach”
- Jose Maturino, Business Analyst
Styleguide Driven Development
Now we’re getting comments like this!
“WebUX was pretty easy to develop on
for a newbie”
- Andrew Riley, Drupal Developer

12. Styleguide Driven Development
The effect of our solution
● Always up-to-date representation of our UI
● Easily maintainable
● Improved unit testing
● Better communication between designers, developers and
customers.

13. Micah Godbolt
Phase2

14. BREAKING THINGS DOWN
The Chemistry of a Living Design System

17. ROAD RUNNER RULES
Rules to live and die by
Immutable rules focused on things we
always, never or only do.
● A Layout never affect components
● A Component never does the layout’s
job (Background, width, gutters)
● Elements only have a single class, all
styles come from that class.

18. SINGLE SELECTOR APPROACH
OOCSS is an Anti-pattern?

19. SINGLE SELECTOR APPROACH
Single Responsibility Principle

20. SINGLE SELECTOR APPROACH
Single Responsibility Principle

21. SINGLE SELECTOR APPROACH
Single Source of Truth

22. OPT-IN MODIFIERS
I’m Nothing Without Class

25. OPT-IN CONTEXTS
Nothing Taken Out of Context

29. SEMANTIC GRID

30. NON SEMANTIC GRID

31. SEMANTIC GRID

36. FLEXBOX ENHANCED GRID
A Magical Combination

40. MODULAR DESIGN
Layouts and Components

47. RAPID PROTOTYPING

48. RAPID PROTOTYPING
The Old System
Themeing
Development
Design
WireframeRequirements

49. RAPID PROTOTYPING
The New System
DevelopmentPrototypeRequirements

51. Shawn Iwinski
Red Hat

52. WebUX Drupal Integration
Current implementation
● Red Hat internal “contrib” module
● Bower
● Per component theming / templates
● Drupal sharable component definitions
● Views UI integration

53. WebUX Drupal Integration Issues
Current implementation
● Duplication
● WebUX changes

54. WebUX Drupal Integration TNG
● WebUX: JSON schema defined components
● WebUX: Twig templates
The Next Generation

55. ● UX defined
● Drupal module
● WebUX updates
WebUX Drupal Integration Benefits
● Faster feature
development
● Increased code quality

56. Ryan Wilson
www.drupal.org/u/ryanwilson
Micah Godbolt
www.drupal.org/u/micahgodbolt
@micahgodbolt
Shawn Iwinski
www.drupal.org/u/siwinski
www.linkedin.com/in/siwinski
plus.google.com/+ShawnIwinski
github.com/siwinski

57. WHAT DID YOU THINK?
EVAULATE THIS SESSION - LOSANGELES2015.DRUPAL.ORG/SCHEDULE
THANK YOU!