Tetrahedron Grid

Tetrahedron Grid is a responsive flexbox grid system for styled-components that is unopinionated.

Quick Jump

1. Features
2. Requirements
3. Installation
4. Usage
5. Documentation
   1. Grid.Provider
   2. Grid.Bounds
   3. Grid.Box

Features

• Add unlimited breakpoints
• Any property can be altered by a breakpoint
• Debug mode that allows easy visualization of your layout

Requirements

The follow dependencies must be installed in your project in order for Tetrahedron Grid to work.

• styled-components 1.1.3 and up
• @tetrahedron/core 0.1.0 and up

Installation

Using yarn

yarn add @tetrahedron/grid

Using npm

npm install @tetrahedron/grid

Usage

Basic Example

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@tetrahedron/grid";

const App = () => (
  <Grid.Bounds direction="vertical">
    <Grid.Box>Header</Grid.Box>
    <Grid.Box>Content</Grid.Box>
    <Grid.Box>Footer</Grid.Box>
  </Grid.Bounds>
);

ReactDOM.render(<App />, document.getElementById("root"));

Responsive Example

To make your layout responsive, use the Grid.Provider to define breakpoints. You can add as many or as few breakpoints as you'd like.

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@tetrahedron/grid";

const App = () => (
  <Grid.Provider
    padding="20px"
    breakpoints={{ sm: [0, 500], md: [501, 750], lg: [751, 1200] }}
  >
    <Grid.Bounds direction="vertical">
      <Grid.Box sm={{ hidden: true }}>
        This header hides on small screens
      </Grid.Box>
      <Grid.Box>Content</Grid.Box>
      <Grid.Box lg={{ padding: "50px" }}>
        This footer gains extra padding on large screens
      </Grid.Box>
    </Grid.Bounds>
  </Grid.Provider>
);

ReactDOM.render(<App />, document.getElementById("root"));

If you want to be more verbose with your naming convention, that's perfectly fine too! Go ahead and name your breakpoints whatever feels right

import React from "react";
import ReactDOM from "react-dom";
import Grid from "@tetrahedron/grid";

const App = () => (
  <Grid.Provider
    breakpoints={{ mobile: [0, 500], tablet: [501, 750], laptop: [751, 1200] }}
  >
    <Grid.Bounds direction="vertical">
      <Grid.Box>Header</Grid.Box>
      <Grid.Box>Content</Grid.Box>
      <Grid.Box>Footer</Grid.Box>
    </Grid.Bounds>
  </Grid.Provider>
);

ReactDOM.render(<App />, document.getElementById("root"));

You don't need to fill all screen sizes either, if you only need elements to change on a single resolution, just add a single breakpoint! To learn more about breakpoints, check out the documentation for Grid.Provider.

Documentation

Grid.Provider

Props

• padding: string - structure: 20px
  • Default padding to use for child Grid.Box components
• breakpoints: { key: [int, int] } - structure: { name: [min, max]}
  • Breakpoints for setting resolution-specific properties on child Grid.Box components

Defining Breakpoints

Defining breakpoints gives you strong control over the way your content is rendered at various screen sizes. Any property that can be set on Grid.Box can be set per-breakpoint. Here's a few things to keep in mind when defining breakpoints:

• Breakpoints can be named whatever you'd like (with a few exceptions laid out in the next section)
• When defining breakpoints, you must pass an array object containing only two values: the min and max (both must be integers)
• Breakpoints can have overlapping values. Use responsibly though, as it's possible to produce unexpected results when setting conflicting values on a Grid.Box with overlapping breakpoints. i.e. if mobile and tablet have overlapping pixels, don't make a Grid.Box hide on mobile and show on tablet.

Restricted Breakpoint Names

Although you can name breakpoints whatever you want, there are a few names that we do not recommend using because they will conflict with existing property names. Most of these are pretty obvious and would never come up in real usage, but it's worth having a list here just to be sure!

• background
• border
• checked
• className
• dangerouslySetInnerHTML
• display
• height
• hidden
• htmlFor
• margin
• onChange
• opacity
• padding
• selected
• style
• suppressContentEditableWarning
• suppressHydrationWarning
• value
• visibility
• width

Grid.Bounds

Props

• debug : boolean
  • Outlines the grid system so you can visualize the layout
• flex: string - structure: grow shrink basis
  • Controls the CSS flex property
• direction: string - horizontal or vertical
  • Sets the primary axis the children should be in line with
• wrap: boolean
  • Sets whether the children should wrap when there's no more room on the primary axis
• valign: string - top, center, or bottom
  • Alignment of children along the vertical axis
• halign: string - left, center, or right
  • Alignment of children along the horizontal axis

Grid.Bounds also inherits all properties that Stylable has.

Grid.Box

Props

• debug : boolean
  • Outlines the grid system so you can visualize the layout
• debug : boolean
  • Outlines the grid system so you can visualize the layout
• flex: string - structure: grow shrink basis
  • Controls the CSS flex property
• fill: boolean
  • Sets whether the Box should fill up all available space
• fluid: boolean
  • Convenience property for disabling padding
• shiftRight: boolean
  • Shifts the box to the right of the parent Bounds
• shiftLeft: boolean
  • Shifts the box to the ;eft of the parent Bounds
• shiftUp: boolean
  • Shifts the box to the top of the parent Bounds
• shiftDown: boolean
  • Shifts the box to the bottom of the parent Bounds

Grid.Box also inherits all properties that Stylable has.

Credits

Tetrahedron Grid is a project by Garet McKinley

Want to help? Join our Spectrum.chat community to get started!

License

MIT