Easier way to handle and write styles for different viewports using CSS in JS

Readme.md

Usage

phone`
  your css styles go here
`

deviceType.js

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}
  }`;
};

screenSize.js

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 };