Creating a Style Guide

Kevin Flanagan
Jan152019

There is never a better time for defining a style guide for a website than during a re-design of that very site. When an organization is updating their website for a new look or it is migrating the site to a new platform or version of a system for their site, then they have a wealth of content that has already been collected, but its organization into categories, content types, and definitions of aesthetics may have become a little clumsy.

But fear not! Since the content already exists, there isn't a sense of abstraction with what is being defined in terms of style. The mistakes of the past can be erased and the style of new system will have a crisp sense of organization and meanings to specific colors, and font sizes can be defined with specific meanings.  When a website is already built on top of a set of standards like Bootstrap, the opportunity for defining aesthetic styles is also 'bootstrapped' because meanings have already been established to things like 'calls to action' and various button type for various functional categories like "Editing Content" and "Alerts to Readers"  are already defined.

Format

A style guide needs to be accessible to the content contributors of a system, and to that end, there is no better place for hosting it than right within the very system that the guide is being defined for.

The style guide will be created as an online "Book" within Drupal.  Since Drupal Books already have an established hierarchy to the content, by relating nodes to chapters, the book content type and a set of view displays for displaying the content will be used for hosting it.

Normal text columns should never be wider than 6 inches on a display screen. Given a standard font size of 1em (17px at normal) this equates to roughly 90 -100 characters per line (cpl) on a desktop and tablet screen and roughly 45 - 50 cpl on a mobile phone.  

 

Chapters For The Style Guide

  1. Typography
    • Unit measurements (px, vw, em, and rem)
    • HTML Header Hierarchy
    • Capitalization Rules on Titles and Phrases
    • Definitions of CSS styles that apply to various content
    • Fonts and Font Families, including where a font's foundry and licensing is
    • Paragraph widths: target between 90 -100 characters per line on a desktop and 
  2. Colors
    • base and theme colors within the guide
      • Based off of the corporate branding of the site
    • Define backgrounds and contrasting colors for text that sit atop of the backgrounds
  3. Spec References
  4. Links
    • and parts of sentences that are used as links
    • The use of 'visited' pseudo attributes for various link types
    • social network buttons
  5. Control and Navigation Buttons
    • Call to Action Links
      • As buttons
      • As images/wells (islands)
    • Interactive Hover Effects
      • On Picture and Image Inks
      • "touch" states
        • visit / focus / hover
      •  
  6. Menu Navigator and secondary navigation
    • Media Breakpoint considerations
      • keep the number of items manageable so that navigation can be interpreted easily n mobile as well as desktop and wider displays.
  7. Forms
    • Types
      • Content type form formatting for internal content editors
      • Entity and webform styles for use with the general audience of the website
    • Controls
      • Radio Buttons
      • Checkboxes
      • Text Fields and Select Boxes
      • Save and Close
    • Eliminate other links on the page that are not pertinent to saving or entering information to a form
    • Use of modals for retrieving links that are pertinent to form help.
  8. Image sizes and standards
    • logo sizes
    • icon sizes and standards
      • considerations on employing font-awsome for standardizing navigation icons
  9. Graphics formats (jpg, png, svg, and compression to more efficient formats like .wbmp and .webp)
  10. PDF generations
    •  
  11. Use of standard Bootstrap CSS styles for backgrounds
    • "wells" for content
    • "wells" for navigation
  12. Alignment of text and position of important information "wells"
  13. Writing Standards
    • Guidance on Title Length
    • Length of Content Summaries
    • The inclusion of SEO Meta items
    • Effective use of SEO Keyword placement within the content.
    • use of linked references within an article (follow vs. no-follow)