ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Apply suggestions from code review

Browse Source 
Co-authored-by: Chauncey McAskill <chauncey@mcaskill.ca>
This commit is contained in:
Deven Caron
2022-04-11 15:57:18 -04:00
parent 4fafcb8e1d
commit d6193a41fa
2 changed files with 11 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
build/tasks/styles.js
View File

@@ -144,8 +144,8 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
try {
await writeFile(outfile, result.css).then(() => {
//Purge css once file exists.
purgeUnusedCSS(outfile, filestem);
// Purge CSS once file exists.
purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);
});
if (result.css) {
@@ -222,14 +222,10 @@ function createPostCSSProcessor(pluginsListOrMap, options)
*
* @async
*
* @param {string} [outfile=false] - The path of a css file
* If missing the function stops.
* @param {string} text - The file name.
* @param {string} outfile - The path of the CSS file.
* @param {string} filestem - The CSS file name.
*/
async function purgeUnusedCSS(outfile = false, filestem) {
if(!outfile) {
return;
}
const timeLabel = `${filestem}.css purged in`;
console.time(timeLabel);

17
docs/grid.md
View File

@@ -8,22 +8,19 @@
* [Example](#example)
* [Limitations](#limitations)
## Architectures
## Architecture
The Grid System is meant to be simple and easy to use. To goal is to create a light, flexible and reusable way to build layouts.
The boilerplate's grid system is meant to be simple and easy to use. The goal is to create a light, flexible, and reusable way to build layouts.
The following styles are needed to work properly:
### Styles
Some styles are needed to make it work properly :
* [`o-grid.scss`](../assets/styles/objects/_grid.scss): Object 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.
* [`o-grid`](../assets/styles/objects/_grid.scss) — Object file where the default grid styles are set such as column numbers, modifiers, and options.
* [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) — Utility file that generates the styles for every possible column 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].
The columns generated by [`u-grid-columns`](../assets/styles/utilities/_grid-column.scss) adds a lot of styles to the compiled CSS file. To mitigate that, [PurgeCSS] is integrated into the `styles` build task to purge unused CSS.
#### Config file
#### Configuration
Depending on your project, you will need to specify all the files that include CSS classes from the grid system. These files will be scanned by [PurgeCSS] to your compiled CSS files.