Cogency Web Style Guide
Using Bootstrap 2.3.2 Framework

Typography

The entire site uses two weights of Brandon Grotesque: bold(700) and regular(300). Brandon Grotesque has been purchased and supplied to Impulse by the client. The kit can be downloaded here

Paragraphs

A regular paragraph.

Lead Paragraph

Lead paragraphs are used for the "elevator pitch" of a page.

Text basics

Do not use underline except for hyperlinks.

Text in all cases should be left-aligned, with the small exception of several specifically-designed headers on the homepage. Centering or right-aligning text can cause issues for users translating pages to right-aligned languages, and breaks visual flow for users on mobile devices, especially when re-flowing table structures into visual linear lists.

Links

Links should have underlines, and where possible, use Smart Underline for more beautiful lines.

Unordered lists

Ordered lists

Emphasis Classes

Convey meaning through color with a handful of emphasis utility classes.

Blockquote

Blockquotes for testimonials or quoting.

Naming a source

Source citing should be wrapped in a blockquote element.

Document links

Links to documents should be visibly distinct to show the user that a different action will happen when the select it.

Supported Form Elements

Examples of standard form controls supported in an example form layout.

Inputs

Textarea

Checkboxes and radios (stacked)

Checkboxes and radios (inline)

Selects

Horizontal Form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

• Add .form-horizontal to the form
• Wrap labels and controls in .control-group
• Add .control-label to the label
• Wrap any associated controls in .controls for proper alignment

Inline Form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.

Search Form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.

Control sizing

For form field layout and relative sizing.

Block Input

Make any <input> or <textarea> element behave like a block level element.

Relative Input Sizing

Grid Input Sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.

Required Form Elements

For accessibility, required form elements should have a visible marker with a readable element that contains the word "Required." A floating tooltip for visual users with mice is also helpful.

Prepended and Appended Inputs

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

Heading levels

Headings of level 1 are reserved for the main page heading.

Headings with links

Headings may also contain links

Collapsible headers

Collapse headings to make content more scannable.

Quick anchor links

On hover, users should be able to access a quick anchor link to the header. The ID of the header should consist of only alphanumeric characters and hyphens.

Full-width images

Images with a non-square aspect ratio should fill the entirety of the parent container or page. Two sizes should be available to save download size for mobile users.

Square images

Square images should float to the right on desktop breakpoints, then center on smaller screens.

Pagination

Pagers should be used for long lists.

Breadcrumbs

The current page should be not linked but also available in the breadcrumbs. The first item should always link to the homepage.

Login Button

Button for login

Watch Video Button #1

Button for viewing video used on dark backgrounds

Watch Video Button #2

Button for viewing video used on light backgrounds

CTA Button 1

Call to action button #1

CTA Button 2

Call to action button #2

Large Card

Large card for use with services and blog posts content.

Small Card

Small card for use with sub services on service pages.

Application Block

Small block used for applications on dashboard.

Horizontal rules

Use horizontal rules to visually break up different sections of the page.