🛑 DEPRECATED 🛑

use vanilla-extract, linaria or any other no run-time library instead styled-components

Install

yarn add reflexer styled-components
npm install reflexer styled-components

Grid

import { Grid } from 'reflexer';

<Grid fluid?>
  grid reflexer
</Grid>

Row

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>

Col

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>

Media

import { media } from 'reflexer';

const Container = styled.div`
  ${props => media(props, 'lg')`
    color: red;
  `}
  // @media (min-width: 64em) {
  //  .fbIKz {
  //    color: red;
  //  }
  // }
`;

Theme

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')
);

Custom Media Queries

{
  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 }} />
)

Default params

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
    },
  },
};

TODO

• Test
• Coveralls