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

• <input checked="" disabled="" type="checkbox"> Basic fluid container
• <input disabled="" type="checkbox"> static
• <input disabled="" type="checkbox"> non-centered layouts
• <input disabled="" type="checkbox"> container positions (left, center (default), right, length (left and right))

Breakpoint

• <input checked="" disabled="" type="checkbox"> Basic component width breakpoints (note this is different than a media query breakpoint)
• <input disabled="" type="checkbox"> Media query breakpoints

Columns

• <input checked="" disabled="" type="checkbox"> set number of columns
• <input disabled="" type="checkbox"> 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

• <input checked="" disabled="" type="checkbox"> margin-based
• <input disabled="" type="checkbox"> padding-based
• <input disabled="" type="checkbox"> explicit gutter width

Gutter positions

• <input disabled="" type="checkbox"> before
• <input checked="" disabled="" type="checkbox"> after
• <input disabled="" type="checkbox"> inside
• <input disabled="" type="checkbox"> inside-static
• <input disabled="" type="checkbox"> split

Span

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

Debuggin

• <input disabled="" type="checkbox"> Show grid