Styleguide

Front-end styleguide FTW!

Buttons

a.btn.btn-beige a.btn.btn-arrow

Heading 1

Headings

Heading 2

Heading 3

Heading 4

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

Text Elements

The a element example

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The em element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
	var divs = document.querySelectorAll('div'), i;

	for (i = 0; i < divs.length; ++i) {
	  divs[i].style.color = "green";
	}

Monospace Text wrapped in "pre" tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

List Item 1
List Item 2
List Item 3

Unordered List

List Item 1
List Item 2
List Item 3

List Item 1
List Item 2
List Item 3

Definition List

Definition List Term 1: This is a definition list description.
Definition List Term 2: This is a definition list description.
Definition List Term 3: This is a definition list description.

Accordion

question

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi iusto tempora temporibus labore ut dolores earum libero architecto, illo doloribus necessitatibus neque quibusdam eos, porro est fugit soluta dolore suscipit.

question

Tables

This is a table caption
Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3

Media and Form Elements

This last section contains elements that don't render well in markdown. Please consult the final section in index.html, to see the rest of the styleguide.

Media

The Audio Element:

The Video Element:

Form Elements

The Fieldset:

Legend

The Form:

Text Field:

Disabled Text Field:

Readonly Text Field:

Text Area:

Disabled Text Area:
I'm disabled

Readonly Text Area:
I'm readonly

Select Element:

Disabled Select Element:

Radio Buttons:
Radio 1
Radio 2
Radio 3
Radio Disabled

Checkboxes:
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox Disabled

Password:

File Input:

HTML5-specific Form Elements

Email:

URL:

Telephone:

Number:

Search:

Date:

Time:

Color:

Datalist:

Range: