The Why and What of Pattern Lab

Responsive design is forcing us to reevaluate our design and development practices. It's also forcing us to rethink how we communicate with our clients and what a project's deliverables might be.
…

Responsive design is forcing us to reevaluate our design and development practices. It's also forcing us to rethink how we communicate with our clients and what a project's deliverables might be. Pattern Lab helps bridge the gap by providing one tool that allows for the creation of modular systems as well as gives clients the tool review the work in the place it's going to be used: the browser.

This talk is a deep dive into how Pattern Lab is organized and how to take advantage of it.

26.
installation: generate for the ﬁrst time
php
core/builder.php
-­‐g
just in case you’re a fan of the command line, on linux or on windows.
php
core/builder.php
-­‐-­‐help will show you all of your options.

28.
installation: review source/
the only required directories are _data/ & _patterns/. otherwise,
you can change source/ as much as you want. this is what we mean
about making your own Bootstrap. you can even use Bootstrap.

43.
working with patterns: intro
Each pattern describes a problem that occurs
over and over again in our environment, and
then describes the core of the solution to
that problem, in such a way that you can use
this solution a million times over, without
ever doing it the same way twice.
— Christopher Alexander

44.
working with patterns: intro
Pattern Lab provides a way to
help you develop, describe, &
stitch together mark-up and
style patterns.

45.
Pattern Lab uses conventions
so that the ﬁlesystem acts as
its database.
working with patterns: intro

46.
working with patterns: organization
all ﬁle paths in this presentation are located under source/.
00-­‐organisms/01-­‐global/00-­‐header.mustache

47.
00-­‐organisms/01-­‐global/00-­‐header.mustache
working with patterns: organization
patternType
the digits are optional and are purely for ordering the navigation.

48.
00-­‐organisms/01-­‐global/00-­‐header.mustache
working with patterns: organization
the digits are optional and are purely for ordering the navigation.
patternSubtype

49.
00-­‐organisms/01-­‐global/00-­‐header.mustache
working with patterns: organization
the digits are optional and are purely for ordering the navigation.
pattern

50.
_00-­‐header.mustache
working with patterns: hiding patterns
the underscore hides a pattern in the navigation but the
pattern is still available for inclusion in other patterns.

51.
00-­‐header@inreview.mustache
working with patterns: pattern states
anything after the “@” gets added as a class to the
pattern’s navigation element. “inprogress,” “inreview,” and
“complete” propagate to downstream patterns.

77.
working with patterns: using templates
Use templates to wireframe
and provide a low-ﬁdelity
version of ﬁnal pages. They’re
all about layout. Template
mark-up can and should
include sections that might not
show by default. After atoms,
templates will be the other
thing you show clients.

80.
working with patterns: common header & footer
00-­‐atoms/00-­‐meta/_00-­‐header.mustache
00-­‐atoms/00-­‐meta/_01-­‐footer.mustache
if these patterns exist Pattern Lab automatically includes them as
your header and footer.

85.
working with patterns: page example
{{>
templates-­‐homepage
}}
pages should simply include/reference templates. the majority of the power
of a page is in its associated JSON ﬁle and by using pseudo-patterns.