All Projects → jameslnewell → Styled Components Breakpoint

jameslnewell / Styled Components Breakpoint

Utility function for using breakpoints with styled-components 💅.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Styled Components Breakpoint

Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. 💅
Stars: ✭ 428 (+85.28%)
Mutual labels:  media, styled-components, breakpoint
media-blender
Easy and predictable SASS/SCSS media queries
Stars: ✭ 26 (-88.74%)
Mutual labels:  breakpoint, media
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (-48.05%)
Mutual labels:  styled-components, breakpoint
styled-media-helper
💅 Helps manage media queries with styled components
Stars: ✭ 76 (-67.1%)
Mutual labels:  breakpoint, media
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-47.19%)
Mutual labels:  media, breakpoint
Backend
Media Cloud is an open source, open data platform that allows researchers to answer quantitative questions about the content of online media.
Stars: ✭ 211 (-8.66%)
Mutual labels:  media
Mediainfo.js
MediaInfo ported to the web using emscripten
Stars: ✭ 217 (-6.06%)
Mutual labels:  media
Gridtab
GridTab is a lightweight jQuery plugin to create grid based responsive tabs https://gopalraju.github.io/gridtab
Stars: ✭ 210 (-9.09%)
Mutual labels:  breakpoint
Styled Components Spacing
Responsive margin and padding components for styled-components 💅.
Stars: ✭ 209 (-9.52%)
Mutual labels:  styled-components
React World
✨🌌 A different web experience in 8 bit React.js World
Stars: ✭ 230 (-0.43%)
Mutual labels:  styled-components
Meemooapp
Creative apps to use, build, share, and hack in the browser.
Stars: ✭ 220 (-4.76%)
Mutual labels:  media
Styled Jss
Styled Components on top of JSS.
Stars: ✭ 217 (-6.06%)
Mutual labels:  styled-components
Music163 React
🔥基于React全家桶开发:「网易云音乐PC端项目」实战
Stars: ✭ 209 (-9.52%)
Mutual labels:  styled-components
Next Blog Firestore
Example of blog built with React, Next.js, Firebase Firestore, Styled-Component, Mobx State Tree and other cool technologies
Stars: ✭ 219 (-5.19%)
Mutual labels:  styled-components
Uigradients
Gradients-as-a-react-component™
Stars: ✭ 211 (-8.66%)
Mutual labels:  styled-components
Jpsxdec
jPSXdec: cross-platform PlayStation 1 audio and video converter
Stars: ✭ 219 (-5.19%)
Mutual labels:  media
Jcplayer
🎵 A simple audio player for Android applications.
Stars: ✭ 209 (-9.52%)
Mutual labels:  media
Artipub
Article publishing platform that automatically distributes your articles to various media channels
Stars: ✭ 2,685 (+1062.34%)
Mutual labels:  media
Flexi
Just a layout framework. Design for cross-platform with ease.
Stars: ✭ 220 (-4.76%)
Mutual labels:  breakpoint
Yt Dlc
media downloader and library for various sites.
Stars: ✭ 2,590 (+1021.21%)
Mutual labels:  media

styled-components-breakpoint

npm npm bundle size (minified + gzip) npm Build Status

Utility functions for creating breakpoints in styled-components 💅.

Change log

Have a look 👀 at styled-components-spacing and styled-components-grid which both work well with this package.

Installation

yarn add styled-components styled-components-breakpoint

Usage

Examples

Using the default breakpoints

./Heading.jsx

import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';

const Heading = styled.h1`

  color: #444;
  font-family: sans-serif;
  
  font-size: 12px;
  
  ${breakpoint('tablet')`
    font-size: 16px;
  `}
  
  ${breakpoint('desktop')`
    font-size: 24px;
  `}
  
`;

export default Heading;

./index.jsx

import React from 'react';
import Heading from './Heading';

<Heading>Hello World!</Heading>

Using custom breakpoints

Breakpoints may be customised using ThemeProvider. For example, to use the same breakpoints as Bootstrap, you can do so like this:

./Heading.jsx

import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';

const Heading = styled.h1`

  color: #444;
  font-family: sans-serif;
  
  ${breakpoint('sm')`
    font-size: 12px;
  `}
  
  ${breakpoint('md')`
    font-size: 16px;
  `}
  
  ${breakpoint('lg')`
    font-size: 24px;
  `}
  
`;

export default Heading;

./index.jsx

import React from 'react';
import {ThemeProvider} from 'styled-components';

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

<ThemeProvider theme={theme}>
  <Heading>Hello World!</Heading>
</ThemeProvider>

API

breakpoint(gte)

breakpoint(gte, lt)

Wraps styles in a @media block.

Properties:

  • gte - Required. A string. The name of the breakpoint from which the styles will apply.
  • lt - Optional. A string. The name of the breakpoint at which the styles will no longer apply.

Returns:

The @media block.

Example:
import styled from 'styled-components';
import breakpoint from 'styled-components-breakpoint';

const Thing = styled.div`

  font-size: 12px;

  ${breakpoint('tablet')`
    font-size: 16px;
  `};

  ${breakpoint('desktop')`
    font-size: 24px;
  `};
  
`;

<Thing/>

Output:
.cESAFm {
  font-size: 12px;
}

@media (min-width: 46.0625em) {
  .cESAFm {
    font-size: 16px;
  }
}

@media (min-width: 64.0625em) {
  .cESAFm {
    font-size: 24px;
  }
}

map(value, mapValueToCSS)

Maps values to styles in @media blocks.

Properties:

  • value - Required. {[string]: T} or T. A map of values to breakpoint names.
  • mapValueToCSS - Required. T => string. A function to map a value to styles at the specified breakpoint.

Returns:

The @media blocks.

Example:
import styled from 'styled-components';
import {map} from 'styled-components-breakpoint';

const Thing = styled.div`
  ${({size}) => map(size, val => `width: ${Math.round(val * 100)}%;`)}
`;

<Thing size={{mobile: 1, tablet: 1/2, desktop: 1/4}}/>

Output:
.cESAFm {
  width: 100%;
}

@media (min-width: 46.0625em) {
  .cESAFm {
    width: 50%;
  }
}

@media (min-width: 64.0625em) {
  .cESAFm {
    width: 25%;
  }
}

createStatic()

createStatic(breakpoints)

Creates a static set of breakpoints which aren't themable.

Properties:

  • breakpoints - Optional. {[string]: number}. A map of breakpoint names and sizes.

Returns:

  • an object containing the breakpoints, the breakpoint and map functions
Example:
import styled from 'styled-components';
import {createStatic} from 'styled-components-breakpoint';

const breakpoints = createStatic();

const Thing = styled.div`

  font-size: 12px;

  ${breakpoints.tablet`
    font-size: 16px;
  `};

  ${breakpoints.desktop`
    font-size: 24px;
  `};
  
`;

<Thing/>

Output:
.cESAFm {
  font-size: 12px;
}

@media (min-width: 46.0625em) {
  .cESAFm {
    font-size: 16px;
  }
}

@media (min-width: 64.0625em) {
  .cESAFm {
    font-size: 24px;
  }
}

Default breakpoints

The default breakpoints are:

{
    mobile: 0,      // targeting all devices
    tablet: 737,    // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)
    desktop: 1025   // targeting devices that are larger than the iPad (which is 1024px in landscape mode)
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].