Gridley CSS Grid Generator

A simple React App to help developers develop custom CSS grids.

Note: This project is a work-in-progress.

Technical Choices

This was built using React and the Create React App generator. It uses SCSS as the CSS preprocessor.

Installation

1. Make sure Node, NPM and React are installed
2. Run npm install to fetch dependencies from package.json
3. Run npm start to begin debugging

Settings

The Grid Generator allows users to select a number of settings for their grid, including the following:

1. Number of columns
2. Gutter width
3. Row bottom margin
4. Strategy (Float/Inline Block/Flexbox)
5. Box sizing
6. Code Indentation
7. Include Comments
8. Minify Code

Future Enhancements

1. Support different CSS preprocessors
2. Better mobile design
3. Logo
4. Explore including the new CSS grid spec.