Foundation Docs

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