Responsive Styles

Use arrays as values to specify mobile-first responsive styles for CSS-in-JS projects

The main idea of this library is to provide a framework agnostic way to easily enable any property to become responsive.

This is 100% inspired by the awesome work done by Brent Jackson on Rebass.

Install

npm i responsive-styles

Usage

This library was tested against Aphrodite, glamor and emotion so far and they all seem to work nicely.

Aphrodite and React

import React from 'react'
import { render } from 'react-dom'
import { StyleSheet, css } from 'aphrodite/no-important'
import combineSameKeys from 'combine-same-keys'
import responsiveStyles from 'responsive-styles'
 
const breaks = [48, 64, 80]
const r = (props, values) => responsiveStyles(props, values, breaks)
 
const styles = StyleSheet.create({
  // A la functional CSS
  padding: r('padding', [8, 24, 48]),
  fontSize: r('fontSize', [16, 24, 36]),
 
  // Combine multiple definitions into a single class name
  colors: combineSameKeys(
    r('color', ['#FFF', '#005782', '#820005', '#16160B']),
    r('backgroundColor', ['#FF0066', '#27D88E', '#FFF5C3', '#E1E1E1'])
  )
})
 
const className = css(styles.padding, styles.fontSize, styles.colors)
 
const App = () => <div className={className}><h1>Aphrodite</h1></div>
 
render(<App />, document.querySelector('[data-app]'))

glamor and React

import React from 'react'
import { render } from 'react-dom'
import { css } from 'glamor' // The API is exactly the same for emotion
import combineSameKeys from 'combine-same-keys'
import responsiveStyles from 'responsive-styles'
 
const breaks = [48, 64, 80]
const r = (props, values) => responsiveStyles(props, values, breaks)
 
// A la functional CSS
const padding = css({
  ...r('padding', [8, 24, 48]),
})
 
const fontSize = css({
  ...r('fontSize', [16, 24, 36]),
})
 
// Combine multiple definitions into a single class name
const colors = css(
  combineSameKeys(
    r('color', ['#FFF', '#005782', '#820005', '#16160B']),
    r('backgroundColor', ['#FF0066', '#27D88E', '#FFF5C3', '#E1E1E1'])
  )
)
 
const className = `${padding} ${fontSize} ${colors}`
 
const App = () => <div className={className}><h1>Glamor and Emotion</h1></div>
 
render(<App />, document.querySelector('[data-app]'))

Examples

If you want to checkout working examples for all libraries, you can download the project, install its dependencies and run:

npm start

API

`responsive(propertyOrValues, [maybeValues], [breaks])`

`propertyOrValues`

Type: String or Array

Property name or an array with all the values for each breakpoint.

`maybeValues`

Type: Array

Array with all the values for each breakpoint.

`breaks`

Type: Array

List of breakpoints available, from smallest to largest. You can pass straight up numbers which will default to em values, or you can simply pass down a list of strings with the units you want.

For more examples and details about how the project works, please check our guide.

License

Buy me a ☕