The Grid
The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites - the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.
The Basics
The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a container, row and column.
What you need to know is that columns don't have a fixed width: they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.
Nesting Support
In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.
Examples
Take this page for example - we've set up this page by containing this section in eight columns, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.
Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.
Offsets
Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid they're nestable.
Centered Columns
Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: for this to work, there cannot be any other column blocks in the row.
Source Ordering
Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes you can shift columns around on desktops and tablets. On phones the grid will still be linearized into the order of the markup.
Mobile Grid
The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. The other option is to use some simple classes to implement a four-column phone grid.
Four Column Mobile Grid
When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.
Mobile Source Ordering
You can use the same push and pull style classes on the 4 column phone grid. The syntax includes .pull-one-phone, .pull-two-phone, .pull-three-phone, as well as .push-one-phone, .push-two-phone, .push-three.phone.
Buttons
We <3 buttons. And so do you! That's why Foundation has multiple buttons styles and color that are not only badass out of the box, but easy to customize for your projects.
Simple Buttons
Foundation buttons have a number of parameters and styles - you can see a few examples below. The out of the box classes include size, color and style (square, slightly rounded, and completely rounded).
Nice Buttons
Nice buttons have a little more pizazz using a background image, but they still support the same classes as any other button including color, size, and corner radius.
Forms
Forms are not a lot of fun. We've taken that lack of fun and dodged it with this ready-made code. In this release there are two sets of forms styles - basic and nice. Both are simple, both are flexible, both are easy to customize. Make sure to include app.js if you're going to use these forms.
Forms
Nice Forms
Custom Forms
Adding Custom Forms with JavaScript
If you are creating these custom forms using JavaScript (via AJAX, JavaScript templates or whatever), you will also need to create the custom markup that Foundation typically creates for you.
Foundation detects any custom forms when the document has loaded and adds the custom markup required to make the forms pretty. However if you are adding these forms after the document has loaded, Foundation does not know to append this markup.
All the custom forms events are bound using jQuery.fn.on(), so you don't need to worry about event handlers not being bound to new elements.
Layout
Reusable, easy to modify layout conventions, for when the Grid isn't quite enough.
Mobile Visibility
With Foundation 2.0 we've included various mobile visibility affordance classes. Want to hide something on phones, or show it only on tablets? Got you covered.
For example, the following text should describe the device you're using: You are on a desktop machine. You are on a tablet device. You are on a smartphone like an iPhone or Android phone.
That example uses the 'show-on-x' classes seen here:
This example uses the opposite rules, so the following text should describe the device you're using: You are not on a desktop machine. You are not on a tablet device. You are not on a smartphone like an iPhone or Android phone.
Each of these classes have an implied 'only' as in 'show only on tablet' or 'hide only on phones'.
Block Grids
Block grids are ULs with 2-up, 3-up, 4-up and 5-up styles. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.
By default these blocks will stay in their N-up configuration on mobile devices, but you can add a class of 'mobile' to have them reshuffle on smartphones into one element per line, just like the Grid.
Two-up
- Two-up element
- Two-up element
- Two-up element
- Two-up element
- Two-up element
Three-up
- Three-up element
- Three-up element
- Three-up element
- Three-up element
- Three-up element
Four-up (Mobile)
- Four-up element
- Four-up element
- Four-up element
- Four-up element
- Four-up element
- Four-up element
Five-up
- Five-up element
- Five-up element
- Five-up element
- Five-up element
- Five-up element
- Five-up element
- Five-up element
UI Elements
Need tabs, tables, or other common UI elements?
Yeah, we got that.
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 anything 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
Blue Label
Red Label
Black Label
Green Label
White Label
Added 01/19 This paragraph has an inline label to let you know that it was added on January 19, 2012 courtesy of Thomas Klemm. Thanks man!
Tooltips
Tooltips are a quick way to provide extended information on a term or action on a page. They work cross browser and cross platfrom and are easily added to a page by including the jquery.tooltip.js plugin. You can apply the has-tip class to any element, as long as you assign it a unique ID.
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 top, bottom, left, or right of the target element.In a mobile environment the tooltips are full width and bottom aligned.
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 (for example the download box on the right).
My panel is bigger than yours.
Seriously, just look at this sweet panel.
Tabs
Tabs are very versatile both as organization and navigational constructs. To keep things easy for everyone we've created two main tab styles (simple and nice) as well as two variants of each - open and contained. With the base Foundation package, tabs of a particular format are actually already hooked up - no extra work required.
Tabs are made of two objects: a DL object containing the tabs themselves, and a UL object containing the tab content. If you simply want visual tabs (as seen in this documentation) without the on-page hookup, you only need the DL. If you want functional tabs, just be sure that each tab is linked to an ID, and that the corresponding tab has an ID of tabnameTab. Check out these examples.
Note: The third tab is using the mobile visibility classes to hide on small devices.
Simple Tabs
- This is simple tab 1's content. Pretty neat, huh?
- This is simple tab 2's content. Now you see it!
- This is simple tab 3's content. It's only okay.
Contained Tabs
Contained tabs have a simple added class of 'contained' on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs, and the padding on that container (by default) is one column on each side. That means you can still use standard column sizes inside a tab element.
- This is simple tab 1's content. Pretty neat, huh?
- This is simple tab 2's content. Now you see it!
- This is simple tab 3's content. It's only okay.
Nice Tabs
Need something a little fancier? Nice tabs have some sweet default styling and can add a little polish to a prototype (or documentation). They can be both standard and contained, just like the simple tabs.
- This is nice tab 1's content. Pretty neat, huh?
- This is nice tab 2's content. Now you see it!
- This is simple tab 3's content. It's only okay.
Vertical Tabs
You can also use tabs in a vertical configuration by adding a class of 'vertical' to the DL element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.
Mobile Tabs
To demonstrate how mobile navigation can work, adding a class of 'mobile' to a tab group will switch them (at small resolutions) to full width nav bars.
Nav Bar
If you need a more traditional nav bar with dropdowns, you can use this sucka. The dropdowns are optional - omitting the flyout element and .has-flyout class means it will act as a standard link. The flyouts can hold arbitrary content, including grid objects, and have three sizes (.small, standard, and .large).
Note: In IE7 the dropdowns are obscured by the code snippet below. This is due to IE7s iframe z-index bug, and is not an issue with the dropdowns themselves. Try not to have dropdown elements over an iframe.
- Nav Item 1
-
Nav Item 2
Small Example (200px)
This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.
-
Nav Item 3
Medium Example (400px)
This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.
This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.
You can also drop inputs into the nav in place of an anchor. Here you can see a search input.
Sub Nav
If you need to provide simple and effective on-page navigation, to either jump to content on the page or flip to another view then use this awesome little sub-nav.
Pagination
Breaking stuff up into pages? Yeah you are. Here's some pagination to get you started.
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 |
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.
Microformats
Microformats are formats for data objects represented on the page using standard HTML. By applying specific classes to objects parsers like the operator plugin can detect relevant data and display it. This can be especially handy for contact info, events, locations and news articles. We've supplied some base styling for microformats, as well as the relevant markup.
hCard
hCards are a microformat for contact information. We've represented the correct syntax here to ensure they are machine readable, as well as applied some minimal styling.
- John T. Yeti
- Yeti
- Foundation, Inc.
- 408-867-5309
- http://foundation.zurb.com/
hCalendar
An hCalendar event is an iCalendar formatted entry for an event at a specific time and location. This can be interpreted by parsing tools to recognize events and add them to a calendar.
The Foundation Launch Party was on October 13 2011 from 2–4pm at ZURB HQ (More Info)