Style Guide

This document is a reference for designers and content creators on how to design and implement styles for American Meadows and High Country Gardens.

This document assumes you have a basic understanding of HTML, no experience with JavaScript or CSS is required. If you do not have a basic understanding of HTML I would recomend taking a few hours and teaching yourself HTML, W3 Schools offers a comprehensive tutorial on HTML that is well worth the few hours it will take to complete.

Topics

The folowing topics will be covered in this style guide:

• Colors

  This document describes and demonstrates the colors used across the site.

  Show Sections Hide Sections

  • Using the Colors
    • Background Colors
    • Text Colors
  • Colors By Name
  • Colors By Usage
  • Neutrals
• Typography

  This document describes and demonstrates the different types of typography (headers and paragraphs) used across the site.

  Show Sections Hide Sections

  • Headings
  • Paragraphs
  • Links
    • External Links
    • Email and PDF Links
  • Text Alignment
  • Tooltips
• Lists

  This document describes and demonstrates the different types of lists (number and bulleted) used across the site.

  Show Sections Hide Sections

  • Unordered (Bulleted) Lists
  • Ordered (Numbered) Lists
  • Styled Lists
    • Showy Lists
    • Pretty Lists
  • Description Lists
    • Pretty Description Lists
• Images

  This document describes and demonstrates how to use images.

  Show Sections Hide Sections

  • Inserting an Image
  • Images with Captions
  • Floating Images
• Quotes

  This document describes and demonstrates how to use quotes.

  Show Sections Hide Sections

  • Block Quotes
    • Citations
    • Floating Block Quotes
  • Testimonials
• Tables

  This document describes and demonstrates the different types of tables used across the site.

  Show Sections Hide Sections

  • Headers on Top
  • Headers on Left
• Icons

  This document describes and demonstrates how to use icons.

  Show Sections Hide Sections

  • Font Awesome
  • Custom Icons
    • Requesting a Custom Icon
• Layout

  This document describes and demonstrates the different layout systems used across the site.

  Show Sections Hide Sections

  • 12 Column Grid System
    • Responsive 12 Column Grid System
  • Columns
    • Columns Horizontal Order
    • Columns Vertical Order
    • Responsive Columns
  • Flexgrid
    • Flex Values
    • Responsive Flexgrid
    • Flexgrid Rows
    • Flexgrid Rows Flex Values
  • Center Contents
  • Floats
  • Aside
• Buttons

  This document describes and demonstrates this different buttons used across the site.

  Show Sections Hide Sections

  • Basic Buttons
  • Button Colors
  • Button Styles
    • Box Buttons
    • Ghost Buttons
  • Button Sizes
• Inputs

  This document describes and demonstrates the different input fields used across the site.

  Show Sections Hide Sections

  • Text Inputs
  • Selects
    • Mutli-Selects
  • Radios and Checkboxes
• Cards

  This document describes and demonstrates the different types of "cards" used across the site.

  Show Sections Hide Sections

  • Basic Cards
    • Card with a Header
  • Category Cards
    • Category Cards with Right Image
  • Shop Cards
  • Photo Cards
• Breakout

  This document describes and demonstrates how to make content "breakout" from the page container.

  Show Sections Hide Sections

  • What is a page breakout?
  • Breakout Example
• Heros

  This document describes and demonstrates the different type of "heros" used across the site.

  Show Sections Hide Sections

  • Hero #1
  • Hero #2
• Photo Link Slider

  This document describes and demonstrates how to use the "Photo Link Slider".

• Banners

  This document describes and demonstrates how to create and modify the promotional banners.

Templates

The following links lead pages with code snippets that can easily be copied, pasted and modified to create complex content.

• 3 Shop Cards

  This code snippet uses the Responsive 12 Column Grid System to aligns 3 "Shop Cards" horizontally.

• Photo Card Columns

  This code snippet uses the Responsive 12 Column Grid System to align "Photo Cards" horizontally with some text content.

• Category Card Columns

  This code snippet uses the Responsive 12 Column Grid System to align "Category Cards" horizontally with some text content.

• Photo Link Slider with Content

  This code snippet uses the Responsive 12 Column Grid System to align the "Photo Link Slider" horizontally with some text content.