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.
| 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. |
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 |
No comments:
Post a Comment