Go Main page
Go Main page

Web components

Foundations
Components
About
cover

utilities types

Breakpoints

v.1.0.0 | Saturn
Healthy
Github

Kubit allows to use specific styles according to the different screen sizes of the application. For this purpose, the next sizes have been defined:

  • Mobile: Screens up to 48rem wide.
  • Tablet: Screens from 48rem to 64rem wide.
  • Desktop: Screens from 64rem and upwards.
  • Large Desktop: Screens 125rem and up.

These sizes can be overwritten through the theme property MEDIA_QUERIES. To do this, an object with the following interface must be defined and added to the ThemeProvider:

12345678910
type MediaQueriesType = {
  onlyLargeDesktop: string;
  onlyDesktop: string;
  tabletAndDesktop: string;
  onlyTablet: string;
  mobileAndTablet: string;
  onlyMobile: string;
  matchMedia: {
    onlyDesktop: string;
    onlyTablet: string;

DeviceBreakpointsType

During the application of tokens and logic to a given component, we may need to know the device type of the end-user. For this purpose, the following enum has been defined:

123456
enum DeviceBreakpointsType {
  MOBILE = 'MOBILE',
  TABLET = 'TABLET',
  DESKTOP = 'DESKTOP',
  LARGE_DESKTOP = 'LARGE_DESKTOP',
}

Handling Media Devices

To apply specific styles, or a specific behaviours, we can use the following strategies:

  • Use useMediaDevice hook. This hook will return the current device of the end user.
  • Use useActiveBreakpoints hook. This hook will return the active breakpoints of the end user.
  • Apply specific styles to the component via the end user's screen size. More info in the Theme Types section.
ThemeTheme Types
EnumsPositions