Foundation - Visibility Classes


Advertisements

Description

  • Foundation uses visibility classes to show or hide elements based upon device orientation (portrait and landscape) or screen size (small, medium, large or xlarge screen).

  • It allows a user to use elements based on the browsing environment.

The following table lists the visibility classes of Foundation, which control the elements based on their browsing environment −

Sr.No. Visibility Class & Description
1 Show by Screen Size

It shows the elements based on the device by using .show class.

2 Hide by Screen Size

It hides the elements based on the device by using .hide class.

Foundation supports some classes where you can hide the content by using the .hide and .invisible classes and displays nothing on the page.

Orientation Detection

The devices can determine different orientations by using landscape and portrait functionality. The hand held devices such as mobile phones specifies the different orientations when you rotate them. For desktop, the orientation will be landscape always.

Accessibility

The following table lists the accessibility techniques for screen readers which hides the content while making it readable by screen readers −

Sr.No. Accessibility Class & Description
1 Show for Screen Readers

It uses show-for-sr class to hide the content while preventing screen readers from reading it.

2 Hide for Screen Readers

It uses aria-hidden attribute which makes text visible but could not be read by a screen reader.

3 Creating Skip Links

Screen reader will create a skip link to get the navigation to your site's content.

Sass Reference

Foundation uses the following mixins to display CSS output, which allows building own class structure for your components −

Sr.No. Mixin & Description Parameter Type
1

show-for

By default, it hides an element and displays it above certain screen size.

$size Keyword
2

show-for-only

By default, it hides an element and displays it within breakpoint.

$size Keyword
3

hide-for

By default, it shows an element and hides it above a certain screen size.

$size Keyword
4

hide-for-only

By default, it shows an element and hides it above a certain screen size.

$size Keyword

The default value of all these mixins will be set to none.

Advertisements