Website Parts Kit

Grid System

The grid system is based off of a 940px wide 16-column grid.

Examples

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
4
4
4
4
8
8

Offsetting Columns

1
14 offset 1
1
13 offset 2
1
12 offset 3
1
11 offset 4
14 offset 6
9 offset 7
8 offset 8

Typography

A standard typographic hierarchy of headings, paragraphs, lists, and other type elements for structuring your pages.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Definition List

Term: You shop Online
Definition: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.

Unordered List

  • Fusce dapibus, tellus ac cursus
  • Tortor mauris condimentum nibh
  • Ut fermentum massa justo sit amet
  • Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
  • Fermentum massa justo sit amet risus
  • Nullam id dolor id nibh ultricies vehicula ut id elit

Ordered List

  1. Fusce dapibus, tellus ac cursus
  2. Tortor mauris condimentum nibh
  3. Ut fermentum massa justo sit amet
  4. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
  5. Fermentum massa justo sit amet risus
  6. Nullam id dolor id nibh ultricies vehicula ut id elit

Quotes

To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source.

Default Blockquote

“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.”

Dr. Julius Hibbert

Alternate Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr. Julius Hibbert

Miscellaneous Text Styles

Supporting text for major section headings. 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 exercitati.

Tables

Used for presenting tabular data.

Always wrap your column headers in a <thead> such that hierarchy is <thead> <tr> <th>.

Similar to the column headers, all your table’s body content should be wrapped in a <tbody> so your hierarchy is <tbody> <tr> <td>.

Default Table
ID First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code
Zebra Striped Table
ID First Name Last Name Language
1 Some One English
2 Joe Sixpack English
3 Stu Dent Code

Forms

All forms are given default styles to present them in a readable and scalable way. Styles are provided for text inputs, select lists, textareas, radio buttons and checkboxes, and buttons.

Example form legend
Some value here
Small snippet of help text
Success!
Example form legend
@
Here's some help text
Example form legend
Note: Labels surround all the options for much larger click areas and a more usable form.
to All times are shown as Pacific Standard Time (GMT -08:00).
Block of help text to describe the field above if need be.

Stacked forms

Add .form-stacked to your form’s HTML and you’ll have labels on top of their fields instead of to their left. This works great if your forms are short or you have two columns of inputs for heavier forms.

Example form legend
Example form legend
Small snippet of help text
Note: Labels surround all the options for much larger click areas and a more usable form.

Form field sizes

Customize any form input, select, or textarea width by adding just a few classes to your markup.

Buttons

As a convention, the <button> element is used within forms while the <a> element is used for links to other pages or files.

All buttons default to a dark gray style, but a number of visual and functional classes can be applied for different styles. These classes include .light, .cta, .inverse, .submit, .success, .alert and .square.

Buttons as button elements

Buttons as a elements

Default Light Primary CTA Inverse Submit Success Alert Square Button

Alerts & Errors

Basic Alerts

One-line messages for highlighting the result of an action. Particularly useful in forms.

×

Holy guacamole! Best check yo self, you’re not looking too good.

×

Oh snap! Change this and that and try again.

×

Well done! You successfully read this alert message.

×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

Block Messages

Multi-line messages which give more information and provide additional actions.

×

Holy guacamole! This is a warning! Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

×

Oh snap! You got an error! Change this and that and try again.

  • Duis mollis est non commodo luctus
  • Nisi erat porttitor ligula
  • Eget lacinia odio sem nec elit
×

Well done! You successfully read this alert message. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

×

Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.

Tooltips

Tooltips are useful for aiding the user and with a quick tip.

Lorem ipsum dolor sit amet top, consectetur adipisicing bottom 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 reprehenderit 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.