There are a range of state classes which can be used to show or hide elements at a certain width.
The form of the class is .is-visible
or .is-hidden
. On their own, these can be used to show or hide elements, usually using Javascript to unhide them when needed.
.is-hidden {}
.is-visible {}
@-classes can be used to specify if an element's visibility is dependent on screen size.
The @-classes are as follows:
.is-hidden@tiny {}
.is-hidden@small {}
.is-hidden@medium {}
.is-hidden@large {}
.is-hidden@huge {}
.is-visible@tiny {}
.is-visible@small {}
.is-visible@medium {}
.is-visible@large {}
.is-visible@huge {}
It's also possible to target elements with @-classes based on max- and min- sizes. Simply append a + or a - to the class name. For example, .is-hidden@small-
has the same effect as .is-hidden@small .is-hidden@tiny
.