{"id":28964393,"url":"https://github.com/ariamckinley/hedron","last_synced_at":"2025-06-24T05:03:46.340Z","repository":{"id":53822090,"uuid":"72926058","full_name":"ariamckinley/hedron","owner":"ariamckinley","description":"A no-frills flexbox grid system for React, powered by styled-components.","archived":true,"fork":false,"pushed_at":"2024-12-15T03:50:06.000Z","size":2432,"stargazers_count":864,"open_issues_count":6,"forks_count":60,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-06-21T07:16:59.612Z","etag":null,"topics":["flexbox","react","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"https://aritheelk.github.io/hedron/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ariamckinley.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS","dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-11-05T12:56:02.000Z","updated_at":"2025-06-06T13:16:50.000Z","dependencies_parsed_at":"2025-06-21T07:17:05.311Z","dependency_job_id":"e2ba1a20-5cef-46a8-98ca-4ff4dcd2c4e1","html_url":"https://github.com/ariamckinley/hedron","commit_stats":null,"previous_names":["jsbros/hedron","garetmckinley/hedron","ariamckinley/hedron"],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/ariamckinley/hedron","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariamckinley%2Fhedron","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariamckinley%2Fhedron/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariamckinley%2Fhedron/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariamckinley%2Fhedron/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ariamckinley","download_url":"https://codeload.github.com/ariamckinley/hedron/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariamckinley%2Fhedron/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261188481,"owners_count":23122235,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flexbox","react","reactjs","styled-components"],"created_at":"2025-06-24T05:02:13.777Z","updated_at":"2025-06-24T05:03:46.332Z","avatar_url":"https://github.com/ariamckinley.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"hedron logo\" src=\"https://raw.githubusercontent.com/garetmckinley/project-assets/master/hedron/hedron-header.svg?sanitize=true\" id=\"dracula-invert\"\u003e\n\u003c/p\u003e\n\n## Quick Jump\n\n- [Quick Jump](#quick-jump)\n- [Features](#features)\n- [Requirements](#requirements)\n- [Installation](#installation)\n    - [Using yarn](#using-yarn)\n    - [Using npm](#using-npm)\n- [Usage](#usage)\n    - [Basic Example](#basic-example)\n    - [Responsive Example](#responsive-example)\n- [Upgrading](#upgrading)\n- [Documentation](#documentation)\n  - [`Grid.Provider`](#gridprovider)\n    - [Props](#props)\n  - [`Grid.Bounds`](#gridbounds)\n    - [Props](#props-1)\n  - [`Grid.Box`](#gridbox)\n    - [Props](#props-2)\n- [Contributors](#contributors)\n- [Backers](#backers)\n- [Sponsors](#sponsors)\n- [License](#license)\n\n## Features\n\n- Add unlimited breakpoints\n- Any property can be altered by a breakpoint\n- Debug mode that allows easy visualization of your layout\n\n## Requirements\n\nThe follow dependencies must be installed in your project in order for hedron to work.\n\n- [`styled-components`](https://github.com/styled-components/styled-components) 1.1.3 and up\n\n## Installation\n\n#### Using yarn\n\n```bash\nyarn add hedron@next\n```\n\n#### Using npm\n\n```bash\nnpm install hedron@next\n```\n\n## Usage\n\n#### Basic Example\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Grid from \"hedron\";\n\nconst App = () =\u003e (\n  \u003cGrid.Bounds direction=\"vertical\"\u003e\n    \u003cGrid.Box\u003eHeader\u003c/Grid.Box\u003e\n    \u003cGrid.Box\u003eContent\u003c/Grid.Box\u003e\n    \u003cGrid.Box\u003eFooter\u003c/Grid.Box\u003e\n  \u003c/Grid.Bounds\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n#### Responsive Example\n\nTo make your layout responsive, use the `Grid.Provider` to define breakpoints. You can add as many or as few breakpoints as you'd like.\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Grid from \"hedron\";\n\nconst App = () =\u003e (\n  \u003cGrid.Provider\n    padding=\"20px\"\n    breakpoints={{ sm: \"-500\", md: \"501-750\", lg: \"+750\" }}\n  \u003e\n    \u003cGrid.Bounds direction=\"vertical\"\u003e\n      \u003cGrid.Box sm={{ hidden: true }}\u003e\n        This header hides on small screens\n      \u003c/Grid.Box\u003e\n      \u003cGrid.Box\u003eContent\u003c/Grid.Box\u003e\n      \u003cGrid.Box lg={{ padding: \"50px\" }}\u003e\n        This footer gains extra padding on large screens\n      \u003c/Grid.Box\u003e\n    \u003c/Grid.Bounds\u003e\n  \u003c/Grid.Provider\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\nIf you want to be more verbose with your naming convention, that's perfectly fine too! Go ahead and name your breakpoints whatever feels right\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport Grid from \"hedron\";\n\nconst App = () =\u003e (\n  \u003cGrid.Provider\n    breakpoints={{ mobile: \"-500\", tablet: \"501-750\", wide: \"+750\" }}\n  \u003e\n    \u003cGrid.Bounds direction=\"vertical\"\u003e\n      \u003cGrid.Box mobile={{ hidden: true }}\u003eHeader\u003c/Grid.Box\u003e\n      \u003cGrid.Box\u003eContent\u003c/Grid.Box\u003e\n      \u003cGrid.Bounds direction=\"vertical\" wide={{ direction: \"horizontal\" }}\u003e\n        \u003cGrid.Box\u003eThese boxes render side by side on wide screens\u003c/Grid.Box\u003e\n        \u003cGrid.Box\u003eThese boxes render side by side on wide screens\u003c/Grid.Box\u003e\n      \u003c/Grid.Bounds\u003e\n    \u003c/Grid.Bounds\u003e\n  \u003c/Grid.Provider\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\nYou 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`](#gridprovider).\n\n## Upgrading\n\nUnfortunately, 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!)\n\n- The `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.\n- `Row` has been replaced by [`Grid.Bounds`](#gridbounds). 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.\n- `Column` has been replaced by [`Grid.Box`](#gridbox). Again, this change was made because `Column` implies it only goes in one direction.\n- `BreakpointProvider` has been replaced by [`Grid.Provider`](#gridprovider). It was changed because it's can set more than just breakpoints.\n\n**Also:** There are no longer default breakpoints. You must define breakpoints yourself via [`Grid.Provider`](#gridprovider). You can also _finally_ set custom breakpoints, as many as you want!\n\n## Documentation\n\n### `Grid.Provider`\n\n#### Props\n\n- `padding`: `string` - structure: `20px`\n  - Default padding to use for child `Grid.Box` components\n- `breakpoints`: `{ key: string }` - structure: `{ name: query }`\n  - Breakpoints for setting resolution-specific properties on child `Grid.Box` components. Here's a basic outline for writing breakpoint queries:\n    - `-500` means that the breakpoint will trigger at 500px and smaller\n    - `250-800` means that the breakpoint will trigger between 250px and 800px\n    - `+900` means that the breakpoint will trigger at 900px and larger\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eDefining Breakpoints\u003c/strong\u003e\u003c/summary\u003e\u003cp\u003e\n\nDefining 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:\n\n- Breakpoints can be named whatever you'd like (with a few exceptions laid out in the next section)\n- When defining breakpoints, you must pass an array object containing **only** two values: the min and max (both must be integers)\n- 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.\n\n\u003c/p\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eRestricted Breakpoint Names\u003c/strong\u003e\u003c/summary\u003e\u003cp\u003e\n\nAlthough 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!\n\n- `background`\n- `border`\n- `checked`\n- `className`\n- `dangerouslySetInnerHTML`\n- `display`\n- `height`\n- `hidden`\n- `htmlFor`\n- `margin`\n- `onChange`\n- `opacity`\n- `padding`\n- `selected`\n- `style`\n- `suppressContentEditableWarning`\n- `suppressHydrationWarning`\n- `value`\n- `visibility`\n- `width`\n\n\u003c/p\u003e\u003c/details\u003e\n\n### `Grid.Bounds`\n\n#### Props\n\n- `debug` : `boolean`\n  - Outlines the grid system so you can visualize the layout\n- `flex`: `string` - structure: `grow shrink basis`\n  - Controls the CSS `flex` property\n- `direction`: `string` - `horizontal` or `vertical`\n  - Sets the primary axis the children should be in line with\n- `wrap`: `boolean`\n  - Sets whether the children should wrap when there's no more room on the primary axis\n- `valign`: `string` - `top`, `center`, or `bottom`\n  - Alignment of children along the vertical axis\n- `halign`: `string` - `left`, `center`, or `right`\n  - Alignment of children along the horizontal axis\n\n`Grid.Bounds` also inherits all properties that [`Stylable`](https://github.com/tetrahedron/core#stylable) has.\n\n`Grid.Bounds` accepts aliases for the width property.\n\nAvailable aliases are:\n\n- `half` - `50%`\n- `quarter` - `25%`\n- `third` - `33.3333333%`\n- `twoThirds` - `66.666666%`\n- `threeQuarters` - `75%`\n\n```jsx\n\u003cGrid.Bounds sm={{ width: \"half\", height: \"200px\" }}\u003e\n  This box gains height on small devices\n\u003c/Grid.Bounds\u003e\n```\n\n### `Grid.Box`\n\n#### Props\n\n- `debug` : `boolean`\n  - Outlines the grid system so you can visualize the layout\n- `flex`: `string` - structure: `grow shrink basis`\n  - Controls the CSS `flex` property\n- `fill`: `boolean`\n  - Sets whether the `Box` should fill up all available space\n- `fluid`: `boolean`\n  - Convenience property for disabling padding\n- `shiftRight`: `boolean`\n  - Shifts the box to the right of the parent `Bounds`\n- `shiftLeft`: `boolean`\n  - Shifts the box to the ;eft of the parent `Bounds`\n- `shiftUp`: `boolean`\n  - Shifts the box to the top of the parent `Bounds`\n- `shiftDown`: `boolean`\n  - Shifts the box to the bottom of the parent `Bounds`\n\n`Grid.Box` also inherits all properties that [`Stylable`](https://github.com/tetrahedron/core#stylable) has.\n\n\n`Grid.Box` accepts aliases for the width property.\n\nAvailable aliases are:\n\n- `half` - `50%`\n- `quarter` - `25%`\n- `third` - `33.3333333%`\n- `twoThirds` - `66.666666%`\n- `threeQuarters` - `75%`\n\n```jsx\n\u003cGrid.Box sm={{ width: \"half\", height: \"200px\" }}\u003e\n  This box gains height on small devices\n\u003c/Grid.Box\u003e\n```\n\n## License\n\nMIT\n\n\u003cimg src=\"https://raw.githubusercontent.com/syntra/assets/master/syntra-sponsorship.svg?sanitize=true\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariamckinley%2Fhedron","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fariamckinley%2Fhedron","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariamckinley%2Fhedron/lists"}