A no-frills flexbox grid system for React, powered by styled-components.
MIT License
The follow dependencies must be installed in your project in order for hedron to work.
styled-components
1.1.3 and upyarn add hedron@next
npm install hedron@next
import React from "react";
import ReactDOM from "react-dom";
import Grid from "hedron";
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"));
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 = () => (
<Grid.Provider
padding="20px"
breakpoints={{ sm: "-500", md: "501-750", lg: "+750" }}
>
<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 "hedron";
const App = () => (
<Grid.Provider
breakpoints={{ mobile: "-500", tablet: "501-750", wide: "+750" }}
>
<Grid.Bounds direction="vertical">
<Grid.Box mobile={{ hidden: true }}>Header</Grid.Box>
<Grid.Box>Content</Grid.Box>
<Grid.Bounds direction="vertical" wide={{ direction: "horizontal" }}>
<Grid.Box>These boxes render side by side on wide screens</Grid.Box>
<Grid.Box>These boxes render side by side on wide screens</Grid.Box>
</Grid.Bounds>
</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
.
Unfortunately, there's no simple way to upgrade from the pre 1.0.0 version, but here's a few tips to make your life easier if you decide to upgrade (which we recommend doing!)
Page
and Section
components have been retired. In an effort to simplify, there are only two main components now with one Provider
that helps configure the global grid.Row
has been replaced by Grid.Bounds
. This change was made because Row
implies that it can only go in one direction, while Grid.Bounds
is capable of arranging children either horizontally or vertically.Column
has been replaced by Grid.Box
. Again, this change was made because Column
implies it only goes in one direction.BreakpointProvider
has been replaced by Grid.Provider
. It was changed because it's can set more than just breakpoints.Also: There are no longer default breakpoints. You must define breakpoints yourself via Grid.Provider
. You can also finally set custom breakpoints, as many as you want!
Grid.Provider
padding
: string
- structure: 20px
Grid.Box
componentsbreakpoints
: { key: string }
- structure: { name: query }
Grid.Box
components. Here's a basic outline for writing breakpoint queries:
-500
means that the breakpoint will trigger at 500px and smaller250-800
means that the breakpoint will trigger between 250px and 800px+900
means that the breakpoint will trigger at 900px and largerDefining 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:
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.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
debug
: boolean
flex
: string
- structure: grow shrink basis
flex
propertydirection
: string
- horizontal
or vertical
wrap
: boolean
valign
: string
- top
, center
, or bottom
halign
: string
- left
, center
, or right
Grid.Bounds
also inherits all properties that Stylable
has.
Grid.Bounds
accepts aliases for the width property.
Available aliases are:
half
- 50%
quarter
- 25%
third
- 33.3333333%
twoThirds
- 66.666666%
threeQuarters
- 75%
<Grid.Bounds sm={{ width: "half", height: "200px" }}>
This box gains height on small devices
</Grid.Bounds>
Grid.Box
debug
: boolean
flex
: string
- structure: grow shrink basis
flex
propertyfill
: boolean
Box
should fill up all available spacefluid
: boolean
shiftRight
: boolean
Bounds
shiftLeft
: boolean
Bounds
shiftUp
: boolean
Bounds
shiftDown
: boolean
Bounds
Grid.Box
also inherits all properties that Stylable
has.
Grid.Box
accepts aliases for the width property.
Available aliases are:
half
- 50%
quarter
- 25%
third
- 33.3333333%
twoThirds
- 66.666666%
threeQuarters
- 75%
<Grid.Box sm={{ width: "half", height: "200px" }}>
This box gains height on small devices
</Grid.Box>
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind are welcome!
Want to help? Join our Spectrum.chat community to get started!
Support us with a monthly donation and help us continue our activities. [Become a backer]
Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]
MIT