Master Style Guide

Grain Bin Solutions

View CSS File

The style guide is the set typography for the site. This Style Guide will help keep consistency throughout the site and any other designs involving typography for the client. This is just an example html file. This actuall css syle of this page is located in this style guide folder. You're welcome to make any changes to the master Style Guide that will help make it more useful. Add, correct or remove any feilds or styles if neccessary.

colors

#EEE
#DDD
#CCC
#AAA
#999
#666
#333
#222
#000

Typography

Light Text - .light
Normal Text
Strong Text - strong
Italic Text - em
Ultrabold Text - .ultrabold

Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Link Styles

Paragraph Styles

This is a regular paragraph. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

This is an callout paragraph. Phasellus rutrum bibendum justo nec cursus. Maecenas posuere eros sit amet lorem volutpat varius. Sed ornare tincidunt ligula eu hendrerit. Morbi bibendum tellus vel nisl hendrerit blandit. Maecenas convallis, diam non tincidunt dignissim, nibh nisl venenatis purus, ac auctor risus diam id nibh.

List Styles

  1. OL Example
  2. OL Example
  3. OL Example
    1. Nested OL Example
    2. Nested OL Example
    3. Nested OL Example
  4. OL Example
  5. OL Example
  6. OL Example
Definition Term
Definition Description
Definition Description
How to make websites
CSS
HTML
Definition Term
Definition Description
Defintion Description

Long List

Blockquote Styles

This is the Default Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the left float Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the right float Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HR Styles





Inputs / Text Area

White - for on non-white bgs

Gray - for On white bgs

Buttons

Button Style 2

Sidebars

Select Field




Images

corgi!Shadow Bottom
corgi!3px white border with slight shadow
corgi!rounded corners, border-left w/c color