Buttons
Buttons are a convenient tool when it comes to more traditional actions. To that end, Foundation has a lot of easy to use button styles that you can customize or override to fit your needs.
Building buttons using our predefined classes is simple, you’ll need an < a> , < button> or < input> with a class of .button. This will create a default medium button. You can also use size, color and radius classes to control more of the style.
The class options:
The size classes include: .tiny, .small, .medium or .large
The color classes include: .secondary, .alert or .success
The radius classes include: .radius or .round
You can also add .disabled to any button and it will look and act disabled.
To have a button go full width use .expand class.
Size buttons
Color buttons
Radius buttons
Disable buttons
Radius buttons
Button Groups
Button groups are great when you need to display a group of actions in a bar. These build off the button styles and work perfectly with the grid.
Building button groups using our predefined classes is a breeze, you’ll just wrap a button inside an < ul>.
The button styles will work the same as they do when building a single button, but they’ll float next to each other to create a group.
You also have access to the same radius classes as buttons, only they’ll go on the unordered list instead of the button. You can even make sure the buttons take up even space within the container you put them in.
The radius classes: .radius or .round.
The even classes: .even-2 through .even-8 to control the even widths.
Button Bars
A button bar is a group of button groups (I N C E P T I O N), perfect for situations where you want groups of actions that are all related to a similar element or page. Simply wrap two or more button groups in a .button-bar and Foundation takes care of the rest.
Dropdown
In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a universal dropdown plugin that will attach dropdowns or popovers next to anything!
Link Dropdown » Content Dropdown »
To create the dropdown you’ll need to attach a data-dropdown="your-id" to whatever element you want the dropdown attached to. From there you’ll create a list that holds the links or content and add an id="your-id" that associates with the element it belongs to. To style the dropdown, we’ve included a class of .f-dropdown that you can target and style to your hearts desire. If you want the dropdown to be content, simply chain the class .content to the dropdown.
Has Dropdown | Has 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!
More test.
Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!
Available class options:
tiny: Make the dropdown have a max-width of 200px
small: Make the dropdown have a max-width of 300px
medium: Make the dropdown have a max-width of 500px
large: Make the dropdown have a max-width of 800px
content: Add padding inside the dropdown for better looking content.
Split Buttons
We’ve simplified our split buttons by getting rid of the dedicated dropdown associated with them. Instead, you’ll use our new dropdown plugin to attach a dropdown to the button style of your choice.
Icon Buttons
With the help of Font Awesome you can build buttons using icons and button classes. You can see the list of icons that you can use here
Button Secondary Button Success Button Alert Button
Button Button Button Button
Alert Boxes
Alerts are a handy element you can drop into a form or inline on a page to communicate success, warnings, failure or just information. They’ll conform to 100% of the container width you put them in.
Building an alert using our predefined class is super-easy, you only need a block-level element with a class of .alert-box (we usually use a <div>). You may also include an anchor with a class of .close to create a close box.
Tooltips
Tooltips are a quick way to provide extended information on a term or action on a page.
Building With HTML Classes
Tooltips work cross browser and cross platform and are easily added to a page with a simple markup and class structure. 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 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.
Available class options:
tip-top: Align the tip above the element you attach it to.
tip-bottom: Align the tip below the element you attach it to.
tip-left: Align the tip to the left the element you attach it to.
tip-right: Align the tip to the right the element you attach it to.
Smallipop – A versatile jQuery plugin for displaying beautiful tooltips and interactive tours
Panels
A panel is a simple, helpful Foundation component 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. The width is controlled by the grid columns you put them inside.
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 or any other anounces that you are going to make.
Building panels using our predefined class isn’t hard at all. You’ll start with <div> and add a class of .panel to it. From there, you just need to add content inside, anything will do.
Available HTML class options:
Adding .callout to your panel will make it our default blue and add a shiny top edge to help it stand out.
You may also you .radius to add a tasteful border-radius to thie mix.
Progress Bars
A simple way to add a progress bars to your layouts. You only need two HTML elements to make them and they’re easy to customize.
Building progress bars using our predefined classes is simple, you’ll just need to write a <div class="progress"> and inside of that a <span class="meter">. The meter is the element that you can set a width to, either inline or programatically on your own accord. The simplest way to do this is to change the style="width:%" property on the meter, itself.
The class options:
The color classes include: .secondary, .alert or .success
The radius classes include: .radius or .round.
You may also you the grid width classes: .small-# or .large-#
Dropdown
In Foundation 4, we wanted to rid our codebase of many different dropdowns within various UI elements. So we created a universal dropdown plugin that will attach dropdowns or popovers next to anything!
Link Dropdown » Content Dropdown »
To create the dropdown you’ll need to attach a data-dropdown="your-id" to whatever element you want the dropdown attached to. From there you’ll create a list that holds the links or content and add an id="your-id" that associates with the element it belongs to. To style the dropdown, we’ve included a class of .f-dropdown that you can target and style to your hearts desire. If you want the dropdown to be content, simply chain the class .content to the dropdown.
Has Dropdown | Has 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!
More test.
Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!
Available class options:
tiny: Make the dropdown have a max-width of 200px
small: Make the dropdown have a max-width of 300px
medium: Make the dropdown have a max-width of 500px
large: Make the dropdown have a max-width of 800px
content: Add padding inside the dropdown for better looking content.
Flex Video
If you’re embedding a 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.
Envato Sting from Activetuts+ on 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.
Envato Sting from Activetuts+ on Vimeo.
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.
Building flex-video containers using our classes is simple, you’ll just need to create a <div class="flex-video"> and apply the classes you want to style it appropriately.
The available class options:widescreen: Will give the player a widescreen aspect ratio.vimeo: This will ensure that we don’t add extra padding since Vimeo has controls within the player, itself.
New Icons in Font Awesome 3.0
Web Application Icons
Text Editor Icons
Directional Icons
Video Player Icons
Social Icons