Themes

 
 
Picture of Richard Oelmann
Re: New theme requesting testing and feedback
Group Particularly helpful MoodlersGroup Testers

Hi Gareth - yes the flexbox does make all the rtl block manipulation redundant, you simply change the flex direction. One line of css (plus the prefixed fallbacks) and its done. But it also renders all the logic for the ordering of columns and whther they are there or not and filling the remaining space redundant as well, because you can just set the order of the columns and their proportional sizes, or what proportions of extra space they expand into. It really is a powerful tool for layouts.

At its very simplest, you just create the header, the main content, the two? sidebars and the footer and you let the flexbox css deal with everything from the order to the rtl/ltr to the responsiveness. Unfortunately its not that simple (what is!? smile ) because even in the browsers that do support flexbox there is variation - such as FF not supporting the flex-wrap so you still have to separate out the header and footer and use @media and flex-direction to deal with various bits of it.

There are a few good tutorials out there, but you do have to be a bit careful because of the fact that its changed a few times, so there's a few different versions out there, including the prefixes and the mishmash that is IE support. The tool Ive tended to use most has been http://the-echoplex.net/flexyboxes/ but there's a few others around as well

The main problem...

Older browsers don't support it - even with some of the vendor prefixes and those fallbacks its not complete - and there's no working polyfill for it at this stage (there was one for an older version of the flexbox layout, but not for the newest RC).

My current aim is to get rid of the browser sniffing Ive got in there and replace it with modernizr.js, but I cant seem to get it to work sad By my reckoning, its there in the html if I view page source and its listed in sources and I can see the contents of it using Chrome developer tools (the Javascript console). According to my reading - Ive added the no-js class to html and the modernizr script should be replacing that with the various classes from its testing, allowing me to remove the browser sniffing and the extra wrapper div Im using right now.

Implementing js is one of the things Im trying to learn as I build this theme, so any pointers as to why its not working would be welcome smile I presume Im missing something from what I've read and what Ive looked at in other themes - I just cant see what at the moment.

As for the docking - Its a tool I'm really hoping to get in there before this theme goes out anywhere, but at the moment Ive been concentrating on the fallbacks for the flexbox main layout.

in terms of the display:none issue - yes if you override the layout with a later display rule such as display:none, then the other items will expand to fill the space of the disappearing item (just checked by using firebug and adding a display:none to one of the sidebar columns - it disappeared and everything else filled the space).

I really do like the flexbox model and it is so powerful and easy to use. If I can just get passed the issue of supporting things like IE8 on XP then I would be happy to use it - All the other browsers are free to download and upgrade - and yes I know IE is too, but you cant go beyond 8 on XP machines and despite XP being end of life soon there are many companies and institutions that still use it and who dont allow alternative browsers. A very shortsighted view in my opinion, but its there! I've even been told of one instance of an institution that is upgrading to Win7, but not going beyond IE9 because its taken them so long to roll that out they dont want to start again rolling out another higher version!!!

R

 
Average of ratings:Useful (1)
It's only an avatar...
Re: New theme requesting testing and feedback
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Richard,

I know IE8 is a real pain, but is not the only browser that you can use on XP.  When building Moodle Themes in XP and FireFox I found that Moodle was faster.  I seem to recall someone likening it to, "...cutting through a field of butter with a hot knife!...".

 
Average of ratings:Useful (1)
Picture of Richard Oelmann
Re: New theme requesting testing and feedback
Group Particularly helpful MoodlersGroup Testers

Yes smile

I use FF and Chrome and avoid IE like the plague myself. But Im aware of some places that insist on IE and prevent other browsers (I think its a shortsighted and flawed policy, but... ). So I wanted to at least make the theme usable with some fallbacks for older versions - It won't have all the look and feel and wont be responsive on those older browsers, but it should at least be usable (with a big notice at the top telling people to use a decent browser ;) )

Firefox is usually my 'goto' browser, especially on XP - although my access to XP machines is now close to zero!-  but I think Chrome is actually even faster - recalling the graphic Julian (I think) posted recently too ;) https://moodle.org/mod/forum/discuss.php?d=231970#p1065436

