Flexbox support

[filipekiss]

As mentioned on #510, I'm starting to add flexbox support to Jeet. I'm opening this issue so we can keep the discussion in a single place. I have a few points I wish to address and I'd love to hear from you the best way we can tackle them. I'll also add a little roadmap of things I'm doing and planning to do before putting up the first pull-request for review. You can follow the progress directly from the branch I'm working on

---

Roadmap

• Move the current grid to a _float-grid file
• Alias the current mixins to the float- prefixed mixins, to ensure compatibility
• Write the _flex-grid file, trying to keep as close to the _float-grid as possible
• Add a $jeet.grid configuration
• Write test for the flex grid
• Create a playground with the flex grid examples

Issues

• 1. At least for me, the mindset for a flexbox grid is a little bit different from a float grid. The power of flexbox comes from "magically" adjusting the elements to fit your container, order, align and justify items as needed. This raises my firsts concern, regarding the gutters. Should we still rely on the gutters as we have for the float grid or should we let the flexbox grid behave a little different?
• 2. Should I try to make the grids "interchangeable"? Or should I just assume that the flex grid is a completely separate entity from the float grid and leave the current columns and others mixins for it and just use the prefixed flex-column and else for the flexbox? My first thought was to add a $jeet.grid setting that the user would be able to set and just keep using column.

These are my concerns for now. I'd like to hear from you if you guys want to include anything else here and if you have any questions. Thank you :)

[corysimmons]

Adding flexbox support is as simple as adding a conditional to remove the float: x; clear: x stuff (might need some massaging for flexbox on the stack stuff).

Perhaps make a new mixin called flexy() or something that just does display: flex; flex-wrap: wrap;, but that's some silly abstraction.

The margin gutters are still worth keeping since flexbox has no way to add margin gutters (justify-content: space-between breaks easily).

The main goal is to expose Jeet's width math, but tbh Lost's width math is better/simpler, and postcss-ant just wrecks everything so far as grid math goes.

If you're interested in working on some interesting grid stuff, I'd invite you to break postcss-ant's math out into smaller modules that people can sprinkle on top of CSS Grid Layout rather than working on a really old, practically defunct project.

A few things to consider for the layout/OSS aficionado:

• Preprocessor-specific mixins should die. They fracture the ecosystem by forcing people who might like X-preprocessor to use Y-preprocessor just so they can use a particular lib. This is why the vastly superior Stylus died to Sass. PostCSS fixes this by allowing you to write a lib that works with any preprocessor (as well as just vanilla CSS).
• Padding grids are more valuable once people inevitably evolve into React, and similar frameworks, because with padding grids you can literally potentially drag-and-drop components into place and they will look good (at the cost of a tiny bit of obfuscated markup).
• The future is CSS Grid Layout, and it's fast approaching.
• CSS Grid Layout doesn't offer anything nice for content-out layouts (ratios), but postcss-ant does. If that could be broken out into a tiny module (it can, I'm just busy af right now, but I might do it in the next few months), it'd explode in popularity quick and take us out of the 1/x columns age and revolutionize web-design. I'd be happy to help guide you on that (free JS/OSS tutoring) if you'd like, but it requires a tiny bit of JS knowledge.

[filipekiss]

@corysimmons Thank you for the feedback!

I'll work on a simple flex abstraction for jeet then, since nothing too fancy is required.

About the Grid/Postcss-Ant: yes, I agree on that. I confess I haven't looked into it deep yet, but I'll check it out tomorrow. And I'd love if you could guide me on that and we could work on something that's more future-proof. :)

[filipekiss]

I was looking through my open issues and found this one. Anyone still interested in this or may I close it?

[corysimmons]

Yeah I think this can be closed.