Hi all - I'm pushing a theme Ive been toying with for a while onto github in the hope that a few people can take a look and provide feedback (on the features and requested features to add rather than the coding as I am very aware its not in a fit state for full release yet - early Alpha code seeking early feedback to help development rather than RC code for testing!). It works best on FF22 and above, Chrome 21 and above, Safari 7 or IE10/11 - there are some fallbacks for some earlier versions of the broswers which have partial support for flexbox, but currently those are classed in with those having no flexbox while I do some more work on it, with the no-flexbox browsers falling back to a fixed width 3column layout at present.
It's based on bootstrapbase and lots of bits of Julian's brilliant essential theme, but it uses flexbox for its layout - older browsers are catered for with a fixed width, fixed columns layout (2 sidebars on the left currently - but probably this will change to a single sidebar). I have tested on IE11 resetting the browser type to test in IE8,9 and 10, but would appreciate feedback from anyone who actually has access to these browsers or to a wider range of mobile devices to test on (besides the online emulators Ive already tried).
In modern browsers the myHome page has a section above and below the main content for dragging blocks onto, while the courselist on the frontpage is styled into small boxes rather than as a list. And the layout (3column holy grail, 2left sidebars, 2 right sidebars etc) can be selected from setting.
Many thanks in advance for any feedback.
Ooops, Sorry Gareth - I was rushing out to a choir rehearsal and left the link off
It uses bootstrapbase as a parent, initially as a clone of clean and with elements of Essential as well (some of which need to be significantly cleaned up - by which I'm talking about my implementation of them into this theme not Julian's original code, removing surplus bits of jquery that I haven't used and so on), but it replaces the layout files completely and uses flexbox to create the layouts.
I've built it in 2.6 - it should work in 2.5 as well, but hasn't been tested yet.
Built in 2.6 and 2.7dev - tested in Chrome (latest - Win/Linux/Android), Firefox 25 (Win/Linux), IE8-11 (by IE11 developer tools), Safari7 (by browserstack emulator only) - previous versions were also tested in browserstack, but not since I did the latest 'playing around' this week.
(oh and the browser string being printed at the top of the screen is obviously not part of the actual theme, but part of the ongoing work Im doing to get better fallbacks for all the older browsers )
Thanks for sharing Richard.
I'm intrigued by the new flex box layout so did some hunting and found:
With the latter hinting at automatic ltr and rtl ordering. Might make the block region manipulation code redundant.
The flex layout feels to me like the Java Spring layout manager - http://docs.oracle.com/javase/tutorial/uiswing/layout/spring.html - just a vibe though.
I see you are using the prototype bootstrap docking code but not yet adapted it. Something still bugs me about docking. I know I've mentioned it before. I have come to the conclusion that it is needed, but feel that it needs to be something different, something wacky with that wow factor. Just not sure yet. Its like an itch you cannot quite scratch because your not exactly certain where it is. Does the flex box model adapt when things are hidden / added like with 'display: none' and 'display:box'?
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!? ) 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).
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 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!!!
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!...".
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
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.
Its a work in progress
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! ).
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
Have a great Christmas everyone!
Richard, I am intrigued by the possibilities for this theme. Is it possible to set the frontpage to be the 'holy grail' three column format as per 'stock' moodle? The way my school site works (and my personal preference) is for this display. I can't get the dock to work either yet, even with dock enable set to true in the config.php and with the dock.css sheet added to they array.
Excellent - thanks Gareth!
I'm going to borrow an iPad from work over the Christmas break and I have access to a nexus 4, nexus 7 and samsung note10 to try all those over the holidays, so hope to get more testing on those platforms done too.
For testing on older browsers Im not going to go as far as downloading XP - Im sure I have an old XP disc somewhere that I could build into a virtual machine, but to be honest, for my purposes, using IE11 developer tools and then checking in browserstack will do well enough, and will also allow me to check some of the older firefox/chrome/safari variants to see if the prefixed version fallbacks are working too
Im not even going to try replicating the exact functionality of the flexbox version, but as I said earlier - a usable layout for older browsers with a note and links to upgrades will do for me for now. But I do need that, because even though FF/Chrome/IE(forWin7) are all free uploads, getting some IT departments to keep upto date is an ongoing battle and individual users do not always have the rights to install/update their own browser software.
All testing (thank you Gareth )and options for feature requests (thanks Colin ) as well as comments on what is there already, most welcome
Stimulating interest is a large part of what Im trying to achieve Colin, so Im glad you are intrigued
At the moment the frontpage is hard coded with the single 'post' sidebar, but my intention (and something I started working on yesterday) is to create a settings page that allows the admin to choose the layout option for every page type in the config.php - including the frontpage and myhome page where I've already created something a bit different from the standard pages. So the answer to your question is - at the moment no, but in future yes it will be
As for the dock - because this started as a clone of clean and the dock doesn't work in bootstrap themes yet, the dock function doesn't work at present, but it will Its one of the features that I personally feel is a big miss in current bootstrapbase themes - But I haven't worked out yet exactly what I want to do with it and how I see it working in flexbox, whether there are features of flexbox that can help it improve or not. Once I get the core layouts and fallbacks relatively stable, docking is next on my wish list Because the flexbox layout is different to both boostrap and the standard layouts, Im not sure its quite as simple as just dropping the dock.css file in, but I will definitely be looking at it in detail soon!
Sparkle now has a setting page so that the layout for almost every page type can be set in the setting page by the admin (not for pages such as embedded, popup etc which are normally content only, no blocks, no header/footer, etc - but for standard, frontpage, dashboard, course and most others)
pagelayout.css has been rewritten to separate out the core flexbox code from the legacy/prefixed versions and the no-flexbox fallbacks (these are still not complete as I want them, but do allow the theme to appear reasonably on a fixed width fallback page for now)
1. finish fallbacks
2. get dock working
Sparkle is now at beta version on github
The flexbox layouts have been rewritten completely with fallbacks - although the no-flexbox fallbacks are VERY basic!
Various features and settings pages (mainly based on Julian's excellent work in Essential) have been added, such as the user announcements, frontpage slider, etc.
It's mobile friendly and the login page has been restyled using css only to change the look and feel of that too. It also has a top and bottom block section as well as a 'hidden admin block area'.
Layouts can be set from a settings page, so that the administrator can set pre-main-post, pre-post-main, main-pre-post, side-main, main-side or content-only direct from a settings page for a variety of page layout types (e.g. front-page, course, admin, mydashboard, reports, etc).
Docking still not enabled, which was one of my to-do's but I'm watching Sam's work on that in bootstrapbase with interest, although I'm expecting I may have to over-ride it once I take a good look as I'm using flexbox rather than the bootstrap grids for the layouts (after all, that was the whole point of this experiment!)
- Styles/colours, font/typescripts
- Tidy up code
- Investigate adding awesomebar (responsively)