Visibility

Controling on which breakpoint an element is visible.





Visibility types

There are three types if visibility selectors in Ueyen, hidden selector un-hide, opacity selector un-invisible, and visually-hidden selector un-hide-v.



un-hide

The objects will be hidden and removed from the HTML structure flow.

un-hide-v

The element will be hidden visually and removed from the HTML structure flow, but visible to screen readers.

un-invisible

The object opacity will be 0 and is still a part of the HTML structure flow.




The un-hide and un-hide-v are resulting the same outcome, but un-hide-v is ideal for the time we need to keep a text in the element visible to the screen readers for accessibility objectives.



Visibility and breakpoints

All the selectors in the visibility type un-hide, un-hide-v and un-invisible can be followed by :s to :h (small to huge) to have different number of items on each row.



un-hide:s

Hidden - larger than Breakpoint Small

un-hide:m

Hidden - larger than Breakpoint Large.

un-hide:l

Hidden - larger than Breakpoint large.

un-hide:h

Hidden - larger than Breakpoint Huge.

un-hide-v:s

Visually hidden - larger than Breakpoint Small

un-hide-v:m

Visually hidden - larger than Breakpoint Large.

un-hide-v:l

Visually hidden - larger than Breakpoint large.

un-hide-v:h

Visually hidden - larger than Breakpoint Huge.

un-hide:s

Invisible - larger than Breakpoint Small

un-hide:m

Invisible - larger than Breakpoint Large.

un-hide:l

Invisible - larger than Breakpoint large.

un-hide:h

Invisible - larger than Breakpoint Huge.