Page Elements

[restabs alignment=”osc-tabs-center” responsive=”true”][restab title=”Typography” active=”active”]

Typography

Heading 1

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

cheese-sniffer

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.

cheese-mouse

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.

[/restab][restab title=”Lists”]

List Types

Horizontal List

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)
[/restab][restab title=”Grid”]

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]).

Full Width

full

Halves and Quarters

col quarter
col quarter
col quarter
col quarter last
col quarter
col three_quarters last
col half
col half last

Halves and Quarters with Gutter

col quarter_gutter
col quarter_gutter
col quarter_gutter
col quarter_gutter last
col quarter_gutter
col three_quarters_gutter last
col half_gutter
col half_gutter last

Thirds

col third
col third
col third last
col two_thirds
col two_thirds last

Thirds with Gutter

col third_gutter
col third_gutter
col third_gutter last
col two_thirds_gutter
col two_thirds_gutter last
[/restab][restab title=”Colors”][/restab][restab title=”Images”]

Figures & Images

Furniture and Cobwebs

That figures.

Above is an img, and you’re presently reading a figcaption, both of which are happily coexisting inside a figure.

Figure Element Easy Act to Follow

Here is some text to illustrate how text might appear below the figure element. As a matter of fact, the parent element here is just a div. We’re looking pretty good here, yes?

From Beuu Hotel Window

Room with a Beuu

No figure used here. Just the ol’ <p><img /></p> inside a div.

The photo is from my first night in Calcutta, India, from the third floor of the Beuu Hotel. It was shot at around 5:00 am; I was so scared I couldn’t sleep.

Asleep on the Job

Zzzz...

I can haz webcatz!?

Seriously, what development stylesheet would be complete without the obligatory, cheezy internet meme?

Actually, they’re here for a reason. On small monitors and handhelds, these little cats fill the viewport.

Go ahead. Resize your browser to a narrow, little column.

Mmmm. Responsive.

[/restab][restab title=”Table & Text”]

Table

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

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; 
}

[/restab][restab title=”Forms”]

Form elements

Hey. Nice form.

Labels and Input Types

Radio Buttons
Checkboxes

Perilous Peril

Oh, wicked, bad, naughty, evil Zoot!


[/restab][restab title=”Buttons & Notifications”]

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.
< />

Your code, sir:

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

Your code, sir:

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

Your code, sir:

<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 < />

Your code, sir:

<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. < />

Your code, sir:

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

What? Why <b> tags instead of strong? Because in HTML5, <b> tags have been reintroduced for presentational style with no semantic emphasis.

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

Your code, sir:

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

What? Why <b> tags instead of strong? Because in HTML5, <b> tags have been reintroduced for presentational style with no semantic emphasis.

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

Your code, sir:

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

What? Why <b> tags instead of strong? Because in HTML5, <b> tags have been reintroduced for for presentational style with no semantic emphasis.

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

Your code, sir:

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

What? Why <b> tags instead of strong? Because in HTML5, <b> tags have been reintroduced for for presentational style with no semantic emphasis.

[/restab][/restabs]

The Palette

Warm Grays

warm-gray-lightest
#f2f1ed

warm-gray-lighter
#ded9d1

warm-gray-light
#ab9e95

warm-gray
#766a63

warm-gray-dark
#423832

warm-gray-darker
#201b18

Blues

blue-lightest
#e6f0fc

blue-lighter
#a9d0fc

blue-light
#3392ff

blue
#003f87

blue-dark
#002754

blue-darker
#091c32

Oranges

orange-lightest
#faeee5

orange-lighter
#ffc399

orange-light
#f58a42

orange
#df5900

orange-dark
#9c3900

orange-darker
#5c2200

Greens

green-lightest
#e0eede

green-lighter
#c2e6be

green-light
#7ecf78

green
#4ea649

green-dark
#22591e

green-darker
#0e2c0d

Cool Grays

cool-gray-lightest
#f0f1f2

cool-gray-lighter
#dde3eb

cool-gray-light
#c5cfd9

cool-gray
#94a4b5

cool-gray-dark
#444d54

cool-gray-darker
#242627

Purples

purple-lightest
#f6e9f6

purple-lighter
#d8b4d9

purple-light
#a35ea5

purple
#6f3271

purple-dark
#3c233d

Yellows

yellow-lightest
#fef7e7

yellow-lighter
#feefc1

yellow-light
#fcdd74

yellow
#ffc800

Reds

red-lightest
#fbecef

red-lighter
#fac8d3

red-light
#dd627d

red
#c62a3d

red-dark
#721726

red-darker
#38070f