Skip to content

Instantly share code, notes, and snippets.

@pavanprakash21
Last active March 26, 2021 09:59
Show Gist options
  • Save pavanprakash21/77af40daeb68bce604e9d077c0212f75 to your computer and use it in GitHub Desktop.
Save pavanprakash21/77af40daeb68bce604e9d077c0212f75 to your computer and use it in GitHub Desktop.
Easier way to handle and write styles for different viewports using CSS in JS

Usage

phone`
  your css styles go here
`
import { breakpoint } from './screenSize';
export const phone = (...styles) => {
return `@media${breakPoint.xxs}{
${styles}
}`;
};
export const tablet = (...styles) => {
return `@media${breakPoint.sm}{
${styles}
}`;
};
export const desktop = (...styles) => {
return `@media${breakPoint.md}{
${styles}
}`;
};
const screenSize = {
xs: 480,
sm: 768,
md: 996,
lg: 1280,
};
const minWidth = {
xs: `(min-width: ${screenSize.xs}px)`,
sm: `(min-width: ${screenSize.sm}px)`,
md: `(min-width: ${screenSize.md}px)`,
lg: `(min-width: ${screenSize.lg}px)`,
};
const maxWidth = {
xxs: `(max-width: ${screenSize.xs - 1}px)`,
xs: `(max-width: ${screenSize.sm - 1}px)`,
sm: `(max-width: ${screenSize.md - 1}px)`,
md: `(max-width: ${screenSize.lg - 1}px)`,
};
const breakPoint = {
xxs: maxWidth.xxs,
xs: `${minWidth.xs} and ${maxWidth.xs}`,
sm: `${minWidth.sm} and ${maxWidth.sm}`,
md: `${minWidth.md} and ${maxWidth.md}`,
lg: minWidth.lg,
};
export { minWidth, maxWidth, breakPoint, screenSize };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment