Visibility

Hide elements on the page.
.hidden .hidden@screenName .hidden!@screenName

Based on hidden status, hide elements from a breakpoint or up to a breakpoint without worrying about its original display.

// default config
breakpoints: (
  xs: 30em, // 480px
  sm: 37.500em, // 600px
  md: 60em, // 960px
  lg: 80em, // 1280px
  xl: 120em, // 1980px
),
screens: (sm, md, lg),

...

visibility: (
  breakpoints: this('screens'), // refering to screens value
  pointbreaks: this('screens'), // refering to screens value
),

Loop config includes visibility classes by default. In manual mode use the mixin Visibility()

# Hide from

Use the values from the property breakpoints of Visibility .hidden.hidden@screenName

# Hide up to

Use the values from the property pointbreaks of Visibility .hidden!@screenName

# Misc

Loop gives you two more visibility classes in the case of working on a print version.

• .hidden@print Hide elements from print
• .hidden@screen Hide elements from screen (targetting print only)

Use Container classes << >> Use List classes