Kitchen Sink Foundation

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

---

rtPanel: Fontello Fonts

---

Alert Boxes

---

Block Grid

• 
• 
• 
• 

---

Breadcrumbs

• Home
• Features
• Gene Splicing
• Cloning

---

Buttons

---

Button Groups

• Button 1
• Button 2
• Button 3

• Button 1
• Button 2
• Button 3
• Button 4

• Button 1
• Button 2
• Button 3

---

Dropdown Buttons

• This is a link
• This is another
• Yet another

Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button

---

Split Buttons

Split Button
Split Button
Split Button
Split Button

---

Clearing

---

Forms

Fieldset

Input Label

Input Label

Input Label

Input Label

.com

Textarea Label

---

Custom Forms

Radio Button 1 Radio Button 2 Radio Button 3

Label for Checkbox Label for Checkbox Label for Checkbox

Medium Example This is a dropdown This is another option This is another option too Look, a third option

---

Dropdowns

Link Dropdown » Content Dropdown »

• This is a link
• This is another
• Yet another

---

Flex Video

---

Inline Lists

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

---

Joyride

Start Joyride

Build Joyride with HTML

Stop Number 2 for You!

---

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.

---

Orbit

• 
  Caption One
• 
  Caption Two
• 
  Caption Three

---

Pagination

• «
• 1
• 2
• 3
• 4
• …
• 12
• 13
• »

---

Panels

---

Pricing Tables

---

Progress Bars

---

Reveal

Example Modal… Example Modal w/Video…

---

Section

---

Side Nav

---

Sub Nav

Filter:

All

Active

Pending

Suspended

---

Switch

---

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.

---

Top Bar

---

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

h6. This is a tiny header. h1.

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

1. List Item 1
2. List Item 2
3. List Item 3

Definition List

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

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

• Gaius Baltar
• 123 Colonial Ave.
• Caprica City
• Caprica, 12345
• g.baltar@cmail.com

---

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.