Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including reflexer with all npm packages installed. Try it out:

require("styled-components/package.json"); // styled-components is a peer dependency. var reflexer = require("reflexer")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

reflexer v2.7.0

React flexbox grid library

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free