Skip to main content

Application Breakpoints

General​

Elevate by default handles 5 breakpoints:

  • xs: for sizes 375px to 499
  • sm: for sizes 500px to 767
  • md: for sizes 768px to 1024
  • lg: for sizes 1025px to 1439
  • xl: for sizes 1440px and above

Working with breakpoints on code​

Elevate handle the breakpoints and sizes of application/components in two different layers:

  • Server side: with the middleware.ts Middleware file, that gets the userAgent info and set into the request Headers so those are available to use it any time from the x-elevate-useragent header
  • Client-side: with the useMediaQuery.tsx hook which will return an object with
    • mediaQuery: the associated mediaQuery/breakpoint based on the client-side window innerWidth and the values defined above
    • size: the associated sized based on the calculated mediaQuery, check calculateSize function inside the hook to see the mapping states.

Working with breakpoints on CSS​

Elevate Web has a defaultVariables.css files inside app dir that includes a per breakpoint definition of variables for the variables with per-breakpoint value.

With this, we avoid bloating the CSS inner files with mediaQuery rules and also reduce the amount of styles to apply for each style.

warning

Design System tokens includes a per breakpoint token by default, but developers can map a set of variables using this utility to reduce CSS files for components if needed

How to update breakpoints​

If you need to update the breakpoint values sometimes you will need to update the following files:

  • src/dataModels/mediaQueries.ts
  • src/dataModels/__tests__/useMediaQuery.test.tsx
  • src/app/defaultVariables.css