Brutalist Framework

ReBAR

Responsive Breakpoint Assistance Reference


Class helper library for improving responsive behavior

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

Max-Width

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

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

Device Type Visibility

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

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

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

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

Rebar
Back to Top ↑

Download
version 2.4
×