react-responsive-grid

    0.3.4 • Public • Published

    BuildStatus

    react-responsive-grid

    Power tools for building responsive layouts with React.

    WIP, porting best ideas from Susy to a React-friendly and CSS-independent format.

    Susy porting progress

    Container

    • Basic fluid container
    • static
    • non-centered layouts
    • container positions (left, center (default), right, length (left and right))

    Breakpoint

    • Basic component width breakpoints (note this is different than a media query breakpoint)
    • Media query breakpoints

    Columns

    • set number of columns
    • list — create asymmetrical grids. List the size of each column relative to other columns where 1 is a single column-unit. (1,2) would create a 2-column grid where the second column being twice the width of the first.

    Gutter options

    • margin-based
    • padding-based
    • explicit gutter width

    Gutter positions

    • before
    • after
    • inside
    • inside-static
    • split

    Span

    • Set # of columns
    • Set arbitrary width
    • Remove last gutter by "last" prop
    • Remove first gutter by "first" prop
    • Support nested spans
    • Set location of span using "at" prop
    • Span external gutters (in addition to internal gutters)
    • "break" prop — start new row by clearing previous spans
    • No gutters option
    • "full" prop — shortcut for a span to fill its entire context
    • "pre" prop — add margin before a span
    • "post" prop — add margin after a span
    • "squish" prop — shortcut for adding pre and post margins to the same span
    • "pull" prop — add negative margin before a span pulling it against the direction of flow
    • "prefix" prop — add padding before a span
    • "suffix" prop — add padding after a span
    • "pad" prop — add padding before and after a span
    • "bleed" prop — Apply negative margins and equal positive padding so that span borders and backgrounds "bleed" outside of their containers
    • "bleed-x" prop — a shortcut for applying only left and right (horixontal) bleed
    • "bleed-y" prop — a shortcut for applying only top and bottom (vertical) bleed

    Debuggin

    • Show grid

    Install

    npm i react-responsive-grid

    DownloadsWeekly Downloads

    46

    Version

    0.3.4

    License

    MIT

    Last publish

    Collaborators

    • kylemathews