Layout

<Layout /> Component allows positioning of stackable, full width, page sections. Code is available here.

It divides the page in sections like header, body and footer sections. The different stories within the "Layout" section of the storybook demo showcase its usage.

API

All parameters are optional

Parameter	Type	Valid Values	Default
base	Number		8
innerRef	Function
fixed	String	top / bottom / undefined
margin	Array / String / Number / Object		[0]
padding	Array / String / Number / Object		[0]
show	Array / String
paddingTop	Number / String / Object
paddingRight	Number / String / Object
paddingBottom	Number / String / Object
paddingLeft	Number / String / Object
marginTop	Number / String / Object
marginRight	Number / String / Object
marginBottom	Number / String / Object
marginLeft	Number / String / Object
overflow	String	scrollbars / undefined
height	String	parent / auto / fit	fit

Height

Height determines how a <Layout/> element grows vertically. There are 3 valid values:

• parent
  • Sets height to 100% to work around IE min-height issues.
  • Its content can exceed 100%.
  • Example
• fit (default)
  • Sizes <Layout /> to fit its content
  • Behaves like size="fit" on <Grid/> but for vertical spacing.
  • Example
• auto
  • Sizes to fill the available space
  • If there are multiple siblings with height="auto", divides vertical space evenly among them.
  • Behaves like size="auto" on <Grid /> but for vertical spacing.
  • Example

Spacing

There are 2 ways to define separation between Grids, padding and margin. They are both defined following css syntax as explained here.

Margin

It's a shorthand for setting marginTop, marginRight, marginBottom and marginLeft individually. Values set represent multiples or fractions of base (8px). E.g. margin={1} is equivalent to margin: 8px in css. Similarly, margin="1 0" will set vertical margin to 24px and horizontal one to 0.

Check the formats section in spacing to see the different valid values.

Spacing aliases can be mixed with non alias values. For instance margin="L 2 0" is valid and so is margin={['L', 2, 0]}`.

Padding

It's a shorthand for setting paddingTop, paddingRight, paddingBottom and paddingLeft individually. Values set represent multiples or fractions of base (8px). E.g. padding={1} is equivalent to padding: 8px in css. Similarly, padding="1 0" will set vertical pading to 8px and horizontal one to 0.

Check the formats section in spacing to see the different valid values.

Spacing aliases can be mixed with non alias values. For instance padding="L 2 0" is valid and so is margin={['L', 2, 0]}`.

margin[Direction] / padding[Direction]

A number or a spacing alias indicating the margin / padding to apply on that direction as a multiple of base.

Overflow

Layout Elements overflow by default. You can set overflow="scrollbars" to sets vertical scrollbars when needed instead.

Note that this behavior is only needed if the <Layout /> element has a limited height (auto and parent).

Fixed

fixed parameter can be set to either "top" or "bottom". It forces the <Layout> Component to break out of the normal flow of the page and positions it either to the top or bottom of the page.

Note that, because of that, any element behind it may need additional padding to ensure it doesn't get placed behind it. To see an example of this and how to work around it, check the implementation of the body in the Cards Example