Utility Classes for Responsive Layouts

These classes can be used to scope existing hooks to particular breakpoints.

Block background images

Place this class on elements with background images in order to block them on initial load.

This is usually done in order to load them in dynamically later.

.rwd-image-blocker

Hide content on wider screens.

.wv--hidden

Hide content on wide screens (shows with block properties).

.wv--hidden-block

Hide :before content on wide screens .wv--hidden--before &:before display: block !important +respond-to(wide-view) display: none !important

Hide :after content on wide screens .wv--hidden--after &:after display: block !important +respond-to(wide-view) display: none !important

Hide content but show it on wider screens.

.wv--block

Hide content but show it on wider screens (with inline-block properties).

.wv--inline-block

Hide content but show it on wider screens (with display:table properties).

.wv--table

Toggles a stacked nav to an inline nav for wider screens.

.wv--nav--inline

Floats content left but only on wider screens.

.wv--split--left

Floats content right but only on wider screens.

.wv--split--right

Hide content on medium screens.

.mv--hidden

Hide content on medium screens (shows with block properties).

.mv--hidden-block

Hide content but show it on medium screens.

.mv--block

Hide content but show it on medium screens (with inline properties).

.mv--inline

Hide content but show it on medium screens (with inline-block properties).

.mv--inline-block

Hide content but show it on medium screens (with display:table properties).

.mv--table

Floats content left but only on medium screens.

.mv--split--left

Floats content right but only on medium screens.

.mv--split--right