Skip to main content

BreakPoints

Interface

Structure

interface BreakPoints {
[key: string]: string;
}

type BreakPoint = keyof Breakpoints;

Usage

// Types are re-exported for ease of use by other packages
// like @morfeo/core, @morfeo/web or @morfeo/react
import { Breakpoint, Breakpoints } from '@morfeo/spec';

Examples

Using the CLI compose command:

breakpoints.morfeo.ts
// Remove this line to add the slice to all of your themes
export const themeName = 'My Theme Name';
// Optional if you name the file breakpoints.morfeo.ts
export const sliceName = 'breakpoints';

export default {
lg: '1920px',
md: '1366px',
sm: '768px',
xs: '375px',
};

Or manually:

breakpoints.ts
import { Breakpoints } from '@morfeo/spec';

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

const myTheme = {
breakpoints,
...restOfTheTheme,
};

morfeo.setTheme('My Theme Name', myTheme);

Properties

Breakpoints slice operates with any property, in particular, you can pass to any value an object that defines its behavior in different screen sizes specified inside the breakpoints slice. For example:

With @morfeo/web
import { getStyles } from '@morfeo/web';

const { classes } = getStyles({
button: {
px: {
lg: 'm',
sm: 's',
},
},
});

button.classList.add(classes.button);
With @morfeo/react
import { useClassName } from '@morfeo/react';

function Button() {
const className = useClassName({
px: {
lg: 'm',
sm: 's',
},
});

return <button className={className}>Click me</button>;
}

You can also define this behavior directly inside the theme:

const yourTheme = {
...restOfTheTheme,
components: {
Button: {
tag: 'button',
style: {
px: {
lg: 'm',
sm: 's',
},
},
},
},
};

morfeo.setTheme('default', yourTheme);

This code will generate media queries to set the padding-left and right of the component according to the spacing m for large screens and s for small screens.

Inline Style

Media queries (and also pseudo classes/elements) cannot be handled as inline style. That's why we are using getStyles of @morfeo/web and useClassName of @morfeo/react in the examples.

The CSS class generated by this script will be something like:

@media (min-width: 1920px) {
.button {
padding-left: 24px;
padding-right: 24px;
}
}

@media (min-width: 768px) {
.button {
padding-left: 16px;
padding-right: 16px;
}
}

You can change the way Morfeo generates media queries with the slice mediaQueries

Extend Slice with custom properties

If you're using typescript and you add custom colors to your theme configuration, you'll need to merge the default Breakpoints interface with your custom one. We suggest creating a declaration file (for example: morfeo.d.ts or types.d.ts) like the following one:

import { breakpoints } from './path/to/your/custom/breakpoints';

type MyBreakpoints = typeof breakpoints;

declare module '@morfeo/spec' {
export interface Breakpoints extends MyBreakpoints {}
}

Read more about how to extend the default Morfeo Theme here.