Flexibility 2 Plan
jonathantneal opened this issue · comments
Hello internet,
I have some time to love on Flexibility the next few weeks, so I’d like to lay out my general plan.
Project goals in v2.0
- Write out all of the flexbox calculations as JavaScript and specify the order they must be run. This will serve as the technical roadmap for v2, including the new features.
- Write out the way flex data is determined in IE.
- Separate out the flexbox calculations as separate scripts. This way, it might be easier for other developers to patch missing or malfunctioning features.
- Separate out the way elements are flexed, allowing other browsers to use js flexed elements. This would allow support for older Android, and also allow me to test flex in browsers like Chrome, which might be nice for development.
Notable features in v2.0
- A new JS flex engine written from scratch.
- Support for
flex-grow,flex-shrink, andflex-basis, andmargin(yaymargin: auto). - No erroring out because of SVGs or un-displayed elements.
Future features in v2.x+
- Support for
fixed,absoluteelements within flex. - Separated flex adaptors so that you could use flexibility with, say, data attributes on Android.
P.S. Please forgive the delays. I manage svg4everybody, sanitize.css, normalize.css, and I created and maintain the largest number of PostCSS plugins.
Awesome news, thanks for all your hard work
Okay, here is the documentation so far as to how I will re-implement Flexbox using JavaScript: https://gist.github.com/jonathantneal/500a650ce01ddea12d555e127cbb49ba
This should help everyone see my progress and also allow others to help, should I make any errors or need to step away for a short time.
Good news!
- I’ve written out all the existing flexbox calculations as steps and JS.
- I’ve written out all the additional calculations for
flex-grow,flex-shrink,flex-basis, andmargin. - I’ve written tests in AVA for all these calculations, providing nearly complete code coverage.
- I’ve written the wrapper that puts them all together, taking in parsed styles and producing all positions and sizes.
- I’ve wired these up to Browserify and I’m currently writing the functions that will both read the DOM, push the parsed styles into flexibility, and then write them back out.
This all seems very close to being finished, but in reality I suspect it will be another week.
And that’s not all; our baby is due in the beginning of May, so, if you have a calendar, you’ll realize there’s a real chance I’ll need to step away for a short while (a few weeks) once the baby is born. Thankfully, having documentation all of these calculations and the processes to complete my work, there won’t be significant overhead when I return.
That’s all, and thanks to anyone who reads this. Let’s make the www a happy place for flex.
I'm getting really excited! Thanks so much for all the work you're putting into this :D
Another update!
- The final flexbox dimensions were pushed to the DOM as styles.
- In Chrome, I created 2 files; a test and a control. Both have flex styles written in a
data-flexattribute; the control file moves the value ofdata-flextostyle, triggering Chrome’s native flexbox; and the test file pushes the value ofdata-flexto flexibility. The results are identical files. - In IE9, IE10, and IE11, the test file is identical to the Chrome control, sans font aliasing differences (as one would expect).
- In IE8, the test file is identical. Wow!
- I go on to test all variations of
align-items,align-self,justify-content,flex-grow,flex-shrink, andflex-direction. Success! - A major bug has been found. It’s time for box sizing awareness. Adding a
borderto the container fouls up positioning of the items and sizing of the container. Manually offsetting this difference in an attempt to narrow down the issue produced unexpected results, which means more research is needed today. I’ll also want to see if changingbox-sizingandpaddingproduce similar issues.
In short, I am a lot further ahead in my planned progress than I thought I was. However, I’m a lot further from understanding my end game, as I’m yet sure how to properly handle box sizing.
If you’ve been peeking at the 2.0.0 branch, you might have seen that most of the bugs have been worked out for plain old flex, but I’ve been hung up implementing flex within flex.
- You want to flex calculate a flex container with 3 items.
- You check the first item and its descendants for other flex containers. It has one. You flex calculate that.
- You check the second item. It has none.
- You check the third. It has one. You flex calculate that. It increases the height of the flex container.
- With this in mind, you must now recalculate the first item’s descendant flex container again.
- Does this go on forever?
The flex layout algorithm may contain the answer, but I can not find it. Any takers on solving this?
Thanks for your effort @jonathantneal. We've been using Flexibility on our redesign at the City of Boston.
Can you draw up code example of the situation you're describing?
@fantasai, here is a code example with descriptions: http://codepen.io/jonneal/full/JXmmEV/
I see that you are using css-layout under the hood. It handles the codepen you mentioned above correctly.
See this rnplay (react native uses css-layout under the hood): https://rnplay.org/apps/-qC0Eg
We’re not actually using css-layout in v2 because it does not handle auto. See the 2.0.0 branch. :)
Got it :)
Just wanted to say this is looking awesome already! Did you manage to get any answers around recursive flex or box sizing?
No, and I was away for a few weeks because we went and had a baby. :) Now I’m thinking about how this could all be done by first making the child nodes of a container display none.
@fantasai, did the example help?
Sorry for all these updates, but this one is very good. It is ready for a v2.0 release! I know there is more to be done (specifically with recursive resizing), but the first v2 release will cover many more usecases, support all the flex properties, auto margins, and deeply nested flex containers. Not to mention, it could be used on non-IE browsers.
It was a lot of effort, and I’m already very grateful to 10up leadership and the 10up family and specifically @lkwdwrd for getting v2 this far.
If anyone is around today to help with packaging, that’s cool, but otherwise I will do my best to have it wrapped up over the weekend.
This is awesome. Any idea when Flexibility 2 will be available? I'm super keen to start using it. Thanks!
Wrt the codepen example...
https://www.w3.org/TR/css-flexbox-1/#algo-stretch requires redoing layout after calculating the auto-height of a flex container. (We don't like that from an algorithms perspective, but authors expect it to work and it's useful.)
The second example triggers a bug in the intrinsic sizing of wrapped column flex containers. The spec prose is here: https://www.w3.org/TR/css-flexbox-1/#intrinsic-cross-sizes “For a multi-line flex container, the min-content/max-content cross size is the sum of the flex line cross sizes resulting from sizing the flex container under a cross-axis min-content constraint/max-content constraint (respectively).” There's a bug in most implementations... they only consider the first line. However, IIRC Edge gets this right.
Let me know if that helps or if there's still an issue. :)
bump Any updates good sir?
The update would be; I really wish I had some beta testers on hand. :P
i'd be willing to help!
Same here. Let me know how I can help.
On Wed, Jun 22, 2016 at 11:05 AM Ryan Johnston
<
mailto:Ryan Johnston notifications@github.com
wrote:
i'd be willing to help!
—
You are receiving this because you commented.
Reply to this email directly,
#53 (comment)
, or
https://github.com/notifications/unsubscribe/AAAkEnn3wk5aEpFG1lFWNWoBJ_MDSO_iks5qOU81gaJpZM4IKWWg
.
Thanks! You and everyone are welcome to join us @ https://gitter.im/10up/flexibility to talk about how we can get this in your hands.
The new release is ready! We’re working to get it to you ASAP.
@jonathantneal Nice!
The issues around box-sizing are worrying me. As a general rule, I do this with my style sheets.
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherent; }
If Flexibility 2 doesn't support border-box box sizing then it's going to be completely useless to me :(
IT IS RELEASED!