Style guides

Introduction

What is a style guide?

  • A living document of code, which details all the various elements and coded modules of your site or application
     
  • Also called a "Pattern library"
     
  • It comprises of all the details as how to include different elements in your code

What are the benefits?

  • Will help to build new sections and pages faster
     
  • A way to standardise HTML/CSS
     
  • Adaptation made easy for new team members
     
  • Effective reduction of documentation errors
     
  • Keeps the organisation’s brand identity alive

How to start?

Assemble basic elements

  • Colour palette
     
  • Grid layout system
     
  • Typography
    • headers
    • body text

Add in patterns

  • Buttons
     
  • Link styles
     
  • Lists
     
  • Images
     
  • Icons
     
  • Videos

Examples

GitHub CSS

Google HTML/CSS

Idomatic CSS

CSS Wizardry

WordPress

Lightning Design System

Atomic Design

Buffer

Modzilla

Yelp

Made with Slides.com