React Layout

The Every Layout layouts implemented as a set of React components.

Install

$ yarn add @intactile/react-layout

Setup

This set of components is highly opiniated and as advised in “Every Layout” it makes use of a modular scale to set some sensible default. You should define at least 2 custom css properties: --s1 (default spacing value) and --measure (sensible default for the length of a text line). I encourage you to start with the following scale and adapt it to your needs.

:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

  --measure: 65ch;
}

Use

import { Box } from '@intactile/react-layout';

function MyComponent() {
  return (
    <Box>content</Box>
  );
}

Layouts

Eleven differents layouts are currently implemented: Box, Center, Cluster, Cover, Frame, Grid, Imposter, Reel, Sidebar, Stack and Switcher.

Box

Props

| Name | Type | Default | Description | | ------------ | ------- | -------- | ----------- | | padding | string | var(--s1, 1.5rem) | Set the padding around the box, accept any valid css size value | | borderWidth | number | 1 | Set the width of the border around the box |

Center

Props

| Name | Type | Default | Description | | ------------ | ------- | -------- | ----------- | | gutters | string | null | Set the gutters on each side of the layout, accept any valid css size value | | max | string | var(--measure, 65ch) | Set the max width of the layout, accept any valid css size value | | andText | bool | false | Should the text inside the layout also be centered or not? | | intrinsic | bool | false | Should the “nodes” inside the layout also be centered or not? |

Cluster

Props

| Name | Type | Default | Description | | ------------ | ------- | -------- | ----------- | | space | string | var(--s1, 1.5rem) | Set the gutters on each side of the layout, accept any valid css size value | | justify | string | flex-start | Use a valid justify-content css property value | | align | string | flex-start | Use a valid align-items css property value |

Sidebar

Props

| Name | Type | Default | Description | | ------------ | ------- | -------- | ----------- | | side | string | left | Which element to treat as the sidebar, accept "left" or "right" | | sideWidth | string | null | Represents the width of the sidebar when adjacent. If not set (null) it defaults to the sidebar's content width | | contentMin | string | 50% | A CSS percentage value. The minimum width of the content element in the horizontal configuration | | space | string | var(--s1) | Set the space between the sidebar and the main content, accept any valid css margin value |

Stack

Props

| Name | Type | Default | Description | | ------------ | ------- | -------- | ----------- | | space | string | var(--s1) | Set the space between each children of the layout, accept any valid css margin value | | splitAfter | number | null | The element after which to split the stack with an auto margin |

Switcher

Props

| Name | Type | Default | Description | | ------------ | ------- | -------- | ----------- | | space | string | var(--s1) | Set the space between each children of the layout, accept any valid css margin value | | threshold | number | var(--measure) | Represent the container breakpoint, accept any valid css width value | | limit | number | 4 | Represent the maximum number of items allowed for a horizontal layout |