ReBAR is a class reference for improving responsive behavior across devices. Visibility of elements are in relation to screen sizes, orientation, and printing. A breakpoint is the point at which an element is either hidden or displayed, based on the width or height of the screen. This is accomplished using media queries.
bos/core/css/rebar.css
$rebar_css
Use these classes to either show or hide any element.
.visible - display an element
.hidden - hide an element
There are two width-based breakpoint types: min-width or max-width. Classes from each can be combined.
Use min-width classes to display or hide elements on these screen sizes and up.
.show-over-240
.hide-over-240
.show-over-320
.hide-over-320
.show-over-360
.hide-over-360
.show-over-480
.hide-over-480
.show-over-540
.hide-over-540
.show-over-640
.hide-over-640
.show-over-768
.hide-over-768
.show-over-960
.hide-over-960
.show-over-1024
.hide-over-1024
.show-over-1280
.hide-over-1280
.show-over-1366
.hide-over-1366
.show-over-1600
.hide-over-1600
Use max-width classes to display or hide elements on these screen sizes and down.
.show-under-240
.hide-under-240
.show-under-320
.hide-under-320
.show-under-360
.hide-under-360
.show-under-480
.hide-under-480
.show-under-540
.hide-under-540
.show-under-640
.hide-under-640
.show-under-768
.hide-under-768
.show-under-960
.hide-under-960
.show-under-1024
.hide-under-1024
.show-under-1280
.hide-under-1280
.show-under-1366
.hide-under-1366
.show-under-1600
.hide-under-1600
Let's say we want to display a box of content ONLY on screen sizes that are over 480px, which is roughly the size of a small tablet or large phone. To do this, we simply need to apply two classes to the box:
.hide-under-480 .show-over-480
We may wish to replace content at different screen sizes. Re-size your browser window to see the changes.
Use these classes to show or hide elements within a specific range of screen size, where the first number is the min-width, and the 2nd number is the max-width.
.hide-240-320
.show-240-320
.hide-320-480
.show-320-480
.hide-360-480
.show-360-480
.hide-480-540
.show-480-540
.hide-540-640
.show-540-640
.hide-640-768
.show-640-768
.hide-768-960
.show-768-960
.hide-960-1024
.show-960-1024
.hide-1024-1280
.show-1024-1280
.hide-1280-1366
.show-1280-1366
.hide-1366-1600
.show-1366-1600
Show or hide elements based on the type of device size range.
.hide-on-tv / .hide-on-xlarge
Hide on screens 1201px and up
.show-on-tv / .show-on-xlarge
Show on screens 1201px and up
.hide-on-desktop / .hide-on-large
Hide on screens 1025 - 1200px
.show-on-desktop / .show-on-large
Show on screens 1025 - 1200px
.hide-on-laptop / .hide-on-medium
Hide on screens 769 - 1024px
.show-on-laptop / .show-on-medium
Show on screens 769 - 1024px
.hide-on-tablet / .hide-on-small
Hide on screens 481 - 768px
.show-on-tablet / .show-on-small
Show on screens 481 - 768px
.hide-on-mobile / .hide-on-xsmall
Hide on screens 480px and down
.show-on-mobile / .show-on-xsmall
Show on screens 480px and down
.hide-on-wearable / .hide-on-xxsmall
Hide on screens 272px and down
.show-on-wearable / .show-on-xxsmall
Show on screens 272px and down
We may wish to hide a block only on screens that are between 320 and 480px, as well as between 768 and 1024px. At all other sizes, the block will be always visible. To do this, we just need to use these classes:
There are two height-based breakpoint types: min-height or max-height. Classes from each can be combined.
Use min-height classes to display or hide elements on these screen sizes and up, based on the screen height.
.show-over-320h
display on screens with a height of 321px or above
.hide-over-320h
hide on screens with a height of 321px or above
.show-over-360h
display on screens with a height of 361px or above
.hide-over-360h
hide on screens with a height of 361px or above
.show-over-480h
display on screens with a height of 481px or above
.hide-over-480h
hide on screens with a height of 481px or above
.show-over-540h
display on screens with a height of 541px or above
.hide-over-540h
hide on screens with a height of 541px or above
.show-over-640h
display on screens with a height of 641px or above
.hide-over-640h
hide on screens with a height of 641px or above
.show-over-768h
display on screens with a height of 769px or above
.hide-over-768h
hide on screens with a height of 769px or above
.show-over-960h
display on screens with a height of 961px or above
.hide-over-960h
hide on screens with a height of 961px or above
.show-over-1024h
display on screens with a height of 1025px or above
.hide-over-1024h
hide on screens with a height of 1025px or above
Use max-width classes to display or hide elements on these screen sizes and down.
.show-under-320h
display on screens with a height of 320px or above
.hide-under-320h
hide on screens with a height of 320px or less
.show-under-360h
display on screens with a height of 360px or above
.hide-under-360h
hide on screens with a height of 360px or less
.show-under-480h
display on screens with a height of 480px or above
.hide-under-480h
hide on screens with a height of 480px or less
.show-under-540h
display on screens with a height of 540px or above
.hide-under-540h
hide on screens with a height of 540px or less
.show-under-640h
display on screens with a height of 640px or above
.hide-under-640h
hide on screens with a height of 640px or less
.show-under-768h
display on screens with a height of 768px or above
.hide-under-768h
hide on screens with a height of 768px or less
.show-under-960h
display on screens with a height of 960px or above
.hide-under-960h
hide on screens with a height of 960px or less
.show-under-1024h
display on screens with a height of 1024px or above
.hide-under-1024h
hide on screens with a height of 1024px or less
We have a content area that needs to be hidden on screens that are under 540px. To do this, simply apply this class:
.hide-under-540h
Here, we want to hide our content box only for screens that have a height ranging between 320 and 768px. To do this, we will need to use these classes:
.show-under-320h .hide-over-320h .show-over-768h
Display or hide elements depending on the device orientation (landscape or portrait).
Use these classes to either show or hide elements based on the device orientation:
.show-on-landscape
display only when device is in landscape orientation
.show-on-portrait
display only when device is in portrait orientation
.hide-on-landscape
hidden only when device is in landscape orientation
.hide-on-portrait
hidden only when device is in portrait orientation
We wish to show a different content box on a screen that's in a portrait orientation, than one that's in a landscape orientation.
Render certain content only for printing.
.print-only
content is only displayed when being printed, but is hidden on screens
.screen-only
content is hidden from being printed, and is only visible on screens
.print-monochrome
applied only to print view, all text is black, and images are rendered in grayscale