UNPKG

zurb-foundation-5

Version:

Foundation 5 for npm (no code modification from original repo)

41 lines (36 loc) 2.19 kB
##### 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>