styled-bootstrap-responsive-breakpoints
v7.0.1
Published
Bootstrap responsive breakpoints for styled-components (and other CSS-in-JS techniques)
Downloads
42
Readme
styled-bootstrap-responsive-breakpoints
Bootstraps Responsive Breakpoints as functions for styled-components (and other CSS-in-JS techniques).
Install
yarn add styled-components styled-bootstrap-responsive-breakpoints
# or
npm install styled-components styled-bootstrap-responsive-breakpoints --save
Usage
import { mediaBreakpointOnlyXl } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
background-color: red;
${mediaBreakpointOnlyXl`
background-color: blue;
`}
`
API
Following media query ranges and/or breakpoints are available:
List
mediaBreakpointBetween
mediaBreakpointUpSm
mediaBreakpointUpMd
mediaBreakpointUpLg
mediaBreakpointUpXl
mediaBreakpointDownXs
mediaBreakpointDownSm
mediaBreakpointDownMd
mediaBreakpointDownLg
mediaBreakpointOnlyXs
mediaBreakpointOnlySm
mediaBreakpointOnlyMd
mediaBreakpointOnlyLg
mediaBreakpointOnlyXl
breakpoints
mediaBreakpointUpSm
Small devices (landscape phones, 576px and up)
import { mediaBreakpointUpSm } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointUpSm`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 576px) {
background-color: blue;
}
`
mediaBreakpointUpMd
Medium devices (tablets, 768px and up)
import { mediaBreakpointUpMd } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointUpMd`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 768px) {
background-color: blue;
}
`
mediaBreakpointUpLg
Large devices (desktops, 992px and up)
import { mediaBreakpointUpLg } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointUpLg`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 992px) {
background-color: blue;
}
`
mediaBreakpointUpXl
Extra large devices (large desktops, 1200px and up)
import { mediaBreakpointUpXl } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointUpXl`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 1200px) {
background-color: blue;
}
`
mediaBreakpointDownXs
Extra small devices (portrait phones, less than 576px)
import { mediaBreakpointDownXs } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointDownXs`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (max-width: 575px) {
background-color: blue;
}
`
mediaBreakpointDownSm
Small devices (landscape phones, less than 768px)
import { mediaBreakpointDownXs } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointDownXs`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (max-width: 767px) {
background-color: blue;
}
`
mediaBreakpointDownMd
Medium devices (tablets, less than 992px)
import { mediaBreakpointDownXs } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointDownXs`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (max-width: 991px) {
background-color: blue;
}
`
mediaBreakpointDownLg
Large devices (desktops, less than 1200px)
import { mediaBreakpointDownLg } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointDownXs`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (max-width: 1199px) {
background-color: blue;
}
`
mediaBreakpointOnlyXs
Extra small devices (portrait phones, less than 576px)
import { mediaBreakpointOnlyXs } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointOnlyXs`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (max-width: 575px) {
background-color: blue;
}
`
mediaBreakpointOnlySm
Small devices (landscape phones, 576px and up)
import { mediaBreakpointOnlySm } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointOnlySm`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 576px) and (max-width: 767px) {
background-color: blue;
}
`
mediaBreakpointOnlyMd
Medium devices (tablets, 768px and up)
import { mediaBreakpointOnlyMd } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointOnlyMd`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 768px) and (max-width: 991px) {
background-color: blue;
}
`
mediaBreakpointOnlyLg
Large devices (desktops, 992px and up)
import { mediaBreakpointOnlyLg } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointOnlyLg`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 992px) and (max-width: 1199px) {
background-color: blue;
}
`
mediaBreakpointOnlyXl
Extra large devices (large desktops, 1200px and up)
import { mediaBreakpointOnlyXl } from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointOnlyXl`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 1200px) {
background-color: blue;
}
`
mediaBreakpointBetween
Media queries may span multiple breakpoint widths:
import {
breakpoints,
mediaBreakpointBetween
} from "styled-bootstrap-responsive-breakpoints";
const foobar = styled.div`
${mediaBreakpointBetween(breakpoints.md, breakpoints.xl)`
background-color: blue;
`}
`
// turns into
const foobar = styled.div`
@media (min-width: 768px) and (max-width: 1199px) {
background-color: blue;
}
`
breakpoints
Object of Bootstraps default grid breakpoints
import { breakpoints } from "styled-bootstrap-responsive-breakpoints";
console.log(breakpoints);
/*
outputs:
{
xs: "0px",
sm: "576px",
md: "768px",
lg: "992px",
xl: "1200px",
};
*/
Unitless breakpoints
You can also import the unitless breakpoints
import { xs, sm, md, lg, xl } from "styled-bootstrap-responsive-breakpoints";
License
MIT