@mbernal/flex-layout v2.0.0

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

1. Clone this repo
2. Inside cloned repo run npm install
3. If you want to run tests: npm test or npm run testonly or npm run test-watch. You need to write tests in __tests__ folder. You need at least Node 4 on your machine to run tests.
4. If you want to run linting: npm test or npm run lint. Fix bugs: npm run lint-fix. You can adjust your .eslintrc config file.
5. If you want to run transpilation to ES5 in dist folder: npm run prepublish (standard npm hook).