![](https://user-images.githubusercontent.com/9702154/44400365-89f1e480-a553-11e8-9c02-09cb2c28b754.png)
![devDependencies Status](https://camo.githubusercontent.com/d0d221349f3edfe7e47711a1ea7393a62e9b71aed46f9261eda0b486c12bf4ee/68747470733a2f2f64617669642d646d2e6f72672f73746b2d646d697472792f7265666c657865722f6465762d7374617475732e737667)
yarn add reflexer styled-components
npm install reflexer styled-components
import { Grid } from 'reflexer';
<Grid fluid?>
grid reflexer
</Grid>
import { Row } from 'reflexer';
# <params>={{ xs: <value> }} || <params>="<value>"
<Row
flexWrap={{ xs: * }}
# or such an option flexWrap="wrap"
flexDirection={{ xs: *, sm: *, ... }}
justifyContent={{ xs: *, sm: *, ... }}
alignItems={{ xs: *, sm: *, md: *, ... }}
alignContent={{ xs: *, sm: *, md: *, ... }}
>
row reflexer
</Row>
import { Col } from 'reflexer';
# <params>={{ xs: <value | 'auto'> }} || <params>="<value | 'auto'>"
<Col
basis={{ xs: 12 }}
# or such an option basis={12}
order={{ xs: 1, sm: 2, md: 3 }}
offset={{ basis: { xs: 1, sm: 2, md: 3 }, float: 'left' | 'right' }}
>
column reflexer
</Col>
import { media } from 'reflexer';
const Container = styled.div`
${props => media(props, 'lg')`
color: red;
`}
// @media (min-width: 64em) {
// .fbIKz {
// color: red;
// }
// }
`;
import { ThemeProvider } from 'styled-components';
const theme = {
reflexer: {
gridFluid: '2rem',
# or griudFluid: { xs: '2rem' }
rowGutter: '-0.5rem',
# or rowGutter: { xs: '-0.5rem', retina: '-1rem' }
colGutter: '0.5rem',
# or colGutter: { xs: '0.5rem', retina: '1rem', md: .... }
column: 20,
size: {
xs: [{ size: 32, unit: 'rem', querie: 'min-width' }, { size: 72, unit: 'rem', querie: 'max-width' }],
sm: { size: 32, unit: 'rem', querie: 'min-width' },
neRetina: 72,
retia: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
},
}
};
ReactDOM.render(
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>,
document.getElementById('root')
);
{
column: 20,
{
xSmall: [{ size: 32, unit: 'rem', querie: 'min-width' }, { size: 72, unit: 'rem', querie: 'max-width' }], // -> @media (min-width: 32rem) and (max-width: 72rem)
sm: { size: 32, unit: 'rem' /* optional and default 'em' */, media: 'min-width' /* optional and default 'min-width' */ }, // -> @media (min-width: 32rem)
md: 72, // -> @media (min-width: 72em)
retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)', // -> @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
}
}
// Usage
return (
<Row justifyContent={{ xSmall: 19, retina: 10, sm: 15, md: 2 }} />
)
export const theme = {
reflexer: {
gridFluid: '2rem',
rowGutter: '-0.5rem',
colGutter: '0.5rem',
column: 12,
size: {
xl: 75,
lg: 64,
md: 48,
sm: 30,
xs: 0, # ‘xs’ is a minimum width that reflexer will allow. By default it’s set to zero. If it is set to 30, then min-width: 30em will be generated
},
},
};