Pattern Library & Style Guide Examples

This pattern library was inspired by many other pattern libraries and styleguides that are generously available to the public. While no one example met all our needs, there were many useful ideas, layouts, and processes that informed and will continue to inspire the development of this tool. The following example represent some of the most influential and interesting resources used when creating this site.

Pattern Libraries / UI Toolkits

Bootstrap

The goal with ChooseUX is to create something like bootstrap but specific to Choose Energy. Long term we want to be able to package and distribute the global styles the way bootstrap does.

MailChimp pattern library

One of the best examples of a clean, easy to read pattern library with code examples to make implementation details clear.

Rizzo - Lonely Planet's pattern library

Lonely Planet's pattern library is particularly strong when it comes to showing examples of UI components and their variations.

Primer - Githib’s CSS toolkit

Another really nice simple and easy to use pattern library that also includes coding guidelines. Their icon guide is really well done and user friendly: https://octicons.github.com/

Lightning Design - Salesforce

Lighting Design is a single point of reference for anyone wanting to create UIs consistent with Salesforce's design language. It includes resources and tools for both designers and developers

Rock Hammer Pattern Library

Some good examples of baseline typography patterns

Bourbon Refills

Some simply designed components. A particularly good example of the difference between and column-based and flexbox-based grid.

Style Guides

Google Material Design

One of the best examples of a styleguide that covers not only the rules of how use design elements, but the philosophy and rational behind those rules.

Apple Human Interface Guideline

Apple’s resource for UI designers - very thorough in explaining the rationale behind their UI guidelines

Mozilla Styleguide

Good examples of how to cover topics like branding guidelines for outside partners including resources like downloadable logos, color swatches, etc.

Yelp Styleguide

Somewhere between a pattern library and a style guide, but very comprehensive

BBC

Another good example of describing the philosophy of the designs along with examples of how to use elements.

Other Resources

Pattern Lab

Example tool for creating pattern libraries from atomic design elements - probably not the tool we want, but it has some great resources & documentation around pattern libraries in general. Also look at the demo for an interesting idea of how to show how elements work at different breakpoints: http://demo.patternlab.io/

Article about atomic design principles: http://blog.invisionapp.com/atomic-design-principles/

This is Responsive Patterns

Examples of common UI patterns and how they work across breakpoints - a good resource for thinking about how we build our designs to fit various screen sizes

Axure Flat UI Pattern Library

Another comprehensive library of common UI patterns / elements to use as a reference

CSS Animation

While we will probably never use much animation, this has good examples of a whole lot of different kinds of quick animations and could be a good resource when we’re trying to think of ways to incorporate whimsy.

Modular Scale

Tool for viewing all sorts of modular scales - a great way of visualizing common sizing ratios