gymnast is a configurable grid 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
To install the development branch of gymnast, run yarn add gymnast@next
.
If you are migrating from gymnast 16, check the migration guide.
📺 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.
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.
👥 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):
This project follows the all-contributors specification. Contributions of any kind are welcome!
🏁 Metrics
Process | Status |
---|
Code Quality | |
Versioning | |
Dependencies | |
File Size | |
Questions | |