Updated spec...

[MarcDiethelm]

Maintainer's Note: Looking for flexbox enthusiasts to help build the next Flexie. The new spec is very detailed, and I don't have as much time as I'd like to devote to this project. You can help increase adoption of the new spec! Join in at https://github.com/doctyper/reflexie/tree/develop

@doctyper As you're probably aware the Flexible Box Model spec has been updated as of Nov 14th, 2011. I wonder what this means for your implementation. Are you actively maintaining flexie, do you intend to update flexie to conform with the spec changes? Will this break previous usage of flexbox/flexie? I suppose it will... What's your take on this?

[doctyper]

So my plan was to wait until the new draft was stable enough to attempt implementation. I believe WebKit(?) has already switched to the new model, so I guess the time is nigh.

The problem is that there are logistical difficulties in supporting this new model. For one, a new polyfill will require support of IE, Firefox, Safari and Chrome. That ramps up the difficulty by an order of magnitude.

Ideally, the new model would drop support for IE6. And in a perfect world, I'd be able to drop IE7 support.

Then there's the CSS parsing problem. People code their CSS in many different ways, and it's become a huge time sink to field bugs for obscure edge cases (or some obvious but missed cases). My attempt to have Flexie "just work" unfortunately has resulted in it not working at all for a number of people. For Flexie 2 I'm considering abandoning the CSS parsing altogether and just having the user invoke Flexie via API.

Then there's the JS library issue. The majority of Flexie users will use jQuery, and there may be no strong reason to keep it agnostic.

Lots to think about.

[MarcDiethelm]

Hmm, yes that quite a bit of complexity...

