Configurable Grid Layout Engine For React – gymnast

gymnast is a configurable grid and layout engine for React

With gymnast, you can eliminate your layout css or reduce it to just a few lines.

Learn how to use gymnast in your own project.

or

Play with a demo

📺 Examples

We have several examples on the website. Here is one of them:

import * as React from 'react' import { Grid } from 'gymnast'  <Grid>   <Grid size={5} margin={2}>Content Here</Grid>   <Grid size={7}>More Content</Grid> </Grid>

This will create 2 columns of sizes 5, 7, respectively.

There are additional components to assist with layout, for a deeper dive into gymnast, check out the docs, the examples here or follow the Getting Started guide.

🖥 Install

gymnast is available as the gymnast package on npm. It is also available on the unpkg CDN.

You can install it with:

yarn add gymnast

React and PropTypes are peer dependencies of the generated bundle.

⚙️ Dev Mode

Ensuring a layout adheres to the grid can be difficult. To simplify this task, gymnast includes an overlay Component to assist you. During development, import and append <Dev/> to your pages. It doesn't render anything by default but pressing CTRL+SHIFT+K will toggle it.

Learn more about <Dev /> mode in the docs.

import * as React from 'react' import { Dev } from 'gymnast'  export default function MyPage() {   return (     <>       <Dev />       {/* other components */}     </>   ) }

👥 Contributors

The main purpose of this repository is to continue to evolve gymnast, making it more capable and easier to use. Development of gymnast happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Check the contributing.md to learn how you can take part in improving gymnast.

Thanks goes to these wonderful people (emoji key):

Oscar Bartra 🐛 💻 📖 👀	Andrew Hansen 💬 🐛 💻 👀	Stephen Nomura 🎨	Andrew Toy 🐛 💻 💡	colinlgray 🐛	Jeffrey Klein 🐛 💻 ⚠️	Derrick Nguyen 💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind are welcome!

🏁 Metrics

Process	Status
Code Quality
Versioning
Dependencies
File Size
Questions