@intactile/react-layout v0.6.0

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

Center

Props

Cluster

Props

Sidebar

Props

Stack

Props

Switcher

Props