Sideproject

Building things on the web

Front-end and UI style guides

This round-up focuses on how others are building CSS/UI style guides and some best practices. Specifically not grouping in pattern libraries in here (besides MailChimp, which is surface-level patterns) to demonstrate the many uses of these documents.

Anna Debenham has an excellent round-up of what makes up a front-end style guide in her post on 24 ways and her book — here are some more examples to explore.

Examples

Clearleft

  • Baselines. Jeremy Keith, author of HTML5 for Web Designers co-founded a company and their style guide provides meaningful examples to give customers a good indication of how thoughtful their projects are.
    • Includes: header examples, paragraphs, inline text, lists and columns

Drupal

  • Technical. Open-source community gives a wealth of information (too much, probably) for specifics on how the Drupal site is created and how its users should document their contributions.
    • Includes: content style guide, brand, colors, grid and typography.

Github

  • Comprehensive. Github has a Bootstrap-like thoroughness, that's beautifully presented.
    • Includes: buttons, forms, source code, text styling, listings, boxed groups, icons, navigation, behavior, discussion, colors, animations, select menu, blank slate, alerts, pagehead and repo selector

Google

  • Instructional. Gives HTML/CSS structure and direction for a large team. Everything from what to do with leading zeros, .5em instead of 0.5em to avoiding using CSS hacks.
    • Includes: Indentation, trailing whitespace, comments, semantics, quotation marks, class naming, type selectors, shorthand properties, prefixes, hacks, etc.

MailChimp

  • Educational. This is probably the closest thing to a full on pattern library but it's worth putting in because it is so well done.
    • Includes: grid system, typography, form elements, navigation, tables, lists, slats, stats/data, feedback, dialogs, animations

Mozilla

  • Continuity. Mozilla developed Sandstone to unify their brand identity across different web platforms. The key here is the cohesiveness between sites, even though you may have different experiences, there is still a distinct identity.
  • Includes: buttons, colors, forms, grids, tables and lists, typefaces, and examples

Salesforce

  • Visual. This style guide is really aimed towards their partners and customers who are building specifically for their platform. All examples have clear visuals to guide the audience.
  • Includes: Hierarchy, simplicity, alignment, colors, typography, icons and icon font

Wordpress

  • Collaborative.
    • Includes: structure, selectors, properties (property ordering, vendor prefixes), values, media queries, commenting, best practices and related links

Best of best practices

  • Be consistent.
  • The point of having style guidelines is to have a common vocabulary of coding so people can concentrate on what you’re saying rather than on how you’re saying it. We present global style rules here so people know the vocabulary, but local style is also important. If code you add to a file looks drastically different from the existing code around it, it throws readers out of their rhythm when they go to read it. Avoid this.
  • If you are attempting to fix an issue, attempt to remove code before adding more.
  • Magic Numbers are unlucky. These are numbers that are used as quick fixes on a one-off basis. Example: .box { margin-top: 37px }.
  • DOM will change over time, target the element you want to use as opposed to “finding it” through its parents. Example: Use .highlight on the element as opposed to .highlight a (where the selector is on the parent)
  • Know when to use the height property. It should be used when you are including outside elements (such as images). Otherwise use line-height for more flexibility.
Sources:

Get periodic updates from Sideproject.io and news on my upcoming book on modern web design, Design and Conquer. Plus, an early access discount when it launches. No spam ever, I promise.

* indicates required