Pattern Lab
Pattern Lab

  • Getting Started
    • Getting Started
      • Installing Pattern Lab
      • Editing Pattern Lab Source Files
      • Editing the Configuration Options
    • Working with Patterns
      • Overview of Patterns
      • Adding New Patterns
      • Reorganizing Patterns
      • Including Patterns
      • Pattern Lab's Special Query String Variables
      • Documenting Patterns
      • Managing Pattern Assets
      • Modifying the Pattern Header & Footer
      • Using Pseudo-Patterns
      • Using Pattern Parameters
      • Using Pattern States
      • Hiding Patterns in the Navigation
      • Adding Annotations
      • Converting Old Patterns
    • Working with Data
      • Linking to Patterns with Pattern Lab's Default `link` Variable
      • Creating Pattern-specific Values
      • Overview of Data
      • Introduction to JSON & Mustache Variables
    • Advanced
      • Template Language and PatternEngines
      • Starterkits
      • Modifying Pattern Lab's Navigation
      • Multi browser & Multi device Testing with Page Follow
      • Keyboard Shortcuts
      • Integration with Grunt/Gulp
      • Integration with Compass
      • Generating CSS
      • Exporting Patterns
      • Overview of Pattern Lab's Ecosystem
  • Demos
  • Support
  • Resources
  • On Github

Pattern Lab Demos

In the wild

  1. Brad Frost’s website PL

    Brad Frost’s website PL

    Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.

  2. Bolt Design System

    Bolt Design System

    The Bolt Design System provides robust Twig and Web Component-powered UI components, reusable visual styles, and powerful tooling to help developers, designers, and content authors build, maintain, and scale best of class digital experiences.

Starterkits

  1. Twig Base

    Twig Base

    The Base StarterKit for Twig is meant to be used as a near-blank starting point for Twig-based projects in Pattern Lab.

  2. Pattern Lab 2 Mustache Demo

    Pattern Lab 2 Mustache Demo

    Pattern Lab 1 projects should work with minimal changes in Pattern Lab 2.

  3. Handlebars Vanilla Starter Kit

    Handlebars Vanilla Starter Kit

    The Vanilla StarterKit for Handlebars is meant to be used as a demonstration of a Handlebars-based project in Pattern Lab.

  4. Handlebars Demo Starter Kit

    Handlebars Demo Starter Kit

    The Demo StarterKit for Handlebars is meant to be used as a demonstration of a Handlebars-based project in Pattern Lab.

  5. Handlebars Base Starter Kit

    Handlebars Base Starter Kit

    The StarterKit for Handlebars is meant to be used as a demonstration of a Handlebars-based project in Pattern Lab.

  • Resources
  • Updates
  • Demos
  • On Github

This site is powered by Netlify