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 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.
