Kitchen Sink

This page includes every single Foundation element so that we can make sure things work together smoothly.

Headings

Header one

Header two

Header three

Header four

Header five
Header six

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. Steve Jobs — Apple Worldwide Developers’ Conference, 1997

Tables

Employee Salary
Jane $1 Because that’s all Steve Job’ needed for a salary.
John $100K For all the blogging he does.
Jane $100M Pictures are worth a thousand words, right? So Tom x 1,000.
Jane $100B With hair like that?! Enough said…

Definition Lists

Definition List Title
Definition list division.
Startup
A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.
#dowork
Coined by Rob Dyrdek and his personal body guard Christopher «Big Black» Boykins, «Do Work» works as a self motivator, to motivating your friends.
Do It Live
I’ll let Bill O’Reilly will explain this one.

Unordered Lists (Nested)

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

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

HTML Tags

These supported tags come from the WordPress.com code FAQ.

Address Tag

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag (aka. Link)

This is an example of a link.

Abbreviation Tag

The abbreviation srsly stands for «seriously».

Acronym Tag

The acronym ftw stands for «for the win».

Big Tag

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag

«Code is poetry.» —Automattic

Code Tag

You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag

This tag will let you strikeout text, but this tag is no longer supported in HTML5 (use the <strike> instead).

Emphasize Tag

The emphasize tag should italicize text.

Insert Tag

This tag should denote inserted text.

Keyboard Tag

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag

This tag styles large blocks of code.

.post-title {
	margin: 0 0 5px;
	font-weight: bold;
	font-size: 38px;
	line-height: 1.2;
}

Quote Tag

Developers, developers, developers… —Steve Ballmer

Strong Tag

This tag shows bold text.

Subscript Tag

Getting our science styling on with H2O, which should push the «2» down.

Superscript Tag

Still sticking with science and Isaac Newton’s E = MC2, which should lift the 2 up.

Teletype Tag

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Variable Tag

This allows you to denote variables.

Alert Boxes

This is a standard alert (div.alert-box).
×
This is a success alert (div.alert-box.success).
×
This is an alert (div.alert-box.alert.round).
×
This is a secondary alert (div.alert-box.secondary).
×

Block Grid

  • comet-th
  • launch-th
  • space-th
  • spacewalk-th

Buttons

.tiny.button
.small.button
.button
.expand
.tiny.secondary
.small.success.radius
.round.disabled

Button Groups

Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button

Split Buttons

Split Button
Split Button
Split Button
Split Button

Forms

Fieldset



.com


Link Dropdown »
Content Dropdown »

Title

Some text that people will think is awesome! Some text that people will
think is awesome! Some text that people will think is awesome!

Launching a Discovery Mission

Button

Flex Video

Inline Lists

Keystroke

To make something pretty, press and hold cmd + alt + shift + w + a + !

Labels

Regular Label
Radius Secondary Label
Round Alert Label
Success Label

Magellan

Build With Predefined HTML Structure

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.

Awesome JS Goodness

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.

Pagination

Panels

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel with radiused edges.

It’s a little ostentatious, but useful for important content.

Pricing Tables

  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now

Progress Bars

Reveal

Example Modal…
Example Modal w/Video…

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal…

×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×

Side Nav

Filter:
All
Active
Pending
Suspended

Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Thumbnails

Tooltips

The tooltips can be positioned on the «tip-bottom», which is the default position, «tip-top» (hehe), «tip-left», or «tip-right» of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.

Type

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.

h6. This is a tiny header.

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader

h6.subheader

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
Ordered lists are great for lists that need order, duh.

  1. List Item 1
  2. List Item 2
  3. List Item 3
Definition lists are great for small block of copy that describe the header

Definition List
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

Blockquote

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov

Vcard

Visibility Classes

Screen Size Visibility Control (Show)

The following text should describe the screen size you’re using:

You are on a small screen.
You are on a medium screen.
You are on a medium, large or xlarge screen.
You are on a medium or small screen.
You are on a large screen.
You are on a large or xlarge screen.
You are on a large, medium or small screen.
You are on a xlarge screen.

Screen Size Visibility Control (Hide)

The following text should describe the screen size you aren’t using:

You are not on a small screen.
You are not on a medium screen.
You are not on a medium, large or xlarge screen.
You are not on a medium or small screen.
You are not on a large screen.
You are not on a large or xlarge screen.
You are not on a large, medium or small screen.
You are not on a xlarge screen.

Orientation Detection

The following text should describe the device orientation you’re using:

You are in landscape orientation.
You are in portrait orientation.

Touch Detection

The following text should describe if you’re using a touch device:

You are on a touch-enabled device.
You are not on a touch-enabled device.