zurb-foundation-5
Version:
Foundation 5 for npm (no code modification from original repo)
41 lines (36 loc) • 2.19 kB
HTML
##### Screen Size Visibility Control (Show)
The following text should describe the screen size you're using:
<p class="panel">
<strong class="show-for-small">You are on a small screen.</strong>
<strong class="show-for-medium">You are on a medium screen.</strong>
<strong class="show-for-medium-up">You are on a medium, large or xlarge screen.</strong>
<strong class="show-for-medium-down">You are on a medium or small screen.</strong>
<strong class="show-for-large">You are on a large screen.</strong>
<strong class="show-for-large-up">You are on a large or xlarge screen.</strong>
<strong class="show-for-large-down">You are on a large, medium or small screen.</strong>
<strong class="show-for-xlarge">You are on a xlarge screen.</strong>
</p>
##### Screen Size Visibility Control (Hide)
The following text should describe the screen size you aren't using:
<p class="panel">
<strong class="hide-for-small">You are <em>not</em> on a small screen.</strong>
<strong class="hide-for-medium">You are <em>not</em> on a medium screen.</strong>
<strong class="hide-for-medium-up">You are <em>not</em> on a medium, large or xlarge screen.</strong>
<strong class="hide-for-medium-down">You are <em>not</em> on a medium or small screen.</strong>
<strong class="hide-for-large">You are <em>not</em> on a large screen.</strong>
<strong class="hide-for-large-up">You are <em>not</em> on a large or xlarge screen.</strong>
<strong class="hide-for-large-down">You are <em>not</em> on a large, medium or small screen.</strong>
<strong class="hide-for-xlarge">You are <em>not</em> on a xlarge screen.</strong>
</p>
##### Orientation Detection
The following text should describe the device orientation you're using:
<p class="panel">
<strong class="show-for-landscape">You are in landscape orientation.</strong>
<strong class="show-for-portrait">You are in portrait orientation.</strong>
</p>
##### Touch Detection
The following text should describe if you're using a touch device:
<p class="panel">
<strong class="show-for-touch">You are on a touch-enabled device.</strong>
<strong class="hide-for-touch">You are not on a touch-enabled device.</strong>
</p>