Use Flexbox when browser @supports it unprefixed

[SelenIT]

Don't discriminate Firefox 28+ which supports Flexbox unprefixed (including flex-wrap). We can use unprefixed Flexbox as a main layout mechanism (for all modern browsers), prefixed Flexbox implementations as a fallback and inline-blocks as a last resort.

[yahoocla]

Thank you for submitting this pull request, however I do not see a valid CLA on file for you. Before we can merge this request please visit https://yahoocla.herokuapp.com/ and agree to the terms. Thanks! 😄

[jamesalley]

Good point here, it seems at first glance. Even though you don't have a CLA on file I may try to get this in to a future release. Thank you!

[paazmaya]

@SelenIT could you try to acquire the CLA so that this could be merged?

[yahoocla]

CLA is valid!

[paazmaya]

Well that was quick.
How about rerunning the tests for this PR?

[texxs]

I know I'm in on this conversation late and I'm not a contributor, just a user. I have to say that I think using Flexbox in such a large role doesn't sound like a good idea. Supporting those who want to use it sure. But most Web Designers I know don't want to use it. Perhaps they don't know how to use it as well as others, but they all seem to feel it's too unpredictable. I have to agree. It's seems like a totally needed step in fact. I've tinkered with it. I've taken a class about "how to do everything with it" And even though I'm cranking out about 50 websites a year of various quality, I've still haven't found a place where I was like "hmmmm, flex box would be best here" . . .

Thanks for listening.

[SelenIT]

@texxs, the problem is that the Pure Grid system already uses Flexbox — but only for WebKit- and Blink-browsers, with -webkit- prefix. For all other browsers, it still uses inline-block-based solution with some ad-hoc trickery like letter-spacing: -.31em;, which hardly depends on many non-specified 'historic' browser behaviors, font settings etc., and definitely is more unpredictable than Flexbox (the reason that WebKit-browsers had to switch to it was, AFAIK, the change in their 'traditional' behavior that just broke the previous inline-block-based solution). It seems that similar changes occur in Firefox, too.

[lkraav]

Flexbox is the future. Browsers will get their ish together soon enough, so unprefixing it is the way to go. In the meanwhile, I will be forever grateful for Pure teaching me about inline-block, because it allowed me to drop float for good.

[paazmaya]

Tests at Travis seems to failing due to the ´@supports` usage.
Anything that could be done with that?

[texxs]

Thanks SelenIT, I didn't know that. Devs did a good job of covering up all that unpredictability imo. But I don't get to use the Pure framework as much as I'd like too.

[lkraav]

https://github.com/10up/flexibility could take care of Internet Explorer 8 & 9 support.

[lkraav]

Problem with @supports is that its coverage is less than flat out supporting display: flex.

http://caniuse.com/#search=flex
Global 77.54% + 18.35% = 95.89%
unprefixed: 75.38% + 6.56% = 81.94%

http://caniuse.com/#search=%40supports
Global 70.17%

Notably things like all IE and iOS < 9 are missing for @supports

I think I would keep the prefixed flexbox and add unprefixed for the widest coverage.

EDIT this would make #351 the preferred option

[redonkulus]

Replaced by #617