Gymnast is a simple SCSS grid designed for ease of use, simplicity, and semantic and responsive css.
There are two version of Gymnast currently available. One uses Flexbox CSS, the other floats.
Grid Variables: this is where you set your site variables, such the gutter, the site's max width and the number of columns you want for your grid.
The Gymnast Grid includes mixins and css ready classes for the following:
- Rows
- Columns
- Resized columns (for responsive queries)
- Shifted left and right columns
- Block grids
- Block grid resets (for responsive queries)
Take gymnast.scss and include it with your stylesheets. You can either import it to your main scss style sheet or copy and paste the code in.
The are two main sections to the Gymnast stylesheet: Mixins and Classes. Within each section are four parts: , columns, shifted columns, and block grids.
- Mixins: the base of the Gymnast grid, and may be used for a completely custom grid approach
- Classes: the tools needed for an easy to use, out of the box experience, with more shared, and less repeated CSS