Visibility

Ready Added in 2.0.0

Use responsive visibility classes to display or hide elements on different devices.

Usage

Add one of these classes to hide an element.

Class	Description
`.gls-hidden`	Hides the element on any device. This is more of a legacy class. The recommended way to do this, is to use the `hidden` attribute.
`.gls-invisible`	Hides the element without removing it from the document flow.

<div hidden></div>

<div class="gls-invisible"></div>

Responsive

This component provides responsive classes to hide or display elements on different viewports.

Hidden

Add one of the .gls-hidden-* classes to hide the element from screens larger than a specified width.

Class	Description
`gls-hidden@s`	Only affects device widths of 640px and larger.
`gls-hidden@m`	Only affects device widths of 960px and larger.
`gls-hidden@l`	Only affects device widths of 1200px and larger.
`gls-hidden@xl`	Only affects device widths of 1600px and larger.

<!-- Hidden on tablets and larger -->
<div class="gls-hidden@m"></div>

Note In this example the green elements are hidden on screens that are larger than the defined breakpoint. Resize your browser window to see the effect.

✔ Small

Small

✔ Medium

Medium

✔ Large

Large

✔ X-Large

X-Large

<div class="gls-grid-small gls-child-width-1-2 gls-child-width-1-4@s gls-text-center" gls-grid>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove gls-alert-success">✔ Small</div>
            <div class="gls-alert gls-position-cover gls-margin-remove gls-hidden@s">Small</div>
        </div>
    </div>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove gls-alert-success">✔ Medium</div>
            <div class="gls-alert gls-position-cover gls-margin-remove gls-hidden@m">Medium</div>
        </div>
    </div>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove gls-alert-success">✔ Large</div>
            <div class="gls-alert gls-position-cover gls-margin-remove gls-hidden@l">Large</div>
        </div>
    </div>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove gls-alert-success">✔ X-Large</div>
            <div class="gls-alert gls-position-cover gls-margin-remove gls-hidden@xl">X-Large</div>
        </div>
    </div>
</div>

Visible

Use .gls-visible-* classes to show the element for screens larger than the specified width.

Class	Description
`gls-visible@s`	Only affects device widths of 640px and larger.
`gls-visible@m`	Only affects device widths of 960px and larger.
`gls-visible@l`	Only affects device widths of 1200px and larger.
`gls-visible@xl`	Only affects device widths of 1600px and larger.

<!-- Visible on tablets and larger -->
<div class="gls-visible@m"></div>

Note In this example the green elements are displayed on screens that are larger than the defined breakpoint. Resize your browser window to see the effect.

Small

✔ Small

Medium

✔ Medium

Large

✔ Large

X-Large

✔ X-Large

<div class="gls-grid-small gls-child-width-1-2 gls-child-width-1-4@s gls-text-center" gls-grid>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove">Small</div>
            <div class="gls-alert gls-alert-success gls-position-cover gls-margin-remove gls-visible@s">✔ Small</div>
        </div>
    </div>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove">Medium</div>
            <div class="gls-alert gls-alert-success gls-position-cover gls-margin-remove gls-visible@m">✔ Medium</div>
        </div>
    </div>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove">Large</div>
            <div class="gls-alert gls-alert-success gls-position-cover gls-margin-remove gls-visible@l">✔ Large</div>
        </div>
    </div>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove">X-Large</div>
            <div class="gls-alert gls-alert-success gls-position-cover gls-margin-remove gls-visible@xl">✔ X-Large</div>
        </div>
    </div>
</div>

Toggle

To display elements on hover or focus only, add the .gls-visible-toggle class to a parent element and one of the following classes to any child elements which should be hidden.

Class	Description
`.gls-hidden-hover`	The element is removed from the document flow when hidden.
`.gls-invisible-hover`	The element is not removed from the document flow when hidden.

The child elements will be displayed when the parent element is hovered or focused. Add tabindex="0" to the parent element to allow it to receive focus through keyboard navigation and on touch devices.

If there are a or button elements within the hidden child element, they are already focusable through keyboard navigation and will make the child element appear. Therefore, add tabindex="-1" so the parent element is still focusable on touch devices.

<div class="gls-visible-toggle" tabindex="0">
    <div class="gls-hidden-hover"></div>
</div>

Hidden when not hovered
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Invisible when not hovered
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="gls-child-width-1-2@s" gls-grid>
    <div class="gls-visible-toggle" tabindex="-1">

        <h4>Hidden when not hovered</h4>

        <div gls-grid>
            <div class="gls-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="gls-width-auto">
                <ul class="gls-hidden-hover gls-iconnav">
                    <li><a href="#" gls-icon="icon: pencil"></a></li>
                    <li><a href="#" gls-icon="icon: copy"></a></li>
                    <li><a href="#" gls-icon="icon: trash"></a></li>
                </ul>
            </div>
        </div>

    </div>
    <div class="gls-visible-toggle" tabindex="-1">

        <h4>Invisible when not hovered</h4>

        <div gls-grid>
            <div class="gls-width-expand">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="gls-width-auto">
                <ul class="gls-invisible-hover gls-iconnav">
                    <li><a href="#" gls-icon="icon: pencil"></a></li>
                    <li><a href="#" gls-icon="icon: copy"></a></li>
                    <li><a href="#" gls-icon="icon: trash"></a></li>
                </ul>
            </div>
        </div>

    </div>
</div>

Touch

Add the .gls-hidden-touch class to hide elements on touch devices and the .gls-hidden-notouch to hide elements on devices without a touch screen.

<!-- Hidden on touch devices -->
<div class="gls-hidden-touch"></div>

<!-- Hidden on no-touch devices -->
<div class="gls-hidden-notouch"></div>

✔ Hidden Touch

Hidden Touch

✔ Hidden No-Touch

Hidden No-Touch

<div class="gls-grid-small gls-child-width-1-2 gls-child-width-auto@s gls-text-center" gls-grid>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove gls-alert-success">✔ Hidden Touch</div>
            <div class="gls-alert gls-position-cover gls-margin-remove gls-hidden-touch">Hidden Touch</div>
        </div>
    </div>
    <div>
        <div class="gls-panel">
            <div class="gls-alert gls-margin-remove gls-alert-success">✔ Hidden No-Touch</div>
            <div class="gls-alert gls-position-cover gls-margin-remove gls-hidden-notouch">Hidden No-Touch</div>
        </div>
    </div>
</div>