Flexbox Support

[ajmueller]

What can we build for flexbox support with a fallback to our current grid system?

[elseloop]

This could be a good resource here: http://chriswrightdesign.com/experiments/flexbox-adventures/

[ajmueller]

I saw Jonathan Snook tweet this the other day and had the great intention of reading it and saving it here, but I didn't. Thanks! :+1:

[ajmueller]

Some other resources:

• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://philipwalton.github.io/solved-by-flexbox/
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
• http://ptb2.me/flexgrid/
• https://github.com/mastastealth/sass-flex-mixin

Initial thoughts:

• we could redo the entire "two-up, three-up, four-up" concept in flexbox and make its implementation with nth-child rules a thing of the past
• while flexbox could be used for our grid system, the Grid spec looks like it will fill that void eventually

[ajmueller]

This will benefit greatly from the work in #105, so I'm marking this as a dependent.

[ajmueller]

Another place we could use flexbox: tabs. Rather than having to worry about max-widths for tabs, we can use flexbox to fill the available space no matter how many tabs we have.

[ajmueller]

Another resource from @elseloop: http://chriswrightdesign.com/experiments/using-flexbox-today/.

[elseloop]

Just a drive-by comment to point out that the Can I Use numbers for this are at a point where we can more or less safely use flexbox with smart fallbacks for IE9 and below. They're much better even than when this was opened only six months ago, even on mobile platforms.

[ajmueller]

:+1:

[elseloop]

More like

[ajmueller]

[ajmueller]

One thing to consider that will need some research: what flexbox features does autoprefixer prefix for us? It would appear that at least some are prefixed, but I don't know if it's smart enough to auto adjust values like some mixins have been written to do. We'll likely need to find a balance between mixins and reliance on autoprefixer since most mixins for flexbox seem to just be ways of providing prefixes for older forms of the syntax.

[ajmueller]

Initial local test for that particular property (order): autoprefixer does change it properly and auto increment it for older syntaxes when necessary. As Dan pointed out, it seems our only need for mixins for flexbox will be to have fallbacks for older versions of IE that don't support flexbox at all.

[ajmueller]

Some thoughts I had regarding flexbox features and potential fallbacks:

• Display
  • Fallback - use row mixin for container since it will be containing “columns” (the flex items).
• Order
  • Fallback - push and pull.
• Flex grow, flex shrink
  • Fallback - ideas? This would either require display: table-cell or knowledge of sibling element sizes in order to keep elements from wrapping to a new “row.” Using table-cell would then, of course, require a display: table wrapping parent. Perhaps we don’t have use cases for this yet nor will we need a fallback. Potentially.
• Flex direction
  • Fallback
  • Row and row-reverse - we will need to change the float direction and sides on which margins are applied to columns. That will require some tweaking of the column mixin.
  • Column - have each flex item clear the floating direction of other items? 100% width for each?
  • Column-reverse - I don’t believe this is possible, unfortunately. Do we have any uses cases for this…yet?

[stoff]

http://caniuse.com/#feat=flexbox crazy thought but maybe we shouldn't worry about non-supported browsers? depending on who's stats (ex: StatCounter or NetMarketShare) you look at, we're only talking about 5 - 16% of browser usage worldwide. I suspect that over the next 8-12 months we'll see a big dip in IE9 and we may see 10 disappear; which makes me wonder how much effort we want to put to supporting products that Microsoft itself is preparing to put to bed.

if we are to do this work, it might be better done in an alternate branch or even a fork.

[ajmueller]

Yes, we would definitely do the work in a feature branch. We've been following Gitflow for development.

I like the idea of not having a fallback, though at that point there would basically be no need for mixins of any kind. With autoprefixer adding the older syntaxes for us, the only thing we need to do is add the W3C standard syntax to get flexbox to work.