And I can do it with browser sniffing but I keep reading that this is not best practice, so I was trying to improve the theme and to get it to work with modernizr to reduce the code. Im happy enough building the fallbacks and giving older browser users a usable page (not finished in the version thats on github right now, but happy that I can do it as I progress over the break) - but wanted to get that modernizr script working if I can, as well as improve my understanding of how it works.

Its been fun learning about the flexbox layouts - frustrating at times, partly because its still in RC and browser support isn't 100% even now with the latest browsers - but fun smile

R

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: New theme requesting testing and feedback
Group DevelopersGroup Particularly helpful Moodlers

Ooooo, lots of food for thought.

Ok, if you need XP and have certain versions of Windows 7, then you can download and use XP for for free - http://windows.microsoft.com/en-GB/windows7/install-and-use-windows-xp-mode-in-windows-7.  Support will end soon in line with XP, but what the heck, you don't have to maintain an old machine.

I've found that FF runs like a whippet with a Zimmer frame on Windows at the moment - or at least with FireBug.  And if I run the same combination on a virtual Ubuntu 12.10 on the same machine its really fast.  I'm not quite sure what is going on.

With FlexBox, I think that utilising new technologies in the early stages of their development helps to understand them.  It provides knowledge even if older browsers are not supported.  Through demonstration of new technology you can provide the impetus for the non-technical managers to make the technical decisions about upgrading browser versions (deliberate Catch-22 here).  The decision about upgrading is always a problematic one.  You don't want to hang on to the constraints of the past and at the same time plough too far into the future with the increased risk of failure.

I take the view with design that you should de-risk a new technology on common stable hardware and software at the time.  Design, implement and simplify the code.  Then tackle how you will add fall-backs if required.  Often as development takes time, by the time you've completed the finished product then things have moved on anyway.  That upgrades have happened, that the light at the end of the tunnel was a new dawn and not an oncoming train.

Themes need to be like advertisements.  The new product has to be wanted and more importantly be better than the product it replaces.  Use browser detection to provide fall-back looks that make people want the new look.  And that look happens by a simple browser upgrade.  Problem -> solution.  Old -> new.  Everybody needs a reason to expend effort, so give them one that is credible.

Cheers,

Gareth

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: New theme requesting testing and feedback
Group DevelopersGroup Particularly helpful Moodlers

Hi R,

Is supplying FontAwesome in the fonts folder and yet using CDN in the styles intentional or a WIP?

G

 
Average of ratings: -
Picture of Richard Oelmann
Re: New theme requesting testing and feedback
Group Particularly helpful MoodlersGroup Testers

Its a work in progress smile

I think the way Julian handled it in Essential is to create a setting that allows the admin the option to use the loaded fonts or the CDN version and I'm thinking to put the same thing in place, but haven't done it yet - Im not comfortable about using the cdn with no possible fall back (at this stage at least), partly for my own purposes as I often do development work on a standalone laptop with moodle installed and dont always have internet connection.

I cant really comment in too much detail on browser speeds in Windows as I do almost all my development work on Linux and only really use Windows 7 for testing - but my limited experience (and without proper stats to back it up) would put them something like (fastest->slowest) chrome(linux)-> chrome(win)-> FF(linux)-> FF(win)->->-> IE

As for the pushing forward v catering for old browsers - its always a balancing act, but perhaps even more so in this instance because of how new and the flexbox model is (its still in RC after all! smile ).

 
Average of ratings: -
Picture of Richard Oelmann
Re: New theme requesting testing and feedback
Group Particularly helpful MoodlersGroup Testers

Well, the issue with modernizr must have been caching - even though I thought I had purged caches a number of times and have theme designer mode on anyway. Ive been playing around with the theme a little bit yesterday and today and just looked at the <html> in firebug and lo and behold all the modernizr additions are there today (different computer, so maybe its an issue with my browsers/computer in work). So at least I know I was doing it right having followed the docs and the example of a couple of other themes smile

Have a great Christmas everyone!

 
Average of ratings: -