layabout

Layabout

Simple layout components for React.

Philosophy

• Be light on configuration, preferring to have new components over complex APIs. Understand usage directly from the component name rather than derived from combinations of props.
• Aim to solve a set of common problems, not all problems and variations.
• Be light on DOM detritus. Prefer to style existing children and containers rather than to create "wrappers" which can impact accessibility.
• Inline and override styles to reduce conflicts, dependencies, and declutter class names.

Components

ColumnLayout

Lays out its children one by one according to a set of relative column widths. Overflow continues onto the new row, following the same template.

columns (defaults to [1, ...number of children])

• An array of relative values for sizing columns amongst the total space.
• eg. columns={[2, 3]} (where the first column will take up 40% and the second 60%).

container (defaults to "div")

• A string representation of a DOM element or a React Component type to use as the container for the children.
• ColumnLayout provides a style prop. The container should be able to render style, or pass this to a child element which can (eg. DOM elements).
• eg. container={ MyContainer }
• eg. container="section"

gutterSpacing TO BE IMPLEMENTED

• Spacing between columns. Can be standard style units such as %, px, em.

Example

<ColumnLayout
  columns={[10, 13, 5]}
  gutterSpacing="2px"
  container={Article}
>
  <section></section>
  <section></section>
  <section></section>
</ColumnLayout>

In the example abovethe sections would have spacing of 10/28ths, 13/28ths, and 5/28ths of the total available width.

Future

• pass multiple layouts and the ability to switch. Useful for media queries.