I haven't checked this particular grid, but after reading https://css-tricks.com/dont-over... I decided to try not having a grid system as flexbox solves many of the problems a grid system solves and I'm happy with that approach so far.
One thing most grid systems give you is the different sizes of devices. You'd need to copy those to your flexbox layout.
Now, I'm not saying this approach is good for everybody in all cases, but it's definitely worth checking out.
Thanks for the insights @pupeno ,
I know that a grid system isn't always the best solution, but this was part of a larger project, and I thought I could as well release it as it was already done. I personally end up rewriting the same code for every project, so this here is a simpler solution for me.
As for the device sizes, I'm not quite sure what you mean. The waffle grid was written in sass, so you can easily customize a couple of variables to tweak the breakpoints. I am currently working on a solution that lets you chose as many breakpoints as you want for further customization, but I haven't come across a way that's simple enough yet.
Lucas
@lucasgruwez what I meant is that most grid know how to re-flow themselves based on a set of hard-coded device sizes. This is something you'll miss if you just use plain flexbox.
@eonpilot It's funny that you talk about Scorpion.css, as this grid was originally the one used in scorpion, but I just have way to much work to concentrate on that, so I released it indepenldently...
Report
How is this compared to the new native css grid layout?
Flexbox is a very complex part of CSS @catapop84, and this grid tries to make it easy to use for everyone. I recommend you try out the grid on codepen.io, and that you use pug to make your code more readable even after countless indents.
As @pupeno said, this approach might not be good for everyone in all cases, but it is definitely worth checking out.
Lucas
There is a very small section on the website (https://lucasgruwez.github.io/wa...) showing how it works @david_west . If you hover over one of the white boxes, the classes used for that box will show up, and the code is written underneath the example.
If you were to make a website using the grid, feel free to open an issue on the repo, and I will add an examples section with a link to your site.
If you want to know how to use the grid, I recommend you read through the GitHub wiki, as it is not very long, and it's actually pretty straight forwards.
Lucas
Screensaver Ninja
Lucas Gruwez
Screensaver Ninja
DiffSense
Lucas Gruwez
Lucas Gruwez
MealPrepPro
Lucas Gruwez