Add grid CSS layout system

locomotivemtl / locomotive-boilerplate

🚂 Front-end boilerplate for projects by Locomotive.

https://locomotivemtl-boilerplate.vercel.app/

MIT License

458 stars 71 forks source link

Add grid CSS layout system #108

Closed devenini closed 2 years ago

devenini commented 2 years ago

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.

Features :

Uses the power of CSS Grid
Create different column layouts based on media queries, directly with html markup
Auto-purge unused generated css

What's missing :

Find a way the compile styles when a file of purgeCSS in loconfig.json is saved. Right now the css purge task only executes when styles are saved.
Write Limitations block in the grid readme

devenini commented 2 years ago

There is a current issue where the purgeCss doesn't execute after saving a template file. So sometimes when building a layout with the grid system, you might need to save a .scss file or run npm run build so the styles compile and add the needed .u-gc-* classes to the output css file. Personally I am fine with merging this PR as it is, and create a new PR to improve our building tasks. @mcaskill @lucasvallenet Thoughts?