Lucas Gruwez

🏊 + ⛵️ + 👨‍💻 | 🇦🇺 ↔️ 🇧🇪

3 followers

🏊 + ⛵️ + 👨‍💻 | 🇦🇺 ↔️ 🇧🇪

3 followers

Visit website

Social Networking

•

Professional networking platforms

Student passionate about coding

Launch tags:Open Source•Developer Tools•GitHub

Launch Team

Screensaver Ninja

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.

Report

9yr ago

Lucas Gruwez

Maker

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

Report

9yr ago

Screensaver Ninja

@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.

Report

9yr ago

How is this compared to the new native css grid layout?

Report

9yr ago

Lucas Gruwez

Maker

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

Report

9yr ago

MealPrepPro

@lucasgruwez @catapop84 @pupeno Are there any examples Lucas up and running we can check out to see how it runs?

Report

9yr ago

Lucas Gruwez

Maker

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

Report

9yr ago

Opengeni

@lucasgruwez That Jekyll theme though 👌 Forked it, well the one in Scorpion.css Org 🦂

Report

9yr ago

Lucas Gruwez

Maker

@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

9yr ago

I love the landing page design. Very dope

Report

9yr ago

Reviews