mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
48 lines
1.6 KiB
Markdown
48 lines
1.6 KiB
Markdown
|
# 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/
|