Noosphere Possibilities Maximized

    @talixo/grid

    0.1.0 • Public • Published

    Talixo Grid

    UI components which represents grid. The base one is Segment - in traditional grid systems it's just a column. There are also Group and Masonry components, which are also Segments, so can be stacked.

    • Segment is a block (or column traditionally)
    • Group is a group of segments (or a row traditionally)
    • Masonry is group of groups

    We are using grid with 12 columns for now.

    How to install

    Package is available as @talixo/grid in NPM registry, so you can use it in your project using npm install @talixo/grid --save or yarn add @talixo/grid.

    Requirements

    Your package should additionally have some extra dependencies:

    • classnames: ^2.2.5
    • prop-types: ^15.6.1
    • react: ^16.2.0
    • react-dom: ^16.2.0
    • @talixo/shared: ^0.1.0

    These packages are required by @talixo/grid, but you have to install them manually, to avoid having different versions of these in your application.

    Supported props

    Segment

    Property name Type Default Description
    className string n/a additional class name
    size number 12 default number of columns (from small screen)
    medium number n/a number of columns from medium screen
    large number n/a number of columns from large screen
    xlarge number n/a number of columns from extra-large screen

    Group

    Property name Type Default Description
    className string n/a additional class name
    spaced boolean false Should keep spaces between?
    children Segment[] n/a Segment elements (includes also Group and Masonry)
    size number 12 look at Segment
    medium number n/a look at Segment
    large number n/a look at Segment
    xlarge number n/a look at Segment

    Masonry

    Property name Type Default Description
    className string n/a additional class name
    children Group[] n/a Group elements
    size number 12 look at Segment
    medium number n/a look at Segment
    large number n/a look at Segment
    xlarge number n/a look at Segment

    Changelog

    • 0.1.0 - initial version

    Keywords

    none

    Install

    npm i @talixo/grid

    DownloadsWeekly Downloads

    22

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • coderitual
    • michalochman
    • rangoo