Foundation CSS Visibility Classes

Foundation CSS provides a set of visibility classes that allow you to control the visibility of elements on different screen sizes or under specific conditions. These classes are useful for creating responsive layouts and hiding or showing elements based on user interactions or device characteristics.

1. Show and Hide Classes

The show-for-* and hide-for-* classes allow you to show or hide elements based on screen size breakpoints. Replace * with the desired screen size (e.g., small, medium, large, xlarge, xxlarge, landscape, or portrait).

Example markup for showing and hiding elements:

<div class="show-for-medium">
  This content is only visible on medium screens and above.
</div>

<div class="hide-for-small">
  This content is hidden on small screens.
</div>

2. Show for and Hide for Classes

Example markup for showing and hiding elements:

<div class="show-for-medium">
  This content is only visible on medium screens and above.
</div>

<div class="hide-for-small">
  This content is hidden on small screens.
</div>

3. Visibility Classes for Print

The show-for-print and hide-for-print classes allow you to show or hide elements when printing the page.

Example markup for printing:

<div class="show-for-print">
  This content is only visible when printing the page.
</div>

<div class="hide-for-print">
  This content is hidden when printing the page.
</div>

Conclusion

Foundation CSS visibility classes provide a convenient way to control the visibility of elements based on screen size breakpoints or printing conditions. By using these classes, you can create responsive designs that adapt to different device sizes and optimize the printing experience for users.

Archive