Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Drupalcon 2017: Pattern Language: Pattern Libraries in the Wild

Drupalcon 2017: Pattern Language: Pattern Libraries in the Wild


April 26, 2017

More Decks by dirtystylus

Other Decks in Technology


  1. Descriptive, Not Prescriptive I’m not telling you how to do

    this stuff. But I hope all of this helps.
  2. (And) —We want to reduce complexity —We want to encourage

    consistency —We want to support flexibility
  3. We’ve got CMS structures to enable this: —Matrix (Expression Engine,

    Craft) —ACF FCF (WordPress) —Paragraphs (Drupal)
  4. We’ve got an entire books on ways to do this:

    —Front-End Style Guides by Anna Debenham —Atomic Design by Brad Frost —Modular Web Design by Nathan Curtis
  5. Small Goals If you can talk about specific things using

    the same words, you’ve accomplished something.
  6. …we should start with language, not interfaces1 — Alla Kholmatova

    1 “The Language of Modular Design” by Alla Kholmatova
  7. front-end developers are responsible for bringing the two together.2 —

    Daniel Mall 2 “Content & Display Patterns” by Daniel Mall
  8. Content Patterns —Words —Post-Its / notecards —With lots of tape

    —Helpful question: what does this need to be successful/complete?
  9. Display Patterns —Wires, usually —Low-res or high-res? Up to the

    designer —Combine design snippets with wires to run design/concept exploration on a parallel track
  10. Problems with Doing This in Sequence —All the cards can

    be too abstract —Wires alone hide complexity —People absorb info differently. There’s a chicken/ egg problem.
  11. Work in the middle —Mash your Content and Design Patterns

    together early —Cut up your wireframes, and start stacking similar modules/components. That allows you to start seeing redundancy
  12. —Have an opinion: is this visual pattern appropriate for this

    content type? —Situate your components in a scenario —If your collective team understands the small pattern, they also need to understand its interplay with other patterns —Build “Presets” for your client—can be in your documentation, can be unpublished nodes to clone in the CMS admin
  13. (Possibly) Helpful Translations —Content Pattern == Content Type or Paragraph

    Bundle —Display Pattern == template (tpl/twig) file —Collection == Page/Node/View template
  14. Shortcodes drupal.org/project/shortcode Use this for WYSIWYG stuff that doesn’t have

    a ton of structure. —Pull Quotes —Tables —Lists —Images (L/R/C, Full-bleed)
  15. Paragraphs —drupal.org/project/paragraphs —We came in sideways via Matrix (Expression Engine,

    Craft) and ACF Flexible Content Field (WordPress) —I hate the name, but they are super useful —Structured data, with flexibility
  16. —Flex Grid Row: Full —Flex Grid Row: Half plus Half

    —Flex Grid Row: Half plus Quarter —Flex Grid Row: Quarter plus Half
  17. —Flex Grid Column: Full Width Custom —Flex Grid Column: Full

    Width - Image Left —Flex Grid Column: Full Width - Image Right
  18. —Flex Grid Column: Half Width - Split Image Left —Flex

    Grid Column: Half Width - Split Image Right —Flex Grid Column: Half Width - Image —Flex Grid Column: Half Width - Text —Flex Grid Column: Half Width Video Custom —Flex Grid Column: Half Width Custom —Flex Grid Column: Half Width News and Announcements
  19. Next Steps/Hopes and Dreams —Getting context into the CMS authoring

    environment —Follow Eileen Webb’s work (@webmeadow) on Authoring Experience (AX)
  20. To Recap —Start with language —Work in the middle/narrow the

    abstraction gap —Show things in context —Build in slices—get your client focused practice in their CMS