Flexbox Support

[Timoti]

I'm finding I'm going through a lot of hoops to do things like equal height columns, presentational re-ordering etc - particularly as I tuck into a sprawling news site responsive homepage project. At this point the new shiny things start to look extra shiny.

Any chance of neat flexbox support in the near future? Or is there any similarly light flexbox grid system that anyone would care to recommend?

I'm loving the simplicity and minimalism of bourbon/neat - particularly after a galling project experience with Susy/Compass where despite recruiting ruby gurus I couldn't get that sucker to compile in less than 40sec, and I've ported all current projects over to the wonderfully elegant Bourbon/Neat. But FWIW, Susy does, if I understand, have flexbox support.

[kaishin]

@Timoti Susy does not have flexbox support, as far as I know.

You can use flexbox mixins in Bourbon already. See http://bourbon.io/docs/#flexbox for more details.

Also flexbox and grids are quite different things too. Yes, they solve the same problems, but they take different approaches.

Flexbox will be coming to Neat at some point, but not until we figure out what problems are people trying to solve using flexbox. Using shiny things just for the sake of it is not how I personally approach problems.

Hope these answer your questions.

[pixeldrew]

Not to kick a dead horse but, https://philipwalton.github.io/solved-by-flexbox/demos/grids/

could be a starting point to see how people could be solving grids this way. Personally i'd love a flexbox grid and a fallback to float.

[Timoti]

Yes flexbox grid with (mixin optoin of) float fallback would be great.

I do completely agree with @kalshin as to "not until we figure out what problems are people trying to solve using flexbox. Using shiny things just for the sake of it is not how I personally approach problems."

And I think I can now be more specific as to the problems using flexbox as a grid will solve for us now:

• vertical positioning, full height columns - these are problems that remain as long as we're using floats for grids. Flex containers can't be floated - at least not in my experience - I've had regular instances of wanting to use flex to solve problems (like vertical positioning) but having to isolate flex container elements within neat grid elements via extra layers of markup. And that really grates.
• floating and then having clear fix elements is a hack barely better than using tables for layout. Floats were originally meant for pullquotes and the like. So flexbox, while oriented towards smaller scale layouts is at least a step in the right direction.

On the float fallback side - that's a bit more complex as that should be included within whatever ie specific solution we're using like using @content (at least in the interim), and then things like vertical positioning and full height need ie solutions as well… maaning in such cases old ie might have to have some very basic support - which is not necessarily inappropriate.

[mmjaeger]

any news on adding flex box to neat

[pixeldrew]

Bootstrap just added opt-in support with Bootstrap 4, http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

I have been using neat to supply bootstrap grid compatible classes .col-md-1 and the like.

[Martskin]

I wrote a flexbox grid in Sass called Batch that uses Bourbon mixins and Neat breakpoints:

http://martskin.github.io/batch

[onetom]

@Martskin What's the reason for not providing the grid and column styles as mixins in your Batch lib, following the spirit of Bourbon?
It can still have a straightforward mapping of such mixing to classes you define now, but I feel like that should be an optional layer.

[Martskin]

Interesting question/suggestion @onetom! I'll explore the possibility of adding that option.

Feel free to open an issue or even create a PR in the Batch repo:

https://github.com/Martskin/batch/issues