Responsive

In Morfeo, handling responsiveness it's straightforward, let's start with an example:

components/Card

import { morfeo } from '../morfeo';
 
const classes = morfeo.css({
  container: {
    padding: {
      default: 'm',
      sm: 's',
    },
    bg: 'white',
    color: 'text',
  },
});
 
export function Card() {
  return (
    <div className={classes('container')}>
      This card will have different padding based on the screen size!
    </div>
  );
}

As you can see the property padding is not a plain value like s, m or l, but an object. We call this object ResponsiveValue and you can use it to specify the value that the property should have for each breakpoint (or for only some of them).

How it works

const classes = morfeo.css({
  container: {
    padding: {
      default: 'm',
      xs: 's',
      sm: 's',
      md: 'm',
      lg: 'l',
    },
  },
});

More about it

The typescript definition of the ResponsiveValue type is more or less the following:

type ResponsiveValue<Value> = {
  default?: Value;
  // keys of the breakpoints slice
  xs?: Value;
  sm?: Value;
  md?: Value;
  lg?: Value;
};

The keys xs | sm | md | lg are the breakpoints defined in your theme, in case you override them also this type will automatically change accordingly.

The values passed to xs, sm, md and lg are applied only to the corresponding breakpoints, which are defined in the breakpoints theme's slice, you don't have to specify them all but only the ones that are different from the default:

morfeo.css({
  example: {
    bg: {
      default: 'primary', // the background color will always be `primary`
      sm: 'secondary', // except for devices with screen size <= 768px
    },
  },
});

The following are the default breakpoints provided by Morfeo's default theme:

const theme = {
  // ...
  breakpoints: {
    lg: '1920px',
    md: '1366px',
    sm: '768px',
    xs: '375px',
  },
};

Mobile first

The generated media queries are, by default, mobile-first:

@media screen and (min-width: 375px) {
  /*  */
}
@media screen and (min-width: 768px) {
  /*  */
}
@media screen and (min-width: 1366px) {
  /*  */
}
@media screen and (min-width: 1920px) {
  /*  */
}

Customizations

Even though we think the defaults of Morfeo are pretty solid, you can always customize them based on your needs.

Custom breakpoints

You can customize both the keys and the values of the breakpoints slice with a custom theme:

const theme = {
  // ...
  breakpoints: {
-    lg: '1920px',
+    large: '2000px',
-    md: '1366px',
+    medium: '1500x',
-    sm: '768px',
+    small: '800px',
-    xs: '375px',
+    xsmall: '400px',
  },
};

In this case, also the Responsive Value is adapted to your new language:

morfeo.css({
  container: {
    padding: {
      default: 's',
      large: 'l',
      medium: 'm',
    },
  },
});

Custom media queries

Other than the breakpoints slice, you can also customize how the media queries are generated by using the mediaQueries theme's slice, for example:

const theme = {
  // ...
  mediaQueries: {
    xs: '@media screen and (min-width: {{xs}})',
    sm: '@media screen and (min-width: {{xs}}) and (max-width: {{md}})',
    md: '@media screen and (min-width: {{md}}) and (max-width: {{lg}})',
    lg: '@media screen (min-width: {{lg}})',
  },
};

The values wrapped with {{value}} are placeholders that will be overridden by the values of the breakpoints when the media queries are generated.

Getting Started Dark Mode