Responsive Layout

Responsive Layout -

We will be using Hedron for creating responsive layouts.

Basic hedron example -

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

const App = () => (
  <Grid.Provider
    padding="20px"
    breakpoints={{ sm: "-500", md: "501-768", lg: "+769" }}
  >
    <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>
);

export default App;

Simply said their are 3 parts to creating a responsive layout using hedron

• Grid.Provider
• Grid.Bounds
• Grid.Box

Grid.Provider -

Used for defining breakpoints, enableing debug mode if required.

Props -

It has 2 props padding and breakpoints

• padding: string, e.g "20px" - default padding to use for child Grid.Box components
• breakpoints: { key: string }, e.g small : -500
  • Breakpoints for setting resolution-specific properties on child Grid.Box components. Here's a basic outline for writing breakpoint queries:
    • -500 means that the breakpoint will trigger at 500px and smaller
    • 250-800 means that the breakpoint will trigger between 250px and 800px
    • +900 means that the breakpoint will trigger at 900px and larger

Use the below names for basic breakpoints/bounds whenever necessary and name approprietly whenever extra/specific breakpoints are required.

 <Grid.Provider
    breakpoints={{ mobile: "-500", tablet: "501-768", wide: "+769" }}
/>

Grid.Bounds -

• 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 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. (Properties at the end)
• Grid.Bounds accepts aliases for the width property. (properties at the end)

Grid.Box -

• 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 left 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.
• Grid.Box accepts aliases for the width property.

Stylable Properties -

• padding: string - structure: 20px
• margin: string - structure: 20px
• width: string - structure: 100px
• height: string - structure: 100px
• visibility: string - visible | hidden | collapse | initial | inherit
• display: string - inline | block | contents | flex | grid | inline-block | none | initial | inherit | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row
• opacity: float - 0-1.0
• background: string - structure: color
• border: string - structure: width style color
• hidden: boolean

Aliases for the width property -

• half - 50%
• quarter - 25%
• third - 33.3333333%
• twoThirds - 66.666666%
• threeQuarters - 75%

For better understand see examples on the headron website