@comparaonline/ui-grid
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.3 • Public • Published

    @comparaonline/ui-grid

    code style: prettier npm version

    • Row and Column components based on react-foundation project
    • Breakpoints json file included has screen breakpoints sizes

    Installation

    $ npm install --save @comparaonline/ui-grid
    

    Usage

    This package relies on the existence of the stylesheet located at dist/index.css, please import it accordly to your project needs.

    Row

    import { Row } from '@comparaonline/ui-grid';

    The known props for Row are:

    name description default value
    collapse Removes the columns gutter false
    expanded Sets width to 100% false
    collapseOn[breakpoint] Removes the gutters on the given breakpoint undefined
    uncollapseOn[breakpoint] Overrides collapseOn rules inherited from smaller sizes undefined
    equalHeightColumns Sets all the columns height to the max column height (requires flex support) false
    addVerticalGutters Adds vertical gutters to all the children columns false

    Column

    import { Column } from '@comparaonline/ui-grid';

    The known props for Column are:

    name description default value
    small, medium, large, xlarge, xxlarge Sets the column size per breakpoint small=12
    offsetOn[breakpoint] Moves block to right according to offset, undefined
    pushOn[breakpoint] Right shift column undefined
    pullOn[breakpoint] Left shift column undefined
    centeredOn[breakpoint] Centers the column on the given breakpoint undefined
    uncenteredOn[breakpoint] Overrides centeredOn rules inherited from smaller sizes undefined

    Example:

    <Row>
      <Column small={2} large={4} pushOnSmall={2} pullOnLarge={2}>
        Content
      </Column>
      <Column small={2} offsetOnLarge={4} centeredOnSmall uncenteredOnLarge>
        Content
      </Column>
    </Row>

    Visibility props

    name description default value
    showOn[breakpoint] Shows itself from the given breakpoint an higher undefined
    hideOn[breakpoint] Hides itself from the given breakpoint an higher undefined

    Breakpoints

    The breakpoints values are exported as a literal object with the following properties:

    name size
    xsmall 0px
    small 480px
    medium 600px
    large 840px
    xlarge 960px
    xxlarge 1280px

    To access to this values, simply import them:

    import { breakpoints } from '@comparaonline/ui-grid';

    Other settings

    Other relevant values are exposed using the settings object.

    import { settings } from '@comparaonline/ui-grid';

    The current output is:

    {
      gutters: {
        default: "16px"
      }
    }

    Keywords

    none

    Install

    npm i @comparaonline/ui-grid

    DownloadsWeekly Downloads

    3

    Version

    2.1.3

    License

    ISC

    Unpacked Size

    58.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • fverag
    • gnza
    • suarezcumare
    • comparaonline-dev
    • comparaonlineprivate
    • matotias
    • javierlara1989
    • smurua
    • cnovoab
    • eseceve
    • mchauca
    • pablocompara