Design Systems, Pattern Libraries & WordPress

Design Systems, Pattern
Libraries & WordPress
Jesse James Arnold and Grant Kinney from Exygy

Change is Constant
New challenges require new tools

Responsive Design
Stay flexible.

Our canvas is unknown
We don’t know what the target resolution and screen size are.

We’re not designing pages, we’re
designing systems of components.
Stephen Hay

Components
Each component of an interface needs to be considered independently and then brought together to
form any number of layouts.

Micro Layouts
Each unique section of the page had its own rules based content and device context.

Context Free
Components should be able to adapt to any number of layouts and screen sizes.
We like our components to be fluid by default, allowing the
container to define the width as much as possible.

Be more modular
The answer has always been to break your interface into smaller pieces.
header
image
body
block

Building blocks
Object oriented ideas
- Avoid unnecessarily
duplicating styles
- Encourages code reuse
- Easier to track down and
modify the common styles
- Smaller file sizes increase
performance
header
image
body
block
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

Design Pattern
A design pattern is an element of an interface that can solve a specific
design problem and repeats across the product in various contexts with a
variety of content.

Benefits
Visual consistency for users impacts user
experience.
Speeds up workflow between design and
engineering.
Creates a shared language that connects
the whole team.
Buttons

Examples
Easy wins for any team getting
started:
Color palette
Font stack
Icon library

No more design handoff
Design is a work in progress, it is never handed off to be built.
<html>
<body>
<h1>My Website is Done</h1>
</body>
</html>

Pattern Library
A place to put all of this stuff.

Team Goals
Should provide the following team benefits:
1. Allows designers to contribute.
2. Allows product owners to qa and review design in browser.
3. Provides documentation for engineers.

Fabricator: Taxonomy
└── materials
└── components
└── structures
or
└── materials
└── atoms
└── molecules
└── organism

Fabricator: Documentation
---
notes: |
These are notes written in `markdown`
---
<div class="component">My Component</div>

