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.
npm i responsive-stylesThis 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]'))If you want to checkout working examples for all libraries, you can download the project, install its dependencies and run:
npm startType: String or Array
Property name or an array with all the values for each breakpoint.
Type: Array
Array with all the values for each breakpoint.
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.
MIT © Rafael Rinaldi