Foundation CSS Kitchen Sink Visibility Classes

Last Updated : 25 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Kitchen Sink has the Foundation elements to work well in our websites and applications. The Visibility Class is a class built-in Foundation that you can add directly to your HTML code that will allow you to control what components are shown on the page based on screen size or device orientation. Visibility classes use ‘!important‘ to ensure they aren’t overridden by more specific selectors. To use Kitchen Sink Visibility Class, just add the Visibility class to the element which needs to be displayed conditionally.

Foundation CSS Kitchen Sink Visibility Classes:

show-for-*: This class is used to displays the elements, based on the screen size ie for small, medium & large screen size devices.
hide-for-*: This class is used to hide the elements from rendering, based on the screen size ie for small, medium & large screen size devices.
show-for-landscape: This class is used to shows the element if the device orientation is landscape.
show-for-portrait: This class is used to shows the element if the device orientation is portrait.
hide-for-landscape: This class is used to hides the element if the device orientation is landscape.
hide-for-portrait: This class is used to hides the element if the device orientation is portrait.
show-for-sr: It allows the elements to remain readable/visible to Screen Readers only.
invisible: This class can be used to make the content invisible while rendering the content.
aria-hidden: It makes the elements stay invisible/hidden from Screen Readers.
show-on-focus: This class is used to hide the content and tabindex = “0” attribute to make an element focusable.

Syntax:

<p class="Visibility Class Name"> Content </p>

Note:

There’s no specific class for .hide-for-small class, because it would just permanently hide the element. For that, you can use the plain old .hide class instead.
These classes automatically hide the element on screen sizes below what’s specified in the class. For example, if the class given is .show-for-medium then the element will be visible in devices with medium screen size or larger and will remain hidden for small screen size. However, if the user wants to display the element for a specific screen size only, then one can add -only to the end of the class name. (Eg: .show-for-medium-only)

Example: This example describes the Kitchen Sink Visibility Class in Foundation CSS. When the tab size is increased ie., the size changes from small to medium, the respective messages will be visible, depending on the screen size.

HTML

<!DOCTYPE html>
<html>
 
<head>
     
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
</head>
 
<body style="padding-top: 2rem;">
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Foundation CSS Kitchen Sink Visibility Classes</h3>
        <p class="show-for-small">
            This line appears on small or larger screen
        </p>
 
 
        <p class="show-for-medium">
            This line appears on medium screen or larger.
        </p>
 
 
    </center>
</body>
</html>

Output:

Kitchen Sink Visibility Class Screen Size

Example: This example describes the Kitchen Sink Visibility Class in Foundation CSS. When the tab orientation is changed from Potrait to Landscape, the respective messages get displayed.

HTML

<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
 
<head>
     
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
</head>
 
<body style="padding-top: 2rem;">
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Foundation CSS Kitchen Sink Visibility Classes</h3>
        <p class="show-for-landscape">
            You are in landscape orientation.
        </p>
 
 
        <p class="show-for-portrait">
            You are in portrait orientation.
        </p>
 
    </center>
</body>
</html>

Output:

Kitchen Sink Visibility Class Orientation

Example: The example illustrates the Show for Screen Readers in Foundation CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
     
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
     
      <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
 
<body style="padding-top: 2rem;">
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Foundation CSS Kitchen Sink Visibility Classes</h3>
        <p class="show-for-sr">
            This text can only be read by a screen reader.
        </p>
 
 
         
<p>
            There's a line of text above this one, 
            you just can't see it.
        </p>
 
    </center>
    <script>
        $(document).foundation();
    </script>
</body>
</html>