Typography

Heading 1

The highest education is that which does not merely give us information but makes our life in harmony with all existence.

C’est du bon fromage!

When the cheese comes out everybody’s happy. Paneer cheese triangles who moved my cheese. Cauliflower cheese everyone loves swiss macaroni cheese macaroni cheese bocconcini cheeseburger cheeseburger. Brie pecorino mozzarella cheese triangles when the cheese comes out everybody’s happy cow queso manchego. Feta cheese on toast lancashire halloumi squirty cheese.

Heading 2

Say cheese, pepper jack danish fontina. Croque monsieur fondue dolcelatte smelly cheese cheese slices cottage cheese bocconcini cut the cheese. Swiss cheese and wine boursin cheesy feet cottage cheese cheddar cheesy grin cut the cheese. Roquefort rubber cheese lancashire airedale boursin cheddar.

Hard cheese parmesan stilton. Macaroni cheese when the cheese comes out everybody’s happy edam pecorino when the cheese comes out everybody’s happy cow caerphilly chalk and cheese. Red leicester taleggio caerphilly pepper jack cheesy feet cottage cheese blue castello danish fontina. Cheese and biscuits stilton croque monsieur chalk and cheese brie brie caerphilly bavarian bergkase. Jarlsberg everyone loves mascarpone.

Rubber cheese airedale halloumi. Fromage boursin roquefort the big cheese paneer parmesan the big cheese ricotta. Cottage cheese taleggio airedale cheese slices cheeseburger squirty cheese bocconcini lancashire. Ricotta babybel who moved my cheese cheesy feet croque monsieur.

Heading 3

Who moved my cheese cheesecake stinking bishop. Dolcelatte danish fontina dolcelatte camembert de normandie airedale goat pecorino brie. Mozzarella cauliflower cheese chalk and cheese cheddar smelly cheese say cheese who moved my cheese blue castello. Cheddar smelly cheese cheese triangles brie pecorino jarlsberg stinking bishop cheese and biscuits. Danish fontina blue castello bavarian bergkase blue castello.

Heading 4

Everyone loves feta. Say cheese cream cheese rubber cheese fromage boursin chalk and cheese airedale mascarpone. Hard cheese roquefort pepper jack emmental red leicester queso paneer mozzarella. Bavarian bergkase airedale stinking bishop who moved my cheese.

Heading 5

Melted monterey jack port-salut smelly cheese. Gouda mascarpone say cheese babybel say cheese say cheese boursin macaroni cheese. The big cheese babybel boursin roquefort paneer red leicester cheese strings cut the cheese. Chalk and cheese halloumi the big cheese hard cheese smelly cheese cheese and wine cheddar cheese and biscuits. St. agur blue cheese stilton bavarian bergkase.

Heading 6

Queso babybel camembert de normandie danish fontina halloumi. Brie cheese and biscuits say cheese. Blue castello chalk and cheese stinking bishop camembert de normandie bavarian bergkase goat feta cheese triangles. Cut the cheese melted cheese cheesy grin cheese on toast squirty cheese hard cheese macaroni cheese gouda. Melted cheese cheese and biscuits lancashire taleggio the big cheese.

List Types

Horizontal List

• item one
• item two
• item three
• item four

Unordered List

• List Item 1
• List Item 2
  • Nested list item A
    • Nested Nested list item
  • Nested list item B
  • Toucans are a family, Ramphastidae, of near passerine birds from the neotropics (i.e. Southern Mexico, Central, South American, and Caribbean region).
• List Item 3

Ordered List

1. List Item 1
2. List Item 2
   1. Nested list item A
   2. Nested list item B
3. List Item 3

Definition List

Single room

$199/night (breakfast included, VAT not included)

Double room

$239/night (breakfast included, VAT not included)

The Grid

Responsive Layout. The general idea: width is defined with percentages, height (if needed) with ems or pixels. Using CSS media queries, we adjust the layout for the size/resolution of the screen or device viewing the page. There’s nothing cooler than @media (unless you’re [lt IE 9]).

Table

Blockquotes

Let’s keep it simple. Italics are good to help set it off from the body text (and italic Georgia is lovely at this size). Be sure to style the citation.

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you.

— HAL 9000

And here’s a bit of trailing paragraph text to follow the blockquote.

Preformatted Text

Preformatted Text

Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. A monospaced font is traditionally used for preformatted text.

"Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!"

Code

Code can be presented inline, like <?php echo ('Your mom.');?>, or within a <pre> block:

.line { 
width:100%; 
*zoom:1; 
margin-bottom:1.2em; 
}

Form elements

Buttons

Basic Default

The .button class and its variants work for both a and input tags.

A standard button < />

A smaller button < />

One big button
With a little extra. < />

<a class="button" href="#">Button</a>

<a class="button small" href="#">Small button</a>

<a class="button large" href="#">Large button<br />
		<span class="button-smalltext">Small, secondary text</span></a>

Buttons of Color

Feeling a little blue? Add a background color class.

.blue_bg < />

.darkblue_bg < />

<a class="button blue_bg" href="#">Blue Button</a>

<a class="button blue_bg" href="#">Dark Blue Button</a>

Status Messages

Info: Just some info for the user. This notification may contain a link. < />

<p class="status info"><b>Info:</b> Just some info for the user. This notification may <a href="#" title="">contain a link</a>.

Success! Something worked correctly. This notification may contain a link.< />

<p class="status success"><b>Success!</b> Something worked correctly. This notification may <a href="#" title="">contain a link</a>.

Warning: The user needs to take action. This notification may contain a link.< />

<p class="status warning"><b>Warning:</b> The user needs to take action. This notification may <a href="#" title="">contain a link</a>.

Error: Something has gone terribly wrong. This notification may contain a link.< />

<p class="status error"><b>Error:</b> Something has gone terribly wrong. This notification may <a href="#" title="">contain a link</a>.