Blueprint is a small set of typed React components for quickly laying out groups of elements.
npm install @cohubinc/blueprint
yarn add @cohubinc/blueprint
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 |
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 |
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 |
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 |