Screens

Screens is one of the properties of the configuration. This property holds the configuration of different breakpoints used in combination with media queries. By default these are mobile, tablet, laptop and desktop. Classy-UI automatically exposes these as composers:
import { tablet, tokens } from 'classy-ui';
​
const myClass = tablet(tokens.color.RED_50);
myClass text is now red only up to the tablet breakpoint defined in the config, which by default is 768px. If you were to change out these screens properties in the configuration, their respective composers would be exposed. They will be correctly typed. For example small:
import { tokens, small } from 'classy-ui';
​
const myClass = small(tokens.color.RED_50);
The screen composers and be used together with the core composer:
import { compose, mobile, tablet, tokens } from 'classy-ui';
​
const myClass = compose(
  mobile(tokens.color.RED_50),
  tablet(tokens.color.BLUE_50)
)
Configure screens
Screens defines the media queries your tokens can operate within. You can name them whatever you want and define whatever query you want. The callback also receives the breakpoints defined in the configuration. This is the default screens, which you can change out:
The default media queries of Classy-UI is a "big screen first" approach. That means the tokens defined within a specific screen is only active within that screen size, even desktop.
classy-ui.config.js
module.exports = {
  screens: {
    mobile: (css, breakpoints) => `@media (max-width: ${breakpoints.MOBILE}) {${css}}`,
    tablet: (css, breakpoints) => `@media (max-width: ${breakpoints.TABLET}) {${css}}`,
    laptop: (css, breakpoints) => `@media (max-width: ${breakpoints.LAPTOP}) {${css}}`,
    desktop: (css, breakpoints) => `@media (max-width: ${breakpoints.DESKTOP}) {${css}}`,
  }
}
You can rather do a "mobile first" approach. That means the tokens you use within a screen explicitly only works for that screen.
classy-ui.config.js
module.exports = {
  screens: {
    desktop: (css, breakpoints) => `@media (min-width: ${breakpoints.DESKTOP}) {${css}}`,
    laptop: (css, breakpoints) => `@media (min-width: ${breakpoints.LAPTOP}) {${css}}`,
    tablet: (css, breakpoints) => `@media (min-width: ${breakpoints.TABLET}) {${css}}`,
  }
}
Now all tokens are considered mobile tokens and you explicitly what should change from tablet, to laptop and to desktop. You might have noticed we changed the order. We did that because of specificity, explained below.
The function receives the CSS that should be nested in the media query definition.
The order of these keys matter. The reason is that this affects the order the media queries is also inserted in the stylesheet. Mobile in the first case should have highest specificity, as it should override the other screens when active. It is put as the first key. The same goes for desktop in the second example as that should override everything when active.
Last modified 3yr ago