Every Layout

This is a collection of Styled Components for the awesome Every Layout, by Heydon Pickering & Andy Bell

Here's an excerpt from to explain why these components are important:

Relearn CSS layout

If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS. Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.

Installation

npm i every-layout

Usage

You can destructure the default export for whichever components you'd like. For example:

import { Cover, Stack } from 'every-layout';
// OR
const { Cover, Stack } = require('every-layout');

Component Customization

Every component has some sane defaults, but can be overriden for custom styling. You can also pass any component a style prop to add your own styles.

Stack

A stack of items on top of each other. The Stack component stacks all of it's children with the specified margin between them.

Example:

<Stack space="1.5rem">
  <h2>Header</h2>
  <img src={logo} className="App-logo" />
  <p>Paragraph</p>
</Stack>

Prop	Usage	Default
space	margin-top	1rem

Sidebar

Any two components that can go next to each other if there is enough space. Otherwise, Sidebar reverts to stacking them on top of each other. The first child is the "sidebar", and the second child is the "content". More than two children will result in undefined behaviour.

Example:

<Sidebar
  space="1rem"
  contentMinWidth="50%"
  sidebarWidth="20rem"
  elastic={false}
>
  <div>Hello</div>
  <div>Hi</div>
</Sidebar>

Prop	Usage	Default
space	margin	1rem
elastic	Whether or not sidebar width is specified, must be used in conjunction with sidebarWidth	false
sidebarWidth	flex-basis	20rem
contentMinWidth	Width at which the sidebar breaks to go on top on content, min-width	50%

Cover

Cover treats one of it's children as the "principal" component, and will center it vertically within it. Other components will be spread between the top and bottom, pushed to the edge of the container's boundaries.

The principal component must have a principal className.

Example:

<Cover minHeight="100vh" padding="1rem" margin="1rem">
  <Stack className="principal">
    <h1>How To Create A Book Cover</h1>
    <p>With Flexbox & Love</p>
  </Stack>
  <p>By Heydon Pickering and Aaroh Mankad</p>
</Cover>

Prop	Usage	Default
padding	padding	1rem
margin	margin	1rem
minHeight	Default height of the Cover component, min-height	100vh