Website Parts Kit

Grid System

The grid system is based off of a 16-column grid with 20px gutters.

When columns need to include left and/or right gutters, use the col[X]-inc-left-gutter, col[X]-inc-right-gutter or col[X]-inc-both-gutter classes. If necessary, you can also use the right class on the last column to align that column to the right edge.

4 + Both Gutters
11 + Both Gutters
9 + Both Gutters
6 + Right Gutter
4 + Both Gutters
11 + Both Gutters
8 + Left Gutter
3 + Right Gutter
5 + Right Gutter
10 + Left Gutters (w/ right gutter offset)

Row Spacing

In cases where rows need to be spaced apart from each other, use the available row-spaced class.

4 + Left Gutter
11 + Right Gutter
6 + Left Gutter
10 + Right Gutter
8 + Left Gutter
8 + Right Gutter

Typography

Headings

A standard typographic hierarchy of heading elements for structuring your pages. In cases where the tag is not producing the desired typographic treatment, apply one of the available classes: h3, h4, h5 or h6.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

h2.h4 Heading 2

h2.h5 Heading 2

h2.h6 Heading 2

h3.h4 Heading 3

h3.h5 Heading 3

h3.h6 Heading 3

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.

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

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

Alphabetical 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

Auto 2 Column List

  • International Economics
  • International Relations
  • International Law
  • International Development
  • Strategic Studies
  • Conflict Management
  • Energy & Environment
  • Global Theory and History

Quotes

To include a blockquote, wrap <blockquote> around <p> and <small> tags. Use the <small> element to cite your source and you'll get an en dash &ndash; before it.

Default 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

intro: Used for displaying an introductory paragraph with a slightly larger font size.

small-title: Used for displaying a heading at the same size as default text.

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 a form-stacked class 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 grid sizing 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 light gray style, but a number of size, color and display classes can be applied for different styles.

Button Sizes

Available size classes include small. The default button size is medium. Large button sizes are handled with custom display classes below.

Small Button Size Default Button Size

Button Colors

Available color classes include green and blue. The gray button is the default.

Green Button Gray Button Blue Button

Custom Buttons

Available display classes include round and alt.

Rounded Button Alternate Button Style

Buttons With Icons

To include an icon with a button, use the button-icon-left or the button-icon-right class on the btn element, and insert a <span> with two classes: button-icon and the corresponding icon class. The only exception is the button with the play icon which needs an additional watch class on the btn element.

Washington, D.C. Watch The Story Login Download Share More

Buttons With Icons Only

To display a button with an icon only, follow the same steps above, only substitute the use the button-icon-left or the button-icon-right class with a button-icon-only class on the btn element.

Share Login Download

Text Based Buttons

In cases where a text button displays next to a default button (eg: a cancel text button next to a search button in a form), use the text class on the btn element.

Search Cancel

Alerts & Errors

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

Warning

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.

There was a problem

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

Success!

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

Popovers

Popovers are useful for giving the user a short title and brief description.

News Items

Top News Items

Used for presenting the top news item above a news list. Use the top-article class in conjunction with sizing classes: top-article-240 or top-article-320.

January 5, 2012

Top News Article Title Here

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. Read More

January 5, 2012

Top News Article Title Here

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. 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. 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. Read More

Event Items

Events List

Default styling for listing events on a page. Note: multiple events on the same day are within the same containing element. Use the optional ruled-list class to add dividers between dates.

Tabs

Default Tabs Layout

Default styling for grouping information into sub-sections of content. Use the tabs and default classes together.

Content for “all” tab. 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 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.

Content for “dc” tab. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Content for “bologna” tab. 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. 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.

Content for “nanjing” tab. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Vertical Ruled Tabs

Alternate styling and positioning for tabs. Use the tabs and vertical-ruled classes together.

Content for “dual-degrees” tab. 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 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.

Content for “core-exams” tab. 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 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.

Content for “core-exams” tab. 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 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.

Content for “electives” tab. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vertical Styled Tabs

Alternate styling and positioning for tabs. Use the tabs and vertical-styled classes together.

Content for “core-exams” tab. 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 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.

Content for “core-exams” tab. 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 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.

Content for “core-exams” tab. 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 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.

Content for “international-economics” tab. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Content for “concentration” tab. 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. 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.

Content for “language” tab. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Miscellaneous

Images

To include a drop shadow under an image simply add the shadow class. JavaScript finds images with this class applied, and adds the appropriate markup to produce the shadow.

Links

Several utility classes are available for producing various types of text links. The include more and back.

Utility Classes

A number of utility classes are available and can be used in combination to produce a variety of treatments. These include: no-margin, bottom-rule

no-margin: Used for removing default margins from an element.

bottom-rule: Used for adding a single pixel rule at the bottom of a line of text.