design systems, pattern libraries & wordpress

Download Design Systems, Pattern Libraries & WordPress

Post on 18-Feb-2017




1 download

Embed Size (px)


  • 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 dont know what the target resolution and screen size are.

  • Were not designing pages, were 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.





  • 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





  • 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.


  • 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.

    My Website is Done

  • 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


    components structures


    materials atoms molecules organism

  • Fabricator: Documentation

    ---notes: | These are notes written in `markdown`---My Component

  • Fabricator: Data


    About Us: - About Us - Careers - Media Center - Legal

    {{#each home.links}}

    {{#each this}} {{this}} {{/each}}{{/each}}

    About Us


    Media Center


  • 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


    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.

    (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


  • 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---

  • wp-pattern-library: Molecules


  • wp-pattern-library: Moleculesblock-columns.php---

    title: Basic Contenttext: This basic content makes an interesting point!category: Componentimage_src: #---

  • wp-pattern-library: Organisms


  • wp-pattern-library: Code Reuse

    Call patterns from within WordPress templates: example post loop

  • 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

  • Pattern Library: ResourcesFabricator

    Starter Kit with Fabricator and Foundation 6

    Living Example

    WordPress Plugin