diff --git a/docs/grid.md b/docs/grid.md new file mode 100644 index 0000000..f138db3 --- /dev/null +++ b/docs/grid.md @@ -0,0 +1,47 @@ +# Grid system + +* [Architectures](#architectures) + * [Styles](#styles) + * [Build tasks](#build-tasks) + * [Config file](#config-file) +* [Usage](#usage) + * [Example](#example-1) +* [Limitations](#limitations) + +## Architectures + +The Grid System is meant to be simple and easy to use. To goal is to obtain way to build light, flexible and reusable way to build layouts. + +### Styles + +Some styles are needed to make it work properly : + +* [`o-grid.scss`](../assets/styles/objects/_grid.scss): Objecy file where the default grid styles are set. Column numbers, modifiers, options. +* [`u-grid-columns.scss`](../assets/styles/utilities/_grid-column.scss): Utility file where it generates every possible column styles based on an array of media queries and column numbers. + +### Build tasks + +The generation of columns adds a lot of styles in the css output file. To solve that, a build task is set up to purge unused css generated by [`u-grid-columns.scss`](../assets/styles/utilities/_grid-column.scss) using [PurgeCSS]. + +#### Config file + +Depending on your project, you will need to specify all the files that will include the Grid System classes. These files will be parsed by [PurgeCSS] and then a "cleaned" css file will be generated. The styles should also compile everytime the following listed files are changed. + +```json +// Charcoal project example +"purgeCSS": { + "content": [ + "./www/**/*.html", + "./views/app/template/**/*.mustache", + "./src/App/Template/*.php", + "./assets/scripts/**/*" // use case: el.classList.add('u-gc-1/2') + ] +} +``` + +## Usage + +Test + + +[purgecss]: https://purgecss.com/