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

hidden
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

.hidden (all breakpoints)
.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

Half

.half-padded

.half-pad-top

.half-pad-right

.half-pad-bottom

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

Half

.half-gapped

.half-gap-top

.half-gap-right

.half-gap-bottom

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

Positioning

Static


                
                  .static

Absolute


                
                  .absolute
                  .absolute.top
                  .absolute.top.left
                  .absolute.top.center
                  .absolute.top.right
                  .absolute.middle
                  .absolute.middle.left
                  .absolute.middle.center
                  .absolute.middle.right
                  .absolute.bottom
                  .absolute.bottom.left
                  .absolute.bottom.center
                  .absolute.bottom.right
                  .absolute.center

Fixed


                
                  .fixed
                  .fixed.top
                  .fixed.top.left
                  .fixed.top.center
                  .fixed.top.right
                  .fixed.middle
                  .fixed.middle.left
                  .fixed.middle.center
                  .fixed.middle.right
                  .fixed.bottom
                  .fixed.bottom.left
                  .fixed.bottom.center
                  .fixed.bottom.right
                  .fixed.center