Fabricator: Data
links:
About Us:
- About Us
- Careers
- Media Center
- Legal
{{#each home.links}}
{{#each this}}
<a
href="#">{{this}}</a>
{{/each}}
{{/each}}
<a href="#">About Us</a>
<a href="#">Careers</a>
<a href="#">Media Center</a>
<a href="#">Legal</a>

Pattern Library: Fabricator
Pros:
Allows you to create your own materials logic.
Self documenting HTML components.
Navigation automatically generated.
Can feed it real data to test each component.

Pattern Library: Growing Pains
Scaffolding new features may introduce redundancy or code bloat.
Product wants to share core components of one product pattern library with
other product teams.
Visual design updates may share common elements with a feature in
development and cause disruption.
While importing CSS and JS from pattern library is easy, importing HTML
templates is still copy and paste.

Current Workflow
Design
Pattern
Library
CSS
Engineering WebApp
Extra Work and Quickly
Falls Out of Sync
Reproduce
Markup

Plugin that ports fabricator
functionality to work within a custom
WordPress theme.
Pattern library and application share
the same templates.
https://github.com/Exygy/wp-pattern-library
(this could easily be done with other platforms: AngularJS,
React, Ruby on Rails, Django, Laravel, etc)
New strategy: wp-pattern-library

Better Workflow
Design
Pattern
Library
Engineering WebApp
Markup
Templating

wp-pattern-library: directory structure
wp-content/themes/custom-theme/
pattern-library
- materials
- atoms
- buttons
- button.php
- button-icon.php
- button-sizes.php
- lists
- list-unordered.php
- list-ordered.php
- forms
- checkbox.php
- input-text.php
- radio.php
- paragraph.php
- molecules
- nav-menu.php
- tabs.php
- topbar.php
- organisms
- media-grid.php
- story-grid.php
- tile-grid.php

wp-pattern-library: Atoms
text: Submit
classes: hollow
---
<button class="button <?= esc_attr( $classes ) ?>"><?= $text ?></button>
button.php
<a class="primay button" href="#">So Primary</a>
<a class="hollow button" href="#">So Hollow</a>
<a class="secondary button" href="#">So Secondary</a>
<a class="secondary hollow button" href="#">So Hollow</a>
---
text: Submit
classes: hollow
---
<button class="button <?= esc_attr( $classes ) ?>"><?= $text ?></button>
button-colors.php

wp-pattern-library: Molecules
topbar.php
<div data-sticky-container>
<div
class="top-bar<?php if (is_not_pl()) : ?> data-sticky<?php endif ?>”
data-options="marginTop:0; stickyOn: small;"
style="width:100%"
>
<div class="top-bar-title">
<button class="top-bar-menu-icon" type="button" data-toggle="page">
<?php get_icon('menu') ?>
</button>
<div class="top-bar-name">
<span class="top-bar-name-content">
Custom Theme
</span>
</div>
</div>
...

wp-pattern-library: Molecules
block-columns.php---
title: Basic Content
text: This basic content makes an interesting point!
category: Component
image_src: http://placehold.it/768x350
url: #
---
<div class="block-columns">
<a class="block-columns-link" href="<?= esc_url( $url ) ?>">
<div class="block-column">
<div class="block-column-content">
<header class="block-column-header">
<span class="block-column-category"><?= $category ?></span>
<h3 class="block-column-title"><?= $title ?></h3>
</header>
<p class="block-column-text"><?= $text ?></p>
</div>
</div>
<div class="block-column">
<figure class="block-column-figure">
<img src="<?= esc_attr( $image_src ) ?>">
...

wp-pattern-library: Organisms
block-column-list.php
<section class="block-columns-list">
<?php get_pattern('molecule', 'block-columns') ?>
</section>

wp-pattern-library: Code Reuse
Call patterns from within
WordPress templates:
example post loop
<?php while ( have_posts() ) : the_post(); ?>
<div class="block" data-equalizer-watch>
<a class="block-link" href="<?php the_permalink() ?>">
<figure class="block-figure">
<img src="<?= esc_url( get_the_post_thumbnail_url( null, 'component-thumb' ) ) ?>">
</figure>
<div class="block-content">
<h3 class="block-title <?= esc_attr( Harmony::has_item_been_updated( get_the_ID() ) ?
'is-recent' : '' ) ?>">
<?php the_title() ?>
</h3>
<p class="block-text">
<?= wp_trim_words( get_field('description'), 18, '...' ) ?>
</p>
</div>
</a>
</div>
<?php endwhile; ?>
<?php while ( have_posts() ) : the_post();
get_pattern('molecule', 'block', [
'title' => get_the_title(),
'text' => wp_trim_words( get_field('description'), 18, '...' ),
'image' => get_the_post_thumbnail_url(null, 'component-thumb'),
'link' => get_permalink(),
'classes' => Harmony::has_item_been_updated(get_the_ID()) ? 'is-recent'
: '',
'attrs' => 'data-equalizer-watch'
]);
endwhile; ?>
before
after

wp-pattern-library: Code Reuse
Single source of truth for html
markup.
● Map WordPress data to pattern
variables (title, text, etc)
● All markup updates made from
molecules/block.php
● Application and pattern library
are always up to date
<?php while ( have_posts() ) : the_post();
get_pattern('molecule', 'block', [
'title' => get_the_title(),
'text' => wp_trim_words( get_field('description'), 18, '...' ),
'image' => get_the_post_thumbnail_url(null, 'component-thumb'),
'link' => get_permalink(),
'classes' => Harmony::has_item_been_updated(get_the_ID()) ? 'is-recent'
: '',
'attrs' => 'data-equalizer-watch'
]);
endwhile; ?>

Pattern Library: Resources
Fabricator
http://fbrctr.github.io/
Starter Kit with Fabricator and Foundation 6
https://github.com/exygy-design/exygy-patterns-f6
Living Example
https://sf-dahlia-pattern-library.herokuapp.com/
WordPress Plugin
https://github.com/Exygy/wp-pattern-library

Design Systems, Pattern Libraries & WordPress

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Design Systems, Pattern Libraries & WordPress (20)

Recently uploaded (20)

Design Systems, Pattern Libraries & WordPress