Blueprint

Blueprint is a small set of typed React components for quickly laying out groups of elements.

Installation

npm install @cohubinc/blueprint

yarn add @cohubinc/blueprint

Components

Stack

Use Stack to vertically position elements.

<Stack space={2}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</Stack>

Props

children: ReactNode[] | ReactNode;
space?: number;
alignment?: "center" | "left" | "right";
fullWidth?: boolean;
childrenWidth?: CSSProperties["width"];
style?: CSSProperties;

Prop	Description	Required	Default
children	any valid ReactNode or array of ReactNodes	true	N/A
space	rem based bottom margin applied to all child elements	false	1
alignment	horizontal alignment of the entire <Stack>	false	"left"
fullWidth	causes <Stack> to take 100% of the available horizontal space	false	false
childrenWidth	set the width of any children inside of <Stack> to any valid width value according to React's CSSProperties type	false	null
style	any additional style properties needed for Stack	false	null

Inline

Use Inline to horizontally position elements.

<Inline space={2}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</Inline>

Props

children: ReactNode[] | ReactNode;
space?: number;
alignment?: "center" | "left" | "right";
itemAlignment?: "start" | "end" | "center" | "baseline" | "stretch";
style?: CSSProperties;

Prop	Description	Required	Default
children	any valid ReactNode or array of ReactNodes	true	N/A
space	rem based right or left margin (depending on what's specified for the alignment prop)	false	1
alignment	horizontal alignment of the entire <Inline>	false	"left"
itemAlignment	used to vertically align children of <Inline>	false	"left"
style	any additional style properties needed for Stack	false	null

Spread

Use Spread to spread elements out either horizontally or vertically. Think of Spread as a normal CSS flexbox.

Props

children: ReactElement<any> | ReactElement<any>[];
direction?: "horizontal" | "vertical";
spread?: "between" | "around" | "evenly" | "start" | "end" | "center";
itemAlignment?: "start" | "end" | "center" | "baseline" | "stretch";
flexChild?: boolean;
style?: CSSProperties;

Prop	Description	Required	Default
children	any valid ReactElement or array of ReactElements	true	N/A
direction	the orientation of the <Spread>	false	"horizontal"
spread	flexbox spacing rule AKA justify-content	false	"between"
itemAlignment	used to vertically align children of <Spread>	false	"start"
flexChild	used for vertical Spreads to allow children to take up all vertical height	false	true
style	any additional style properties needed for Stack	false	null

Space

Use Space to insert whitespace between elements.

Props

height?: CSSProperties["height"];
width?: CSSProperties["width"];
unit?: | "cm" | "mm" | "in" | "px" | "pt" | "pc" | "em" | "rem" | "ex" | "ch" | "vw" | "vh" | "vmin" | "vmax" | "%";

Prop	Description	Required	Default
height	the height of the <Space>	false	"inherit"
width	the width of the <Space>	false	"inherit"
unit	the unit value for height and width	false	"rem"
reveal	show the space by setting its background color to black (really only useful during development)	false	false