@krystiankoper/styled-flexboxgrid
v1.0.1
Published
Grid system based on flexboxgrid2 and styled-components for React
Downloads
4
Maintainers
Readme
styled-flexboxgrid
Grid system based on flexboxgrid2 and styled-components for React
Install
// with npm
$ npm install styled-flexboxgrid --save
// with yarn
$ yarn add styled-flexboxgrid
`styled-flexboxgrid` depends on these peer dependencies:
- `prop-types@^15.5.4`
- `react@^15.0.0 || ^16.0.0`
- `react-dom@^^15.0.0 || ^16.0.0`
- `styled-components@2`
You have to install them in your project.
Usage
import React from 'react';
import { Container, Row, Col } from '@krystiankoper/styled-flexboxgrid';
class App extends React.Component {
render() {
return (
<Container fluid>
<Row>
<Col xs={12} sm={6} md={3} lg={2} xl={1}>
Styled FlexboxGrid
</Col>
</Row>
</Container>
);
}
}
Container
fluid
(Boolean)
Col
reverse
(Boolean) -flex-direction: column-reverse;
xs
(Boolean | Integer) -Boolean [true] -> flex-grow: 1; flex-basis: 0; max-width: 100%;
orBoolean [false] -> display: none;
orInteger [1-12] -> flex-basis: ((100 / gridSize) * value)%
sm
(Boolean | Integer) -Boolean [true] -> flex-grow: 1; flex-basis: 0; max-width: 100%;
orBoolean [false] -> display: none;
orInteger [1-12] -> flex-basis: ((100 / gridSize) * value)%
md
(Boolean | Integer) -Boolean [true] -> flex-grow: 1; flex-basis: 0; max-width: 100%;
orBoolean [false] -> display: none;
orInteger [1-12] -> flex-basis: ((100 / gridSize) * value)%
lg
(Boolean | Integer) -Boolean [true] -> flex-grow: 1; flex-basis: 0; max-width: 100%;
orBoolean [false] -> display: none;
orInteger [1-12] -> flex-basis: ((100 / gridSize) * value)%
xl
(Boolean | Integer) -Boolean [true] -> flex-grow: 1; flex-basis: 0; max-width: 100%;
orBoolean [false] -> display: none;
orInteger [1-12] -> flex-basis: ((100 / gridSize) * value)%
xsOffset
(Integer) -value [1-12] -> margin-left: ((100 / gridSize) * value)%
smOffset
(Integer) -value [1-12] -> margin-left: ((100 / gridSize) * value)%
mdOffset
(Integer) -value [1-12] -> margin-left: ((100 / gridSize) * value)%
lgOffset
(Integer) -value [1-12] -> margin-left: ((100 / gridSize) * value)%
xlOffset
(Integer) -value [1-12] -> margin-left: ((100 / gridSize) * value)%
Row
reverse
(Boolean) -flex-direction: row-reverse;
start
(xs|sm|md|lg|xl) -justify-content: flex-start;
center
(xs|sm|md|lg|xl) -justify-content: center;
end
(xs|sm|md|lg|xl) -justify-content: flex-end;
top
(xs|sm|md|lg|xl) -align-items: flex-start;
middle
(xs|sm|md|lg|xl) -align-items: center;
bottom
(xs|sm|md|lg|xl) -align-items: flex-end;
around
(xs|sm|md|lg|xl) -justify-content: space-around;
between
(xs|sm|md|lg|xl) -justify-content: space-between;
first
(xs|sm|md|lg|xl) -order: -1;
last
(xs|sm|md|lg|xl) -order: 1;
License
MIT © krystiankoper