thomaseckhardt / styled-breakpoints

Simple and powerful css breakpoints for styled-components and emotion 💅🏻

💅
styled-breakpoints

Demo sandbox

Introduction

Styled Breakpoints is simple and powerful tool for creating breakpoints in styled-components or emotion with TypeScript and Flow 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

// tablets, 768px and up
up('tablet') => '@media (min-width: 768px) { ... }'

down

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

  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

between('tablet', 'desktop') => '@media (min-width: 768px) and (max-width: 1199.98px) { ... }'

only

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 💻 🎨 📖 💡 🤔 📢	Abu Shamsutdinov 💻 💡 🤔 👀 📢	Sergey Sova 💻 💡 🤔 👀 📢

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