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.
This is not an exhaustive list.
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 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.
- 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.
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.
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.