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.
Foundation 3 allows you to easily turn elements on and off based on certain device criteria, like screen size, touch, or orientation.
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.
The following text should describe the device you're using: You are in landscape orientation. You are in protrait orientation.
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 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 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.
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 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.
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.
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.
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.
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.