Skip to content
Simple and powerful tool for creating breakpoints in styled components and emotion. πŸ’…
TypeScript JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode chore: add settings for vscode Nov 12, 2019
src refactor: remove snake case notation Dec 2, 2019
.all-contributorsrc docs(.all-contributorsrc): fix login Jun 30, 2019
.czrc chore: add configs for helpers Jan 13, 2019
.editorconfig chore: add configs for helpers Jan 13, 2019
.eslintignore style(eslint): add rules Nov 12, 2019
.eslintrc.js style(eslint): add rules Nov 12, 2019
.gitignore chore: add configs for helpers Jan 13, 2019
.huskyrc.json build(husky): fix pre-push script Nov 25, 2019
.npmignore build(npmignore): add config Nov 12, 2019
.nvmrc fix(nvm): bump node version from Jul 20, 2019
.prettierignore chore(prettier): add dist folder Nov 12, 2019
.prettierrc style(trailing-comma): replace "all" with "es5" Sep 15, 2019
.size-limit.js build(size-limit): increase size limit Nov 25, 2019
.travis.yml ci(travis): remove node.js 8 Jul 20, 2019
CHANGELOG.md chore(release): 7.1.0 [skip ci] Nov 26, 2019
LICENCE chore(licence): fix copyright Jan 14, 2019
README.md feat: reduce size from 1.16kb to 958b Nov 26, 2019
commitlint.config.js chore: add configs for helpers Jan 13, 2019
jest.config.js test(jest): rewrite config for typescript Nov 12, 2019
lint-staged.config.js chore(lint-staged): remove "linters" field Jul 2, 2019
package.json chore(release): 7.1.0 [skip ci] Nov 26, 2019
release.config.js chore: add configs for helpers Jan 13, 2019
tsconfig.json fix: fix entry point for modules Nov 12, 2019
yarn.lock build: update lock file Dec 7, 2019

README.md

πŸ’…
styled-breakpoints
build status coverage status npm bundle size npm downloads npm version




Demo sandbox

Edit styled-breakpoints with TypeScript

Introduction

Styled Breakpoints is simple and powerful tool for creating breakpoints in Styled Components, Emotion, with TypeScript type annotations out of the box.

Installation

yarn add styled-breakpoints
npm i styled-breakpoints

Usage

With Default breakpoints

{
  tablet: '768px',
  desktop: '992px',
  lgDesktop: '1200px',
}
import styled from 'styled-components';
import { up, down, between, only } from 'styled-breakpoints';

const Component = styled.div`
  color: black;

  ${down('tablet')} {
    color: lightcoral;
  }

  ${only('tablet')} {
    color: rebeccapurple;
  }

  ${between('tablet', 'desktop')} {
    color: hotpink;
  }

  ${up('lgDesktop')} {
    color: hotpink;
  }
`;

Custom breakpoints

Breakpoints like Bootstrap responsive breakpoints.

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { up, down, between, only } from 'styled-breakpoints';

const theme = {
  breakpoints: {
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
  },
};

const Component = styled.div`
  color: black;

  ${only('sm')} {
    color: rebeccapurple;
  }

  ${between('sm', 'md')} {
    color: hotpink;
  }

  ${down('lg')} {
    color: lightcoral;
  }

  ${up('xl')} {
    color: hotpink;
  }
`;

<ThemeProvider theme={theme}>
  <Component>This is cool!</Component>
</ThemeProvider>;

API

All incoming values are converted to em.

For example, let's take default values of breakpoints.

up

/**
 *
 * @param {string} breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
up('tablet') => '@media (min-width: 768px) { ... }'

down

We occasionally use media queries that go in the other direction (the given screen size or smaller):

/**
 *
 * @param {string} breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
  down('tablet') => '@media (max-width: 991.98px) { ... }'

Note that since browsers do not currently support range context queries, we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.


Similarly, media queries may span multiple breakpoint widths:

between

/**
 *
 * @param {string} min breakpoint name
 * @param {string} max breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
between('tablet', 'desktop') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'

only

/**
 *
 * @param {string} breakpoint name
 * @param {string} [orientation]
 *
 * @return {string} media quiery
 */
only('tablet') => '@media (min-width: 768px) and (max-width: 991.98px) { ... }'

License

MIT License

Copyright (c) 2018-2019 Maxim Alyoshin.

This project is licensed under the MIT License - see the LICENSE.md file for details.

Contributors

Thanks goes to these wonderful people (emoji key):

Maxim
Maxim

πŸ’» 🎨 πŸ“– πŸ’‘ πŸ€” πŸ“’
Abu Shamsutdinov
Abu Shamsutdinov

πŸ’» πŸ’‘ πŸ€” πŸ‘€ πŸ“’
Sergey Sova
Sergey Sova

πŸ’» πŸ’‘ πŸ€” πŸ‘€ πŸ“’

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.