ReBAR

Responsive Breakpoint Assistance Reference

Library of responsive class helpers

Back to Top ↑

Overview

ReBAR is a class reference for visibility of elements 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.

General Visibility

Use these classes to either show or hide any element.

.visible - display an element
.hidden - hide an element

Width Breakpoints

There are two width-based breakpoint types: min-width or max-width. Classes from each can be combined.

Min-Width

Use min-width classes to display or hide elements on these screen sizes and up.

.show-over-240 - display on screens 241px and up
.hide-over-240 - hide on screens 241px and up

.show-over-320 - display on screens 321px and up
.hide-over-320 - hide on screens 321px and up

.show-over-480 - display on screens 481px and up
.hide-over-480 - hide on screens 481px and up

.show-over-540 - display on screens 541px and up
.hide-over-540 - hide on screens 541px and up

.show-over-640 - display on screens 641px and up
.hide-over-640 - hide on screens 641px and up

.show-over-768 - display on screens 769px and up
.hide-over-768 - hide on screens 769px and up

.show-over-960 - display on screens 961px and up
.hide-over-960 - hide on screens 961px and up

.show-over-1024 - display on screens 1025px and up
.hide-over-1024 - hide on screens 1025px and up

.show-over-1280 - display on screens 1281px and up
.hide-over-1280 - hide on screens 1281px and up

.show-over-1366 - display on screens 1367px and up
.hide-over-1366 - hide on screens 1367px and up

Max-Width

Use max-width classes to display or hide elements on these screen sizes and down.

.show-under-240 - display on screens 240px and under
.hide-under-240 - hide on screens 240px and under

.show-under-320 - display on screens 320px and under
.hide-under-320 - hide on screens 320px and under

.show-under-480 - display on screens 480px and under
.hide-under-480 - hide on screens 480px and under

.show-under-540 - display on screens 540px and under
.hide-under-540 - hide on screens 540px and under

.show-under-640 - display on screens 640px and under
.hide-under-640 - hide on screens 640px and under

.show-under-768 - display on screens 768px and under
.hide-under-768 - hide on screens 768px and under

.show-under-960 - display on screens 960px and under
.hide-under-960 - hide on screens 960px and under

.show-under-1024 - display on screens 1024px and under
.hide-under-1024 - hide on screens 1024px and under

.show-under-1280 - display on screens 1280px and under
.hide-under-1280 - hide on screens 1280px and under

.show-under-1366 - display on screens 1366px and under
.hide-under-1366 - hide on screens 1366px and under

Example 1

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

This box becomes hidden on screens that are 480px or smaller. Re-size your browser window!

Example 2

We may wish to replace content at different screen sizes. Re-size your browser window to see the changes.

This box is only visible on screens over 1024px.

This box is only visible on screens UNDER 1024px.

Width-Based Breakpoint Ranges

Use these classes to show or hide elements within a specific range of screen size.

.hide-240-320 - hide on screens between 240 and 319px
.show-240-320 - display on screens between 240 and 319px

.hide-320-480 - hide on screens between 320 and 479px
.show-320-480 - display on screens between 320 and 479px

.hide-480-540 - hide on screens between 480 and 539px
.show-480-540 - display on screens between 480 and 539px

.hide-540-640 - hide on screens between 540 and 639px
.show-540-640 - display on screens between 540 and 639px

.hide-640-768 - hide on screens between 640 and 767px
.show-640-768 - display on screens between 640 and 767px

.hide-768-960 - hide on screens between 768 and 959px
.show-768-960 - display on screens between 768 and 959px

.hide-960-1024 - hide on screens between 960 and 1023px
.show-960-1024 - display on screens between 960 and 1023px

.hide-1024-1280 - hide on screens between 1024 and 1279px
.show-1024-1280 - display on screens between 1024 and 1279px

.hide-1280-1366 - hide on screens between 1280 and 1365px
.show-1280-1366 - display on screens between 1280 and 1365px

Example

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:

.hide-320-480 .hide-768-960 .hide-960-1024

This box is hidden when the screen width is between 320 and 480px, as well as between 960 and 1024px.

Height Breakpoints

There are two height-based breakpoint types: min-height or max-height. Classes from each can be combined.

Min-Height

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-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-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

Max-Height

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-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-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

Example 1

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

This box becomes hidden on screens that are under 540px tall. Re-size your browser window!

Example 2

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

This box is shown on screens with a height under 320px and over 768px, but is hidden on screen heights between 321 and 768px.

Orientation

Display or hide elements depending on the device orientation (landscape or portrait).

Classes

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

Example

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.

This box is only visible in the PORTRAIT orientation on mobile devices.

This box is only visible in the LANDSCAPE orientation. On desktops and laptops, only this box should be visible.

Print Utility Classes (PUC)

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

Download

Version 1.9