Inspired in part by Dan Cederholm's open source theme, Pears. I took the default WordPress theme at the time and created a custom theme to document sample page layouts, along with code samples for the basic elements that are used to create each page in the main site.

    What's in a design pattern?

    • Title
    • Problem (situation)
    • Use When (constraints)
    • Solution
    • Why (rationale)
    • How (to apply)
    • Examples
    • Related Patterns
    • Accessibility
    • Code Samples

    Pattern Library and Style Guide Goals

      Provide Consistency

      • Build a living reference library
      • Favor constraints
      • Encourage more cohesive design
      • Improve maintainability

      Improve Workflow

      • See the design in action
      • Cut out unnecessary steps
      • Provide better deliverables
      • Make life easier and save time

      Raise Awareness

      • Give design and development a voice
      • Crate a shared vocabulary
      • Advocate quality

      Bring It to Life

      • Build it in live real code
      • Show behaviors and interactions
      • Use actual examples
      • Make it comprehensive

      Document Standards

      • Document set standards
      • Educate through standards
      • Include brand, code, design and editorial guidelines

      Drive Participation

      • Encourage contribution
      • Evolve through collaboration
      • Make it accessible

      Watch the Unpredictable

      • Predict the unpredictable
      • Be rigorous, say no!
      • Again, conform to standard


      • Do not neglect the style guide
      • Keep the audience in mind
      • Reduce friction
      • Have a review process


      • Gather the team
      • Ask thought provoking questions
      • Listen to what is needed
      • Organize feedback

      Take visual inventory, Recognize patterns, Identify what to include...

      • Branding
      • Buttons
      • Colors
      • Forms
      • Layout
      • Media
      • Navigation
      • Typography

      Build Incrementally

      • Set a foundation for content: Colors, Layout, Lists, Normalize, Typography
      • Add in theme and components: Alerts, Buttons, Labels, Navigation, Tooltips
      • Round out the specifics: Carousels, Hero, Sidebar, Animations, Sprites