FLEXBOX: a new type of madness

FLEXBOX: a new type of madness

by Mary Evans -
Number of replies: 8
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

After watching a video presentation about Flexbox I was left stunned by, what I consider, the re-invention of the x,y axes which in Flexbox are termed 'main' and 'cross' respectively.

I did wonder why it was that they did not give them a name like x-index and h-index to match z-index. But then lots of people can't read maps so using terminology like horizontal and vertical is perhaps confusing.  But then again, how confusing is 'main' and 'cross' for goodness sake?

Talking about the z-index, did you know it is a 3 dimensional  concept?

as in the 'z' in the x, y, z axes?

Flexbox Flexbox...bah humbug!

 _____.__                ___.                 
/ ____\  |   ____ ___  __\_ |__   _______  ___
\   __\|  | _/ __ \\  \/  /| __ \ /  _ \  \/  /
 |  |  |  |_\  ___/ >    < | \_\ (  <_> >    < 
 |__|  |____/\___  >__/\_ \|___  /\____/__/\_ \ 
                 \/      \/    \/            \/
Average of ratings: -
In reply to Mary Evans

Re: FLEXBOX: a new type of madness

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Possibly not very well explained in the video Mary, but main ≠ x ≠ horizontal and cross ≠ y ≠ vertical - or at least they dont have to smile (although they are in his examples)

main can be horizontal, left to right or right to left, but it can also be vertical top to bottom or bottom to top. cross is then the perpendicular axis. All by changing just one value in the flexbox settings.

Take a look at http://bennettfeely.com/flexplorer/ - shows browser support too, but take a look at the flex-direction

flex-direction: row => main = horizontal ltr (cross = vertical)

flex-direction: column => main = vertical top-to-bottom (cross = horizontal)

both can be reversed row-reverse/column-reverse (I haven't quite got to the bottom of whether you can get main = rtl AND cross =bottom-to-top smile )

I was doing quite a bit of work (playing? smile ) with flexbox as a layout for moodle a few weeks ago and have a theme (layout only!) based on flexbox, but right now it only works on the later webkit browsers (Chrome) as I haven't got a working fallback yet and support for the new syntax is not very good as yet (was supposed to have made it into FF22 but didn't seem to - at least not on Linux - or equally possible I have something wrong with the code! smile I had put it to one side waiting for FF22 and haven't had chance to take another look for the last couple of weeks)

https://github.com/roelmann/experimental

Richard

Edit: In principle the flexbox layout works just as well with bootstrapbase as a parent - although I've used base/canvas when I was playing.

Average of ratings: -
In reply to Richard Oelmann

Re: FLEXBOX: a new type of madness

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Rich, I've got FireFox 22, so just cloned your theme into localhost/moodle/theme/experimental and about to try it out. As this is Moodle 2.6 (git://github.com/moodle/moodle.git master) I need to add canvas to the $plugin dependencies array in experimental/version.php using:

$plugin->dependencies = array(
    'theme_canvas'  => 2013050100,
);

I'll let you know how I get on. smile

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: FLEXBOX: a new type of madness

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Wonderful, thanks Mary - if you want to compare how its supposed to work, check it out in Chrome first though!

Yes, it'll need a bit of tinkering like that for 2.6 as I was doing my playing in 2.5 at the time and like I said, I put it to one side a few weeks ago and haven't had chance to look at it again for the last couple of weeks - I've been ploughing ahead with our upgrade to 2.5 in work and all that's involved in that (testing, making how-to videos, demonstrating - and doing some of the linkup stuff with the new merger too!), so haven't really had much chance to do anything with 2.6 yet smile It meant this and buckle and a few other projects had to go on the backburner for a while, but hopefully I can pick them up again properly soon. Particularly if there's interest in moving forward with the flexbox approach - I like it, myself, but I do think it needs better browser support or decent fallbacks that work with the newest version of the syntax rather than having to recreate everything in a variety of ways that create so much code and complexity it negates the advantages smile

Perhaps I can find a way to take my laptop out in the garden to take advantage of this strange yellow orb in the sky - someone told me its called the 'sun'??? :D LOL

Average of ratings: -
In reply to Mary Evans

Re: FLEXBOX: a new type of madness

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Updated version of experimental now on github, Mary

https://github.com/roelmann/experimental

- much simplified and removing all (most) of the flexwrap which is the bit that causes problems with firefox still, but added in a responsive version of the custom menu (unfortunately using jquery at the moment, but converting that to YUI is a job for a bit further down the line!).

Its still an experimental, layout only theme - in that the colours etc on there are simply there for me to see the different regions and no styling has been added beyond the bare bones to see what's happening - but as far as I can tell right now it works on current versions of FF, Chrome and IE10 (I need to get hold of a PC with IE9/8 on for testing what happens there) But the next job is to get it off my laptop local host and onto my web-site testing so I can actually try it out on mobile devices smile

Rich

Average of ratings: -
In reply to Richard Oelmann

Re: FLEXBOX: a new type of madness

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Thanks,  I'll update your theme on my localhost server and test it.

Cheers

Mary

Average of ratings: -
In reply to Richard Oelmann

Re: FLEXBOX: a new type of madness

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

WOW...what a transformation. Looks to be working well in FireFox. Looks neater too. The responsive design looks to be doing everything asked of it and looks great in the process!

Looks like a typo @ Line:11 in core.css. Better check it out...! smile

All in all Richard I am well impressed! smile

cheers!

Cheers from Me!

Average of ratings: -
In reply to Mary Evans

Re: FLEXBOX: a new type of madness

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Thanks Mary smile

Typo sorted!

Now to build a 'real' theme from the experimental layout (work, holidays and everything else permitting - which they haven't been for a while!!!)

R

Average of ratings: -