pointbreak

Bootstrap breakpoints as JavaScript variables

Install with npm:

npm install pointbreak

This package contains the following variables:

var xsMin = 0;
var xsMax = 575.98;
var smMin = 576;
var smMax = 767.98;
var mdMin = 768;
var mdMax = 991.98;
var lgMin = 992;
var lgMax = 1199.98;
var xlMin = 1200;
var xlMax = Infinity;

var xsMinpx = "0px";
var xsMaxpx = "575.98px";
var smMinpx = "576px";
var smMaxpx = "767.98px";
var mdMinpx = "768px";
var mdMaxpx = "991.98px";
var lgMinpx = "992px";
var lgMaxpx = "1199.98px";
var xlMinpx = "1200px";
var xlMaxpx = "20000px";

var mediaXsMin = "@media (min-width: 0px)";
var mediaXsMax = "@media (max-width: 575.98px)";
var mediaSmMin = "@media (min-width: 576px)";
var mediaSmMax = "@media (max-width: 767.98px)";
var mediaMdMin = "@media (min-width: 768px)";
var mediaMdMax = "@media (max-width: 991.98px)";
var mediaLgMin = "@media (min-width: 992px)";
var mediaLgMax = "@media (max-width: 1199.98px)";
var mediaXlMin = "@media (min-width: 1200px)";
var mediaXlMax = "@media (max-width: 20000px)";

The values taken from https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints

It's best used with styled-components, in one of the three ways shown below:

import styled from "styled-components";
import { mdMax, smMaxpx, mediaXsMax } from "pointbreak";

const Wrapper = styled.div`
  padding: 8px;

  @media (max-width: ${mdMax}px) {
    padding: 12px;
  }

  @media (max-width: ${smMaxpx}) {
    padding: 16px;
  }

  ${mediaXlMax} {
    text-align: center;
    padding: 4px;
  }
`;

That's all there is to this library.