« Back

Foundation Elements Testing

Go to:
Visibility Classes
Alerts
Labels
Tooltips
Accordion
Keystrokes
Panels
Inline List
Tables
Progress Bars
Pricing Tables
Thumbs
Video

Elements

Prototyping and production requires more than just navigation or tabs or typography. We've created a number of additional elements to help rapidly prototype, and like everything else they are production-ready and easy to restyle or override.


Visibility Classes

Foundation 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.

Screen Size

The following text should describe the device you're using: You are on a very large screen. You are on a large screen. You are on a large or very large screen. You are on a medium screen. You are on a medium or small screen. You are on a small screen, like a smartphone.

This example uses the opposite rules, so the following text should inversely describe the device you're using: You are not on a very large screen. You are not on a large screen. You are not on a large or very large screen. You are not on a medium or small screen. You are not on a medium screen. You are not on a small screen.

Orientation Detection

The following text should describe the device you're using: You are in landscape orientation. You are in portrait orientation.

Touch Detection

The following text should describe the device you're using: You are on a touch-enabled device. You are not on a touch-enabled device.

Media Query Viewer

Easily add the ability to show which media query you are currently viewing. To activate the viewer, make sure you have jquery.foundation.mediaQueryToggle.js linked up on your page. From there, simply add the markup to your page or press M. The keyboard toggle won't work on mobile devices so make sure you add the markup in those cases.



Alerts

Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. The syntax is extremely simple and like everything else in Foundation, easy to customize.


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). ×
This is a secondary alert (div.alert-box.secondary). ×


Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new. The syntax is simple, just a span element with a class of .label. The border styling mirrors that of the Foundation buttons.


Regular Label
Radius Label
Round Label

Secondary Label
Alert Label
Success Label

Example Label This label could read a date for an update or it could include an author name or anything really. Inline labels are pretty handy when you need to draw attention or visually separate a short piece of content.



Tooltips

Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platform and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the has-tip class to any element.

By default, the tooltip takes the width of the element that it is applied to, but you can override this behavior by applying a data-width attribute to the target element. The tooltip takes on the content of the targets title attribute.


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. On a small device, the tooltips are full width and bottom aligned.

Custom Options

I have custom attributes.



Accordion

Accordions are similar to tabs as a way to selectively show a single panel of content at a time. You can add a .hover class to the accordion ul to make it open on hover.


  • Accordion Panel 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Accordion Panel 2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Accordion Panel 3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



Keystrokes

If you have keyboard affordances you might need to explain them, and to that end there's a simple keystroke character affordance in Foundation.


For example, to close your browser hit Cmd + Q. Don't actually do it. There's more docs to read.



Panels

A panel is a simple, helpful css class that enables you to outline sections of your page easily. This allows you to view your page sections as you add content to them, or add emphasis to a section. There are two styles built in, and they support a class of .radius to round them off.



This is a regular panel.

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

This is a callout panel.

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



Inline List

When you just need a horizontal list of links, like in a footer, and you want more control than just spaces between them you can use this simple construct.




Tables

Okay, they're not the sexiest things ever, but tables get the job done (for tabular data).


Table Header Table Header Table Header Table Header
Content This is longer content Content Content
Content This is longer content Content Content
Content This is longer content Content Content
Content This is longer content Content Content


Progress Bars

A simple way to add a progress bar to your layout. You can edit the border radius by adding a class of .radius or .round. You can change the color by adding the classes .secondary, .success, or .alert. If you want to adjust the length, just use a number class. For example class="progress four" will make the progress bar 33% wide.





Pricing Tables

We've created a simple structure that will help you quickly style a set of pricing tables using the grid.

  • Standard
  • $99.99
  • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus sit amet.
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy it Now »
  • Premium
  • $199.99
  • Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius.
  • 2 Database
  • 10GB Storage
  • 40 Users
  • Buy it Now »
Executive
$999.99
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit.
Unlimited Database
Unlimited Storage
Unlimited Users
Buy it Now »


Image Thumbnails

When you need an image thumbnail that is slightly more styled than just a plain old image.



Video

If you're embedding video from YouTube, Vimeo, or another site that uses iframe, embed or object elements you can wrap your video in div.flex-video to create an intrinsic ratio that will properly scale your video on any device.


4:3
Widescreen
Vimeo
  • 4:3 is the default size for the .flex-video element, and the assumption for .flex-video for chrome (controls) height is based on YouTube.
  • By adding a class of .widescreen we change the ratio to 16:9, ideal for more recent video and most popular YouTube or Vimeo embeds.
  • Because Vimeo places their chrome on the player itself, adding a class of .vimeo creates a container that is sized for the video only - no extra padding for the controls.