Ever tried to maintain a design system across a large site? Collaborated with a front-end designer or front-end developer who wants to design/code in the style guide, but can’t see what impacts that will have on the actual site? Do you use and maintain a single design or brand across multiple sites? Are you building on design frameworks like Bootstrap or Foundation but not sure if you’re “doing it right”?
At the conclusion of this Meetup you will have a better understanding of what it takes to design, build and support more scalable, systemized designs.
In this two part presentation, we’ll first present an overview of pattern libraries, atomic design, and design systems. You’ll understand these important concepts and be prepared to start thinking about how to use them in your work.
We’ll then show you how Exygy uses pattern libraries in a way that empowers our designers and engineers to collaborate effectively and efficiently as a team. We’ll touch on leveraging pattern library specific tools like Fabricator (using Node.js and Handlebars templates), and finish with a solution for creating and maintaining a pattern library within WordPress and integrating it into the templates for your custom WordPress theme.
9. 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.
15. 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.
16. 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
20. 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.
26. 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.
27. 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.
29. 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
37. 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; ?>
38. 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
