Foundation Tutorial
Foundation General
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Foundation - Kitchen Sink
- Foundation - Starter Projects
- Foundation - Installation
- Foundation - Overview
- Foundation - Home
Foundation General
- Foundation - Plugins
- Foundation - Media
- Foundation - Containers
- Foundation - Navigation
- Foundation - Basic Controls
- Foundation - Typography Helpers
- Foundation - Base Typography
- Foundation - Visibility Classes
- Foundation - Forms
- Foundation - Flex Grid
- Foundation - The Grid
- Foundation - Media Queries
- Foundation - JavaScript Utilities
- Foundation - JavaScript
- Foundation - Sass
- Foundation - Global Styles
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Foundation - Visibility Classes
Foundation - Visibipty Classes
Description
Foundation uses visibipty 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 psts the visibipty classes of Foundation, which control the elements based on their browsing environment −
| Sr.No. | Visibipty Class & Description |
|---|---|
| 1 |
It shows the elements based on the device by using .show class. |
| 2 |
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 functionapty. The hand held devices such as mobile phones specifies the different orientations when you rotate them. For desktop, the orientation will be landscape always.
Accessibipty
The following table psts the accessibipty techniques for screen readers which hides the content while making it readable by screen readers −
| Sr.No. | Accessibipty Class & Description |
|---|---|
| 1 |
It uses show-for-sr class to hide the content while preventing screen readers from reading it. |
| 2 |
It uses aria-hidden attribute which makes text visible but could not be read by a screen reader. |
| 3 |
Screen reader will create a skip pnk 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