reflexer
React flexbox grid library
Last updated 4 months ago by stk-dmitry .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install reflexer 
SYNC missed versions from official npm registry.

Greenkeeper badge npm Build Status dependencies Status devDependencies Status

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={{ size: { 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

Current Tags

  • 2.1.0-beta                                ...           beta (a year ago)
  • 2.7.0                                ...           latest (4 months ago)

31 Versions

  • 2.7.0                                ...           4 months ago
  • 2.5.1                                ...           a year ago
  • 2.5.0                                ...           a year ago
  • 2.4.0                                ...           a year ago
  • 2.3.0                                ...           a year ago
  • 2.2.0                                ...           a year ago
  • 2.1.3                                ...           a year ago
  • 2.1.0-beta                                ...           a year ago
  • 2.0.2-beta                                ...           a year ago
  • 2.0.1-beta                                ...           a year ago
  • 2.0.0-beta                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.6.0                                ...           2 years ago
  • 0.5.3                                ...           2 years ago
  • 0.5.2                                ...           2 years ago
  • 0.5.0                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.3.1                                ...           2 years ago
  • 0.3.0                                ...           2 years ago
  • 0.2.4                                ...           2 years ago
  • 0.2.3                                ...           2 years ago
  • 0.2.2                                ...           2 years ago
  • 0.2.1                                ...           2 years ago
  • 0.2.0                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
  • 0.0.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 1
This Week 1
This Month 2
Last Day 0
Last Week 0
Last Month 4
Dependencies (0)
None
Dev Dependencies (8)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |