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