<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Responsive System

SWAN has responsiveness embedded in its Typography, tokens, components, and props. The default responsiveness of SWAN should not be overridden, but it’s expected that users will add their own custom responsive styling as necessary.

CSS based approaches (including core props) are preferred over JS approaches as they avoid impacting page load, flickering, and issues with SSR.

Breakpoints

SWAN has a mobile first responsive system with five breakpoints.

Name

Start

End

xs

0px

767px

sm

768px

1023px

md

1024px

1439px

lg

1440px

1919px

xl

1920px

Core Props

Most of the core props offered in SWAN such as margin, textAlign and display, have in-built responsive support. This allows finer control depending on the breakpoint.

Core props are mobile first - setting a value for sm will apply the same value for md, lg, etc.

Some typographic related props intentionally do not allow this customisation, as they are embedded into the tokens themselves.

Refer toΒ Core Props for more information.

The preview has been updated.

Tokens

Many tokens change their value depending on the breakpoint. Note that as tokensRaw does not abstract a CSS Custom Property, these do not change on breakpoint changes.

breakpoint tokens define raw values, while mq tokens act as helper functions for @media rules. The latter combine a range (`eq`, `gt`, ...) with a screen size to target one or more breakpoints.

Both of these can be used to write breakpoint-specific CSS as needed. When using mq tokens in with SASS, they will need to be interpolated per the example below.

Refer to All Tokens for more information.

In SASS, you can also use the breakpoint-mixins function:

Sever-side Rendering

During SSR, the Responsive System defaults to xs because it can’t detect screen size on the first render. This can cause a flicker when the page hydrates in the browser and updates to the correct size. If using SSR, try to avoid using different props for various screen sizes. Note that this issue only affects JavaScript-based adjustments; CSS media queries always use the actual browser width and aren’t affected.

Javascript Solutions

SWAN offers React utilities that allow for more control around the responsive system in JSX. These should only be used when the aforementioned methods aren't available. Note that in addition to Core Props having responsive support, specific props such as Carousel's slidesToShow are also responsive.

useScreenClass Hook

In combination with the ScreenClassProvider component, the useScreenClass hook can be used to get the current screen size inside of your React components.

The hook defaults to xs until ScreenClassProvider initializes. Use useIsScreenClassInitialized to check if it has initialized.

responsive Hook

The responsive hook can be used to make an entire component responsive. In most cases, this should not be used, in favour of other approaches mentioned on this page.