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
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.
In cases where rows need to be spaced apart from each other, use the available row-spaced
class.
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
.
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 –
before it.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
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.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>
.
ID | First Name | Last Name | Language |
---|---|---|---|
1 | Some | One | English |
2 | Joe | Sixpack | English |
3 | Stu | Dent | Code |
ID | First Name | Last Name | Language |
---|---|---|---|
1 | Some | One | English |
2 | Joe | Sixpack | English |
3 | Stu | Dent | Code |
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.
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.
Customize any form <input>
, <select>
, or <textarea>
width by adding grid sizing classes to your markup.
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.
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
Available color classes include green
and blue
. The gray button is the default.
Green Button Gray Button Blue Button
Available display classes include round
and alt
.
Rounded Button Alternate Button Style
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
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.
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.
Multi-line messages for highlighting the result of an action. Particularly useful in forms.
Popovers are useful for giving the user a short title and brief description.
Default styling for listing news items on a page.
November 19, 2011 | cnn.com
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. Share
November 8, 2011
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. Share
October 21, 2011 | Reuters.com
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. Share
September 29, 2011 | cnn.com
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. Share
September 20, 2011 | Reuters.com
Lorem ipsum dolor sit amet, excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Share
Alternate styling for listing news items on a page.
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
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
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
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.
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.
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.
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.
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.
Several utility classes are available for producing various types of text links. The include more
and back
.
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.