Style guides (a.k.a. pattern libraries, templates)

This is a style guide collection built on top of Alan Palazzolo's 2014 SRCCON note.

"A style guide creates standards and best practices for a system or set of decisions that are otherwise subjective." -- Alan Palazzolo

This is primiraly a style guide collection of digital interfaces, visualizations and interactives.

Examples

This is not an exhaustive list.

News

News interface examples:

• MinnPost styles: CSS and JS framework for data/interactive pieces.
• Dallas Morning News graphics stylebook: Narrative with explicit values on how to make graphics, includes charts and maps; preumably this is for print and web. Also includes a bit about workflow of how graphics are made as well as maps of the building and where different departments are.
• Chicago Tribune style guide: A CSS and JS framework, altered from Bootstrap for the Newsapps team's pieces.
• Knight lab style guide (Blueline): Web interface style guide.
• WNYC style guide: (experimental) Web interface style guide.
• KPCC Style Guide: Looks to be a web interface style guide, but not actually public anywhere.
• BBC Global Experience Language (GEL): A set of interface and copy guidelines for all digital mediums.

News Applications and data visualizations:

• Propublica's nerds guides: A set of narrative best practices for project philosophy, application components, coding, FB/Twitter HTML tagging, and data processing.
• NPR best practices: A set of best practice documents for project workflow, versioning, and coding for the NPR Visuals team. Tied closely to their app-template.
• ONS Styleguide

Non-news

Non-news interface examples:

• GDS Styleguide
• ONS Styleguide
• Article about Eventbrite's style guide: Looks like a CSS and JS framework.
• Google's HTML and CSS style guide: Instructions on how to write CSS and HTML code.
• Starbuck's general web style guide: CSS and JS framework for (probably) general web assets. Does not seem to be downloadable or much info about it.
• Yelp style guide: CSS and JS style framework for whole site.
  • About
• Github CSS style guide: CSS framework for Github itself.
  • Also includes a mobile interface style guide.
• A List Apart style guide: CSS/JS web interface guide.
• Code for America style guide for web properties: CSS/JS web interface guide.
• MailChimp style guide: CSS/JS web interface guide.
• Editorially style guide: CSS/JS web interface guide.
• Apple's Mac App style guide: Desktop application interface design guide.
• Mapbox style guide: Web interface style guide.
• Salesforce style guide: Web interface design guide.
• Lonely Planet style guide: Web interface design guide.
• Reusable prototyping libraries
  • Twitter's Bootstrap: A CSS/JS web interface guide inspired by Twitter.
  • Barebones: A CSS web interface style guide for a minimal design.

News code project templates:

• Tarbell: Python based templating system for publishing web sites.
• NPR's app templates: Python based template for making NPR news apps.
• MinnPost templates: Yeoman based system for generating MinnPost projects.

Code examples:

• NYT Objective-C style guide: Code style guide.
• AirBnB JS style guide: Coding style guides for JS. MinnPost has adopted these.
• Also has a Ruby style guide
• Github style guide: Includes code style guides for CSS, HTML, JS, and Ruby.
• Django Python style guide: Based from PEP8, a more general Python style guide. SMACSS: CSS coding style guide.

Non-news design examples:

• Sunlight Labs Data Visualization guide: CSS-ish guide to data visualization such as charts and maps.
  • What looks to be a CSS/JS implementation of this.
• Best Buy brand identity guide: A set of design guidelines for brand idenitiy management.
• Mozilla style guide: Design and brand style guide for Mozilla and its affiliates.
• Adobe brand guidelines: Specifications and philosophy for design and brand management.
• Government of Alberta, Canada corporate identity: Specifications and philosophy for design and brand management.
• Channel 4 style guide: Specifications and philosophy for design and brand management.
• MailChimp branding: Brand resources and guide.

Other non-news examples:

• Gov.uk service design manual: Guides and instructions on how to design a service.

References

Helpful links:

• A List Apart "Creating Style Guides"
• A List Apart "Getting Started with Pattern Libraries"
• Clearleft Pattern Portfolios
• Style guide generators
• List of various style guides
• List of brand guides
• FindGuideline.es: Search for brand assets from different organizations.
• Github search for "style" for only orgs listed in CAR-Code.

Examples

Let's get the creative juices flowing and look at some examples.

• AP Stylebook
  • Copy and grammar style guide example
  • Standard for American journalism.
  • Not open.
• BBC news style guide
  • Copy and grammar style guide example that is free and public.
  • Cross between dictionary and style guidelines.
• Voice and Tone (MailChimp)
  • Tone example.
  • Not sure why this is a separate site when content is pretty specific to MailChimp.
  • Talks about user feelings and reasoning for responses.
  • Uses examples.
• The Dallas Morning News Graphics Stylebook
  • Example of print-ish design guide.
  • Focuses on graphics, charts, maps, etc.
  • Exact specifications for design and layout of graphics.
  • Even has map of the building to help person get oriented.
• Chicago Tribunes NewsApps style guide
  • Web interface example.
  • Based/forked from Bootstrap.
  • Stylings for near all HTML elements.
  • Reusable components.
  • Code-based.
• Bootstrap
  • Web interface example.
  • Meant for general re-use.
• NYT Objective-C Style Guide
  • Code style guide example.
• NPR Visuals' Best Practices
  • Technical project management guide.
  • Specifics about project structure, versioning, and coding techniques.
  • Ties to their template.
• Tarbell
  • Application/templating system for publishing lightweight web apps.
  • Makes a lot of decisions for you.