Pattern Portfolios: A Tool for Fast, Consistent Web Development

Karissa Demi
Front-End Web Developer
@karissademi

We are redesigning & reimplementing our website!

alpha.phila.gov

It's hard work.

Our pattern portfolio has made it easier.

What is a Pattern Portfolio?

A collection of markup and styles that describes most every design element in the site and the combinations of those elements.

What is a Pattern Portfolio...

The single most tangible and useful deliverable you can get.

A pattern portfolio is not

a homepage and a content page.

Too often, time and money is spent on deliverables that need to be reworked and reimplemented.

More time spent developing

Never need to guess what color links should be or what font to use on headlines.

Almost immediately, you have consistency between disparate areas of your site.

Our story

At first, we began to tackle Alpha the way we are used to tackling projects.

Jumping head first

We were destined to walk down the same path we already had.

A better approach

  1. We decided upon design principals to guide development.
  2. Research determined that a Pattern Portfolio was what we needed to do the project right.
So, we did what we know best

and sent out an RFP.

We got

Some absolutely amazing proposals

"Philadelphia skyline from south street bridge" by Bmoredlj at English Wikipedia - Transferred from en.wikipedia to Commons by Apollo1758 using CommonsHelper.. Licensed under Public Domain via Commons.

And they all cost money

"We have the skills; let's do it in house."

-Kyle Odum

The Goals

  1. Easy to implement
  2. Easy to update
  3. Robust

1. Easy to Implement

Adding Phila.gov patterns to a project is as simple as pointing to minified CSS and JavaScript files (also jQuery). 

                
                  <link rel="stylesheet" href="//cityofphiladelphia.github.io/patterns/dist/0.11.1/css/patterns.css">
<script src="//cityofphiladelphia.github.io/patterns/dist/0.11.1/js/patterns.min.js"></script>

2. Easy to Update

We use Jekyll in conjunction with GitHub Pages to develop and render the pattern portfolio.

We make changes frequently.

3. Robust

Foundation 5 gives us the flexibility we need for rapid development.

How we got here

(Standing on the shoulders of giants)

Other sites currently using the pattern portfolio

Property Search Application

Online Bill Payment

Application Matrix

Releases

  • Manual process
  • Releases on GitHub serve as our changelog
  • Devs update to the latest version by pointing to the newest release e.g. /patterns/dist/0.11.1/css/patterns.css

Getting notified about changes

  • Watch the GitHub repo for changes.
  • Join a mailing list for important updates and notifications.

Caveats to this approach

  • Manual process for devs to update their sites to the latest version
  • During times of heavy development updates can take slightly longer to get into production

However

This presentation was built using Phila.gov Patterns
(also reveal.js, which rocks)

Get started with Pattern Lab for Jekyll

http://karissademi.github.io/patternlab-jekyll/

Jekyll Collections

  1. Atoms
  2. Molecules
  3. Organisms

You can read more about this vocabulary on the Pattern Lab Website

Example files

  1. Templates
  2. Pages (coming soon)

Atom

Atom

Molecule

Molecule

Organism

Template

Updating Patterns

Updating Patterns

Writing Styles

SCSS gets compiled to _site/css/pattern.css

Creating Releases

  1. Update release variable in _config.yml
  2. Create release folder under dist/
  3. Copy compiled css file to location in dist/
  4. Create release on GitHub

What's next?

Fork this project on GitHub.

Fill it with your own patterns.

Tell us about it!

Questions?