Featured

Waffle Grid

An easy to use flexbox grid system.

DiscussionYou need to become a Contributor to join the discussion - Find out how.
J. Pablo Fernández@pupeno · Founder at Dashman
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.
Lucas Gruwez
Maker
@lucasgruwez · Geek by day, still a geek by night
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
J. Pablo Fernández@pupeno · Founder at Dashman
@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.
Deandre Durr☀️@dredurr · Growth Hacker
I love the landing page design. Very dope
Eon@eonpilot · Swift dev @ eon.codes
@lucasgruwez That Jekyll theme though 👌 Forked it, well the one in Scorpion.css Org 🦂
Lucas Gruwez
Maker
@lucasgruwez · Geek by day, still a geek by night
@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...
Catalin Pop@catapop84
How is this compared to the new native css grid layout?
Lucas Gruwez
Maker
@lucasgruwez · Geek by day, still a geek by night
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
David West@david_west · Product Manager @ Nibble Apps
@lucasgruwez @catapop84 @pupeno Are there any examples Lucas up and running we can check out to see how it runs?
Lucas Gruwez
Maker
@lucasgruwez · Geek by day, still a geek by night
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