<%= @page_title %>

Foundation allows you to easily turn elements on and off based on certain device criteria, like screen size, touch or orientation.

Screen Size Visibility Control (Show)

The following text should describe the screen size you're using:

You are on a small screen. You are on a medium screen. You are on a medium, large or xlarge screen. You are on a medium or small screen. You are on a large screen. You are on a large or xlarge screen. You are on a large, medium or small screen. You are on a xlarge screen.

Screen Size Visibility Control (Hide)

The following text should describe the screen size you aren't using:

You are not on a small screen. You are not on a medium screen. You are not on a medium, large or xlarge screen. You are not on a medium or small screen. You are not on a large screen. You are not on a large or xlarge screen. You are not on a large, medium or small screen. You are not on a xlarge screen.

Orientation Detection

The following text should describe the device orientation you're using:

You are in landscape orientation. You are in portrait orientation.

Touch Detection

The following text should describe if you're using a touch device:

You are on a touch-enabled device. You are not on a touch-enabled device.

---

Using our HTML Classes With CSS

The standard way of working with the Foundation visibility control is to use the predefined HTML classes. Yes, this adds classes to your markup, but they are semantic to the function they provide rather than from a presentational point of view.

<%= code_example ' /* The show classes */ .show-for-small /* Visible up to 768px */ .show-for-medium-down /* Visible from 1280px down */ .show-for-medium /* Visible between 768px and 1280px */ .show-for-medium-up /* Visible from 1280px up */ .show-for-large-down /* Visible from 1440px down */ .show-for-large /* Visible between 1280px and 1440px */ .show-for-large-up /* Visible from 1440px up */ .show-for-xlarge /* Visible above 1440px only */ /* The hide classes */ .hide-for-small /* Hidden up to 768px */ .hide-for-medium-down /* Hidden from 1280px down */ .hide-for-medium /* Hidden between 768px and 1280px */ .hide-for-medium-up /* Hidden from 1280px up */ .hide-for-large-down /* Hidden from 1440px down */ .hide-for-large /* Hidden between 1280px and 1440px */ .hide-for-large-up /* Hidden from 1440px up */ .hide-for-xlarge /* Hidden above 1440px only */ /* The orientation classes */ .show-for-landscape /* Visible for landscape orientation */ .show-for-portrait /* Visible for portrait orientation */ .hide-for-landscape /* Hidden for landscape orientation */ .hide-for-portrait /* Hidden for portrait orientation */ /* The touch detection classes */ .show-for-touch /* Visible for touch enabled devices */ .hide-for-touch /* Hidden for touch enabled devices */ ', :css %>

Note: We've also included specific table hide/show visilibity classes that follow the same structure, just prepended with table, thead, th, tbody, tr or td. The display property will go from 'none' to whatever its default display should be.

---

Using SCSS?

So, you hate the idea of including these classes in your markup? Well, we thought of that too! You can easily @extend these classes to whatever element you want. Extending a visibility class looks like this:

<%= code_example ' .your-class-name { @extend .hide-for-small; } ', :css %>