Layout - Shortcodes: Responsive Utility
Friday, March 27, 2015 2:44 AMShortcodes
[intense_responsive_utility]
Description
The Responsive Utility Shortcode gives you the ability to hide or show elements on the page responsively for different device sizes. It can be used for showing and hiding content by device using media query. Also included are options for toggling content when printed.
Attributes
| Attribute | Type | Dialog Title | Description | Default | Available Values |
|---|---|---|---|---|---|
| id | text | ID | optional - the client-side id of the row. This id will be set on the HMTL tag. | ||
| visible_large | checkbox | Visible Large Screens | used to show when viewed on large devices - desktops (≥1200px) | 1 = true, 0 = false | |
| visible_medium | checkbox | Visible Medium Screens | used to show when viewed on medium devices - desktops (≥992px) | 1 = true, 0 = false | |
| visible_small | checkbox | Visible Small Screens | used to show when viewed on small devices - tablets (≥768px) | 1 = true, 0 = false | |
| visible_extra_small | checkbox | Visible Extra Small Screens | used to show when viewed on extra small devices - phones (<768px) | 1 = true, 0 = false | |
| visible_print | checkbox | Visible Print | used to show when printing | 1 = true, 0 = false | |
| hidden_large | checkbox | Hidden Large Screens | used to hide when viewed on large devices - desktops (≥1200px) | 1 = true, 0 = false | |
| hidden_medium | checkbox | Hidden Medium Screens | used to hide when viewed on medium devices - desktops (≥992px) | 1 = true, 0 = false | |
| hidden_small | checkbox | Hidden Small Screens | used to hide when viewed on small devices - tablets (≥768px) | 1 = true, 0 = false | |
| hidden_extra_small | checkbox | Hidden Extra Small Screens | used to hide when viewed on extra small devices - phones (<768px) | 1 = true, 0 = false | |
| hidden_print | checkbox | Hidden Print | used to hide when printing | 1 = true, 0 = false | |
| class | text | CSS Class |
Examples
<h3>Visible On...</h3>
[intense_row]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_large="1"]
[intense_alert color="success"]
✔ Large Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_large="1"]
[intense_alert color="muted"]
✗ Large Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_medium="1"]
[intense_alert color="success"]
✔ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_medium="1"]
[intense_alert color="muted"]
✗ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_small="1"]
[intense_alert color="success"]
✔ Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_small="1"]
[intense_alert color="muted"]
✗ Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility visible_extra_small="1"]
[intense_alert color="success"]
✔ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility hidden_extra_small="1"]
[intense_alert color="muted"]
✗ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[/intense_row]
<h3>Hidden On...</h3>
[intense_row]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_large="1"]
[intense_alert color="success"]
✔ Large Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_large="1"]
[intense_alert color="muted"]
✗ Large Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_medium="1"]
[intense_alert color="success"]
✔ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_medium="1"]
[intense_alert color="muted"]
✗ Medium Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_small="1"]
[intense_alert color="success"]
✔ Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_small="1"]
[intense_alert color="muted"]
✗ Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[intense_column size="3" medium_size="3" small_size="6" extra_small_size="12"]
[intense_responsive_utility hidden_extra_small="1"]
[intense_alert color="success"]
✔ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[intense_responsive_utility visible_extra_small="1"]
[intense_alert color="muted"]
✗ Extra Small Device
[/intense_alert]
[/intense_responsive_utility]
[/intense_column]
[/intense_row]
*resize your browser window to see the Responsive Utility shortcode in action.