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 protrait 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.
Note: These classes have been listed in order of precendence. Touch classes will override orientation, which will override size.
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.
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.
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.
Link 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.
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 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.