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