hedron

A no-frills flexbox grid system for React, powered by styled-components. https://hedron.garet.io

Quick Jump

  1. Features
  2. Requirements
  3. Installation
  4. Usage
  5. Upgrading from Pre-1.0
  6. 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 hedron to work.

Installation

Using yarn

yarn add hedron@next

Using npm

npm install hedron@next

Usage

Basic Example

import React from "react";
import ReactDOM from "react-dom";
import Grid from "hedron";

const App = () => (
  
    Header
    Content
    Footer
  
);

ReactDOM.render(, 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 "hedron";

const App = () => (
  
    
      
        This header hides on small screens
      
      Content
      
        This footer gains extra padding on large screens
      
    
  
);

ReactDOM.render(, 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 "hedron";

const App = () => (
  
    
      Header
      Content
      
        These boxes render side by side on wide screens
        These boxes render side by side on wide screens
      
    
  
);

ReactDOM.render(, 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.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares