Pattern Library workshop - follow-up resources

readme.md

Pattern Library workshop - follow-up resources:

My pattern library talk:

• https://speakerdeck.com/iamkeir/pattern-libraries-how-to-make-your-backend-love-your-frontend
• https://www.youtube.com/watch?v=Ah6_w6aVho8

My pattern library basis to play with:

• https://bitbucket.org/iamkeir/pattern-library-workshop-base

Pattern library frameworks

• https://fractal.build/
• http://patternlab.io/

There are others but none I have used/would recommend.

The holy grail:

• http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

Roll-your-own:

Bare minimum you need:

• include partials
• use variables/data
• have conditionals (if/else)

Task runners

• https://gulpjs.com/
• https://gruntjs.com/

Useful plugins

• https://github.com/gruntjs/grunt-contrib-handlebars
• https://www.npmjs.com/package/grunt-include-replace-and-ifelse

Go find what you need at https://www.npmjs.com/

Examples I've worked on

• http://milupa.iamkeir.com/library/
• http://centrepoint.iamkeir.com/
• http://gromitunleashed.iamkeir.com/
• http://style.bristol.gov.uk/
• http://trim.iamkeir.com/

Big brand examples

• http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
• https://ux.mailchimp.com/patterns
• https://codepen.io/guide
• gov.uk/service-manual
• http://www.bbc.co.uk/gel/

More: http://styleguides.io/