Helpers

SFUMATO includes media breakpoint-based CSS custom properties and tag attributes for controlling layouts and keeping CSS code lean. One example is the [sf-hide] tag attribute which allows you to easily hide and show elements based on media breakpoints.

Or if you need to visually hide an element without using display: none; you can use the [sf-visually-hide] tag attribute instead. This attribute hides an element using a combaination of properties including clip, overflow, width, height, position, and others to keep the element on-page but invisible. This is helpful for animations and other times when display: none; won't work.

[sf-hide]

Hide an element based on a media breakpoint using display: none;.

• Hide at a breakpoint

  [sf-hide], [sf-tabp-hide], etc.

• Hide at a breakpoint and above

  [sf-hide-tabp-and-up], etc.

• Hide below a breakpoint

  [sf-hide-below-tabp], etc.

Example

                                                    
                                                        <div sf-hide-tabp-and-up></div>
                                                        <div sf-hide-below-tabp sf-hide-desk-and-up></div>
                                                    
                                                

[sf-visually-hide]

Hide an element based on a media breakpoint without using display: none;.

• Hide at a breakpoint

  [sf-visually-hide], [sf-tabp-visually-hide], etc.

• Hide at a breakpoint and above

  [sf-visually-hide-tabp-and-up], etc.

• Hide below a breakpoint

  [sf-visually-hide-below-tabp], etc.

Example

                                                    
                                                        <div sf-visually-hide-tabp-and-up></div>
                                                        <div sf-visually-hide-below-tabp sf-visually-hide-desk-and-up></div>