@mbernal/flex-layout
v2.0.0
Published
Custom React Layout System inspiried by bootstrap using flex-box
Downloads
4
Readme
New Selkirk React Component
Layout systems utilizing react components and flex css
Notes
Place any special considerations, limitations etc here
Layout Properties
Layout.propTypes = {
el:PropTypes.oneOfType([PropTypes.string,PropTypes.element]),
row:PropTypes.bool,
column:PropTypes.bool,
rowReverse:PropTypes.bool,
columnReverse:PropTypes.bool,
inline:PropTypes.bool,
wrap:PropTypes.bool,
noWrap:PropTypes.bool,
wrapReverse:PropTypes.bool,
center:PropTypes.bool,
fillContainer:PropTypes.bool,
xs:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
sm:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
md:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
lg:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
xl:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
alignItems:PropTypes.oneOf(['start','center','end']),
justifyContent:PropTypes.oneOf(['start','center','end','around','between'])
}
Cell Properties
Cell.propTypes = {
el:PropTypes.oneOfType([PropTypes.string,PropTypes.element]),
gutterBottom:PropTypes.bool,
auto:PropTypes.bool,
none:PropTypes.bool,
fillContainer:PropTypes.bool,
xs:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
sm:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
md:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
lg:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
xl:PropTypes.oneOfType([PropTypes.number,PropTypes.bool]),
self:PropTypes.oneOf(['start','center','end','stretch']),
center:PropTypes.bool
}
Basic Usage
- Clone this repo
- Inside cloned repo run
npm install
- If you want to run tests:
npm test
ornpm run testonly
ornpm run test-watch
. You need to write tests in__tests__
folder. You need at least Node 4 on your machine to run tests. - If you want to run linting:
npm test
ornpm run lint
. Fix bugs:npm run lint-fix
. You can adjust your.eslintrc
config file. - If you want to run transpilation to ES5 in
dist
folder:npm run prepublish
(standard npm hook).