Pattern Portfolios: A Tool for Fast, Consistent Web Development

View Github Repository Open presentation in a new window

karissademi

See all presentation from karissademi

Pattern Portfolios: A Tool for Fast, Consistent Web Development

0 0

pattern-portfolios

Pattern Portfolios: A Tool for Fast, Consistent Web Development

On Github karissademi / pattern-portfolios

We'll spend about half the time talking about what a pattern portfolio is and why you need one. Then, I show you how you can actually set one up for your project.

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.

b/c you can extrapolate virtually anything you need from it

What is a Pattern Portfolio...

The single most tangible and useful deliverable you can get.

Tell the major university in philadelphia story

Too often, we get deliverables that can't accommodate edge cases, or even new elements... the pattern portfolio helps mitigate those problems.

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.

b/c you can extrapolate virtually anything you need from it

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.

Just over a year ago

Carte blanche

Our story

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

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

Quickly realized we needed a better approach, both for consistency within the alpha product but also for external sites and applications. After some research, we decided the correct approach was to create a pattern portfolio.

A better approach

We decided upon design principals to guide development. 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.

Seriously, the tech scene in Philly is outstanding. We received interest from some of the best tech firms in the area and we were extremely excited.

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

And so does your team. Seriously. If you have a web team working on your website, they can do this.

It's amazing that we have the opportunity to complete both the alpha project, but also the pattern portfolio in house. It's rare that it happens this way, but it brings a commitment and a history to the project that an outside entity simply can't.

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

-Kyle Odum

Easy to implement (for alpha and other products, 3rd party vendors) Easy to update (for the developer's sanity) Robust - (needed a solid framework)

The Goals

Easy to implement Easy to update Robust
Easy to implement (for alpha and other products, 3rd party vendors)

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>
Easy to update (for the developer's sanity)

2. Easy to Update

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

We make changes frequently.

Robust! Based on Foundation 5

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.
In part b/c we are still developing our WP solution along side the development of /patterns

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/

I don't want to spend too much time on what these terms mean, because this is all readily available online. But if you haven't used Jekyll before, a collection is basically a way to organize content. Pattern lab organizes patterns into the following groups:

Jekyll Collections

Atoms Molecules Organisms

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

Example files

Templates 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

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

What's next?

Fork this project on GitHub.

Fill it with your own patterns.

Tell us about it!

Questions?

We'll spend about half the time talking about what a pattern portfolio is and why you need one. Then, I show you how you can actually set one up for your project. Pattern Portfolios: A Tool for Fast, Consistent Web Development Karissa Demi Front-End Web Developer @karissademi