design systems, pattern libraries & wordpress
TRANSCRIPT
Design Systems, Pattern Libraries & WordPress
Jesse James Arnold and Grant Kinney from Exygy
Change is ConstantNew challenges require new tools
Responsive DesignStay flexible.
Our canvas is unknownWe don’t know what the target resolution and screen size are.
We’re not designing pages, we’re designing systems of components.Stephen Hay
ComponentsEach component of an interface needs to be considered independently and then brought together to form any number of layouts.
Micro LayoutsEach unique section of the page had its own rules based content and device context.
Context FreeComponents 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.
Interface Inventory
Be more modularThe 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/
Atomic Design
Design PatternA 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 paletteFont stackIcon library
No more design handoffDesign is a work in progress, it is never handed off to be built.
<html>
<body>
<h1>My Website is Done</h1>
</body>
</html>
Pattern LibraryA place to put all of this stuff.
Team GoalsShould 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.
Pattern Library: Fabricator
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>
SF Dahlia Pattern Library
Pattern Library: FabricatorPros:
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 PainsScaffolding 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 QuicklyFalls 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
MarkupTemplating
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: Submitclasses: 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: Submitclasses: 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: Moleculesblock-columns.php---
title: Basic Contenttext: This basic content makes an interesting point!category: Componentimage_src: http://placehold.it/768x350url: #---<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') ?> <?php get_pattern('molecule', 'block-columns') ?> <?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: ResourcesFabricatorhttp://fbrctr.github.io/
Starter Kit with Fabricator and Foundation 6https://github.com/exygy-design/exygy-patterns-f6
Living Examplehttps://sf-dahlia-pattern-library.herokuapp.com/
WordPress Pluginhttps://github.com/Exygy/wp-pattern-library