Helpers

Breakpoint-targeted layout, typographic, and conditional helpers for responsive & adaptive layouts

Component Usage Example 2 of 14

Back Next: Typography

Conditional Display Helpers

Conditionally show and hide elements at targeted breakpoints

Demonstration

desktop-only
hide-on-desktop
ipad-only
hide-on-ipad
small-tablet-only
hide-on-small-tablet
mobile-only
hide-on-mobile

Conditional Display Classes

.desktop-only
.hide-on-desktop
.ipad-only
.hide-on-ipad
.small-tablet-only
.hide-on-small-tablet
.mobile-only
.hide-on-mobile

Spacing Helpers

With breakpoint-targeted conditional classes and overrides. (i.e. - .no-pad-mobile, .no-gap-desktop, .double.gap-top-mobile, .padded-small-tablet, .padded-mobile, etc.)

Padded

.padded

.pad-top

.pad-right

.pad-bottom

.pad-left

Double

.double.padded

.double.pad-top

.double.pad-right

.double.pad-bottom

.double.pad-left

Triple

.triple.padded

.triple.pad-top

.triple.pad-right

.triple.pad-bottom

.triple.pad-left

Gapped

.gapped

.gap-top

.gap-right

.gap-bottom

.gap-left

Double

.double.gapped

.double.gap-top

.double.gap-right

.double.gap-bottom

.double.gap-left

Triple

.triple.gapped

.triple.gap-top

.triple.gap-right

.triple.gap-bottom

.triple.gap-left

Layout

With breakpoint-targeted conditional classes and overrides. (i.e. - .block-desktop, .no-border-small-tablet, .pull-right-small-tablet, .center-ipad

Display

.inline

.inline-block

.block

Border Radius

Floating

.pull-none

.pull-right

.pull-left

Centering

Borders

.bordered

.border-top

.border-right

.border-bottom

.border-left

Typographic

Font Sizing

.small

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

.medium

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

.large

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

Text Alignment

.align-left

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

.align-center

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

.align-right

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

.justify

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

Text Helpers

.truncate

(single-line, pure CSS)

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

data-truncate='2'

(multi-line, powered by truncateLines plugin)

The quick brown fox jumped over the lazy dog. Oh, how that fox jumped, quick and brown, while the dog never reacted because he was so very lazy.

.responsive

(single-line, powered by responsiveText plugin)

The quick brown fox jumped over the lazy dog.

Note: data-compression='20.65' applied to increase compression

.responsive

(scrollable single-line, powered by responsiveText plugin)

The quick brown fox jumped over the lazy dog.

Note: data-scrollable='true' applied to enable scrolling on hover

Rotation

.rotate-90

.rotate-180

.rotate-270

.rotate-360

.rotate-90-ctr

.rotate-180-ctr

.rotate-270-ctr

.rotate-360-ctr