https://github.com/guillempuche/every-layout-react
Implementation of Every Layout in React and React Native thanks to Tamagui. Designed for efficient and responsive layouts.
https://github.com/guillempuche/every-layout-react
every-layout fluid-design react react-native responsive-design tamagui
Last synced: 3 months ago
JSON representation
Implementation of Every Layout in React and React Native thanks to Tamagui. Designed for efficient and responsive layouts.
- Host: GitHub
- URL: https://github.com/guillempuche/every-layout-react
- Owner: guillempuche
- Created: 2023-11-30T16:34:56.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T16:28:51.000Z (about 2 years ago)
- Last Synced: 2026-02-10T19:14:12.947Z (4 months ago)
- Topics: every-layout, fluid-design, react, react-native, responsive-design, tamagui
- Language: TypeScript
- Homepage:
- Size: 2.73 MB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Every Layout for React and React Native
This repository implements the principles of [Every Layout](https://every-layout.dev/) in React and React Native, offering a collection of components designed for efficient and responsive layouts.
## Components
- **Box:** Provides padding and border control for its content.
- **Center:** Aligns its child both horizontally and vertically in its parent.
- **Cluster:** Arranges items with a consistent space between them.
- **Cover:** Allows for a full-viewport-height presentation with header and footer.
- **Frame:** Places an item in the center with an optional border.
- **Icon:** An inline element for inserting icons with optional text.
- **Imposter:** Breaks an element out of its container to cover another.
- **Reel:** For horizontally scrolling lists of items.
- **Sidebar:** Creates a main content area with a sidebar.
- **Stack:** Manages vertical spacing between its child elements.
- **Switcher:** Switches between a horizontal and vertical layout depending on the available space.
The Grid isn't implemented because can be built with Tamagui components.
## Usage
Each component is designed with simplicity and flexibility in mind, making it easy to integrate into your existing project. They can be customized with props to fit various design requirements and work seamlessly across web and mobile platforms.
This repo aims to provide developers with a toolkit for creating responsive, consistent layouts with ease, following the Every Layout philosophy.
Feel free to explore, contribute, and raise issues or suggestions to improve these components! 🚀🎨
## Contribute
Requirements:
- Install [Yarn](https://yarnpkg.com/getting-started/install) package manager. Then install all the packages with `yarn add`.
- To make commits, we use run `yarn run commit`. To do so, install `npm install -g commitizen` to so.