Skip to content
This repository has been archived by the owner on Dec 9, 2022. It is now read-only.

💅 Bootstrap responsive breakpoints for styled-components (and other CSS-in-JS techniques)

License

Notifications You must be signed in to change notification settings

petetnt/styled-bootstrap-responsive-breakpoints

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

💅 Bootstrap responsive breakpoints for styled-components (and other CSS-in-JS techniques)

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published