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
-
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
-
Tables
This document describes and demonstrates the different types of tables used across the site.
Show Sections Hide Sections
-
Icons
This document describes and demonstrates how to use icons.
Show Sections Hide Sections
-
Layout
This document describes and demonstrates the different layout systems used across the site.
-
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
-
Heros
This document describes and demonstrates the different type of "heros" used across the site.
-
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.