Style Guide

This document is a reference for designers and content creators on how to design and implement styles for 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:

Coding Standards
This document describes standards and best practices reguarding coding.
Show Sections Hide Sections
Colors
This document describes and demonstrates the colors used across the site.
Show Sections Hide Sections
Typography
This document describes and demonstrates the different types of typography (headers and paragraphs) used across the site.
Show Sections Hide Sections
Lists
This document describes and demonstrates the different types of lists (number and bulleted) used across the site.
Show Sections Hide Sections
Images
This document describes and demonstrates how to use images.
Show Sections Hide Sections
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
Buttons
This document describes and demonstrates this different buttons used across the site.
Show Sections Hide Sections
Inputs
This document describes and demonstrates the different input fields used across the site.
Show Sections Hide Sections
Cards
This document describes and demonstrates the different types of "cards" used across the site.
Show Sections Hide Sections
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.

Style Guide

Topics

Templates

Help and Support

More Information

Company Info

Shop AmericanMeadows.com