🀸 Configurable grid and layout engine for React
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
.vscode
flow-typed/npm
img
scripts
src
static/fonts
storybook
test
.all-contributorsrc
.babelrc
.codebeatignore
.codeclimate.yml
.eslintrc
.flowconfig
.gitignore
.stylelintrc
.yarnrc
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
index.js
jest.config.js
jest.img.config.js
nightwatch.config.js
package.json
renovate.json
selenium-server.log
yarn.lock

README.md

gymnast

gymnast is a configurable grid and layout engine for React

docs Circle Status Test Coverage PRs welcome


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.

Dev Example

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 CircleCI Test Coverage Code Climate codebeat badge Package Quality Sauce Test Status
Versioning semantic-release Commitizen friendly npm
Dependencies Known Vulnerabilities DavidDM
File Size gzipped bundle size
Questions Join the discussion at https://gymnast.readme.io/discuss gymnast StackOverflow tags

Sauce Test Status