I just learned from the implementers for Mozilla (https://bugzilla.mozilla.org/show_bug.cgi?id=666041) that the editor's draft just changed six days ago. So it's probably not stable enough to even start work on Flexie 2.

Having Flexie parse the CSS is of course very valuable as it ensures future compatibility once the browsers understand the new rules. But this should not come at too high a cost. Therefore I think it's totally reasonable if users of Flexie must adhere to a certain syntax in order to make parsing easier. The huge benefits of using Flexbox would still be there.

Drop support for IE6. Just do it. IE7 however... is still needed. :( Don't worry about Chrome too much either. Its implementation of the new spec is pretty far along. https://bugs.webkit.org/show_bug.cgi?id=62048 And Chrome is always auto-updated.

As for keeping it library agnostic... I have no strong opinion on that. However requiring jQuery would be no biggie. Again because the benefits of using Flexbox are just so great.

Finally, I think if/when/once you start work on Flexie 2 there will be people willing to help, including myself! So maybe we can counter the increased complexity by collaborating.

[mikerobi]

@doctyper, I will not be using jQuery. I hope that flexie remains library independent.

[LandonSchropp]

I really hope you leave in the CSS parsing. It's really nice to source flexie and forget about it.

[aredridel]

Parsing the CSS makes it an awesome polyfill -- I say yay to that heartily.

I've no love of jQuery, though no plans to use it in an environment where it's not available. I do like the a-la-carte style, though, of not having to use it.

[paulirish]

@doctyper a few replies to your concerns above. https://dl.dropbox.com/u/39519/cam/Pictures/Movie%20on%2010-31-12%20at%204.53%20PM.mov

[paulirish]

Also.. forgot to mention.. https://dl.dropbox.com/u/39519/cam/Pictures/Movie%20on%2010-31-12%20at%204.57%20PM.mov

[doctyper]

@paulirish Thanks for the notes. When you said Safari 6 and FF stable were up to spec, did you mean the 2009 spec? I just tried some flexbox tests in those browsers and no joy.

Looks like Chrome stable is still the only browser to fully(?) support new flexbox.

[paulirish]

maybe i was lying. yup. i was. http://caniuse.com/#search=flex

On Thu, Nov 1, 2012 at 9:05 AM, Richard Herrera [email protected]:

@paulirish https://github.com/paulirish Thanks for the notes. When you said Safari 6 and FF stable were up to spec, did you mean the 2009 spec? I just tried some flexbox tests in those browsers and no joy.

Looks like Chrome stable is still the only browser to fully(?) support new flexbox.

— Reply to this email directly or view it on GitHubhttps://github.com/doctyper/flexie/issues/34#issuecomment-9985447.

[MarcDiethelm]

@paulirish, @doctyper Mozilla marked the Flexbox bug as RESOLVED FIXED on Nov. 30... https://bugzilla.mozilla.org/show_bug.cgi?id=666041#c120

We'll probably see support in Fx18!

[doctyper]

Interesting. I just gave it a go and it looks like it's still missing support for the flex-wrap property. I hope they're not going live with an incomplete implementation, or we'll have a repeat of the 2009 mess.

[paulirish]

can you chime in on the ticket, @doctyper?

On Fri, Nov 9, 2012 at 7:47 AM, Richard Herrera [email protected]:

Interesting. I just gave it a go and it looks like it's still missing support for the flex-wrap property. I hope they're not going live with an incomplete implementation, or we'll have a repeat of the 2009 mess.

— Reply to this email directly or view it on GitHubhttps://github.com/doctyper/flexie/issues/34#issuecomment-10233654.

[doctyper]

@paulirish @MarcDiethelm So yeah...

I'm intending to leave out the multi-line mode from our initial flexbox implementation, as noted in bug 696253 comment 11, and to add multi-line support in a followup bug.

This is that followup bug.

[doctyper]

@MarcDiethelm Still interested in helping? :) @paulirish I need some flexbox enthusiasts to pitch in, this rewrite is too big for me to handle myself. Can you warm up the bat-signal?

[shmuelie]

I've forked the project so if there's anything I can do to help...

[jessebeach]

Forked and going through the issues. I'll need an evening to read through flexi.js

[pci]

Answering the bat signal. Happy to do some grunt work if someone points me in the right direction.

[LandonSchropp]

Same here. I can help too.

[doctyper]

To those able to contribute ( @SamuelEnglard, @jessebeach, @pci ), first of all: Thank you!

This repository targets the old Flexbox spec, and is only tangentially related to the next-gen Flexie. I've just made that public. Head over to https://github.com/doctyper/reflexie/tree/develop to check out the mess I've been making.

Thanks again.

[shmuelie]

A thought on the CSS parsing, look in to how @stubbornella does it in https://github.com/stubbornella/csslint ?

[Schepp]

As @paulirish said, use JSCSSP as your CSS parser. It works very well - I used it in a polyfill myself. It only needed a patch to get mediaqueries going. Here it is: https://github.com/Schepp/CSS-Filters-Polyfill/blob/master/lib/cssParser.js

And then there is also a newer project css-parse which is used by the CSS preprocessor "Rework" and that is maintained by the author of Stylus. So it can't be that bad. But I did not yet take it for a drive: https://github.com/visionmedia/css-parse

[doctyper]

A possible blocker in using JSCSSP is its size. Even without a parsing solution I'm already topping 25KB in my Reflexie build. I assume I'd need to bundle my chosen solution together with Reflexie itself.

I know file size doesn't matter as much anymore, but there's a tipping point somewhere where file size outweighs the benefits of using a polyfill.

[shmuelie]

Size matters in mobile still though. (I even care about size enough that I made https://github.com/SamuelEnglard/perfshim)

[philipwalton]

I'd be happy to lend some help to the new Flexie library as I can't wait to be able to use Flexbox in production projects.

@doctyper with regards to CSS parsing, I think the ideal solution is to leave it up to (or create) a third party library. Almost every polyfill out there has to XHR for the stylesheets, parse them, read @media and @supports rules, and then know how to update itself when new media queries match. This is a lot of boilerplate that almost every single polyfill does! In an ideal world all this code would be abstracted into a library that polyfill authors could plug into to be notified when the rules they care about match and receive events on changes.

I submitted this basic idea to @paulirish's lazy web request site, but no one has bitten yet. In the meantime, I'm working on a prototype myself. https://github.com/h5bp/lazyweb-requests/issues/110

@Schepp css-parse seems like a good option. It's super small, and almost entirely passed this simple test case (it failed on obscure things like @page { } ): http://jsfiddle.net/mmFhE/

[pci]

Ok, I've had a look at the Flex Layout Algorithm spec last night - this'll be fun - gulp

But I had a few questions:

• Rather that put everything here, where should we discuss different parts of the code - by creating new issues under reflexie?
• Are the (generate/runner) tests finalised or is there still work to do on that front?
• What are your main feature focuses at the moment?

[doctyper]

There are a few rough issues in Reflexie now that I added as a roadmap. We should continue discussions there: https://github.com/doctyper/reflexie/issues

The tests are not finished, no. There's a logjam of tests I need to clear up. Someone mentioned pairwise testing, which I'll need to get familiar with.

In the meantime, there are 42,000 tests that cover the entirety of the parent flexbox suite.

Current outstanding issues:

• There is rudimentary support for child properties, but no tests written yet.
• I still need to add support for the esoteric parent properties: baseline alignment, inline-flex, etc.
• I still need to pick a CSS engine. For Flexie, I ended up grabbing some code from the Selectivizr project that covered most / all the parsing I needed. If possible, I think I'll try abstracting that functionality into a shareable module. /cc @keithclark

[ghost]

http://www.youtube.com/watch?v=SmHeP9Sve48 :)

[joshbedo]

Looks like I'm a little late but would love to help as well. Just posted a little tutorial on creating a grid system with flexbox and would love to link to this project for legacy support.