Foundation - Visibility Classes

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 user to use elements based on the browsing environment.
  
  

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

S.N.	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 accessibility techniques for screen readers which hides the content while making it readable by screen readers:

S.N.	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 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 following mixins to display CSS output which allows building own class structure for your components:

S.N.	Mixin & Description	Parameter	Type
1	show-for By default, it hides an element and display it above certain screen size.	$size	Keyword
2	show-for-only By default, it hides an element and display it within breakpoint.	$size	Keyword
3	hide-for By default, it shows an element and hide it above certain screen size.	$size	Keyword
4	hide-for-only By default, it shows an element and hide it above certain screen size.	$size	Keyword

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