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