• DocumentationDocs

Emotion Breakpoints

Responsive web design is a web design method that enables the website to fit the screens of different devices automatically. Breakpoints define the screen size of the device. Cherry is built with the mobile first approach and uses Emotion to generate styles.

All media queries are defined in mq.js

const breakpoints = [0, 576, 768, 992, 1200, 1440, 1920];

const Breakpoints = {
	xs: 0,
	sm: 1,
	md: 2,
	lg: 3,
	xl: 4,
	xxl: 5,
	xxxl: 6,
};

function mq(minWidth) {
	return `@media screen and (min-width: ${breakpoints[minWidth]}px)`;
}

export { mq, Breakpoints };
${mq(Breakpoints.xs)} {
	// Media query for the Extra Small size = 0px
}
${mq(Breakpoints.sm)} {
	// Media query for the Small size = 576px
}
${mq(Breakpoints.md)} {
	// Media query for the Medium size = 768px
}
${mq(Breakpoints.lg)} {
	// Media query for the Large size = 992px
}

🖥 Desktop starts here

${mq(Breakpoints.xl)} {
	// Media query for the XL Large size = 1200px
}
${mq(Breakpoints.xxl)} {
	// Media query for the XXL Large size = 1440px
}
${mq(Breakpoints.xxxl)} {
	// Media query for the XXXL Large size = 1920px
}
Grid ComponentsEmotion Theme

Follow the creator

Join the community