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
If you are migrating from gymnast 16, check the migration guide.
We have several examples on the website. Here is one of them:
import * as React from 'react'
import { Grid } from 'gymnast'
function App() {
return (
<Grid>
<Grid size={5} margin="XL 0">
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.
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
is a peer dependency of the generated bundle.
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!
Process | Status |
---|---|
Code Quality | |
Versioning | |
Dependencies | |
File Size | |
Questions |