Skip to content
Simple and powerful tool for creating breakpoints in styled components and emotion. πŸ’…
TypeScript JavaScript
Branch: master
Clone or download
mg901 Merge pull request #410 from mg901/dependabot/npm_and_yarn/all-contri…
…butors-cli-6.11.2

build(deps-dev): bump all-contributors-cli from 6.11.1 to 6.11.2
Latest commit de38ba7 Dec 10, 2019
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 Merge pull request #410 from mg901/dependabot/npm_and_yarn/all-contri… Dec 10, 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.