[Theme] Foundation for Moodle

[Theme] Foundation for Moodle

by Danny Wahl -
Number of replies: 15

With all the excitement (and great work) going on with Bootstrap for Moodle, I thought it would be fun to look at other frameworks and see how hard/easy it would be to integrate.

I chose Zurb's Foundation 4 which offers some similarities to Twitter's Bootstrap but also some different and cool features like:

goals:

  • the best accessibility, usability, and rtl support of any theme!
  • awesome mobile support (I guess that's usability...)
  • integration for people that know Foundation*

*Yes I'll be using specifier classes like "row" and "large-8" instead of compiling SASS.  The reason is this:  I want people who know Foundation to be able to easily develop for Moodle, not vice-versa.  If you disagree with this, Foundation has awesome documentation of their mixins - feel free to recompile for Moodle.

Status:

to-do:

  • wire-up js
  • wire-up styles (by rewriting renderers...)
  • off-canvas
  • responsive tables

Check it out, test it, contribute (at github please...)!

Average of ratings: Useful (4)
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

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

This looks really interesting Danny, especially the RTL version.

I've just downloaded the two versions.

Cheers

Mary

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by David Scotson -
Very cool. I'd be very much interested in working with you on renderers that work for both Foundation and Bootstrap (and others). I think there's a lot of stuff that's common to modern frameworks that Moodle should be adopting in it's HTML and that it should be doing so via renderers, so that it's not painting itself into a corner by being too tightly bound to any one framework.

cheers,

dave

Average of ratings: -
In reply to David Scotson

Re: [Theme] Foundation for Moodle

by Danny Wahl -

That sounds awesome man.  To be honest I've shyed away from grids, frameworks, etc... for a while because it seemed like such a burden to shoe-horn into whatever other *MS (wordpress, moodle, etc...) but now that I've played with this and bootstrap it's pretty simple*

 

*fast to learn, lifetime to master

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by David Scotson -
Was just having a look at the Foundation stuff again in light of what we've been doing recently with Bootstrap.

I think you should think about using SASS compilation, not for randomly renaming things to be more semantic, which I agree is often misguided, but to get up and running quickly with the bits of Moodle HTML that can't be changed easily in renderers or layout files, but that you can apply styles to via mixins and variables.

If you ported the .less version of the core Moodle styles in the Bootstrap theme to .scss (which would mostly involve changing some . characters to @, some @ characters to $, mapping a few variable names, and could probably be scripted) you can get a fairly good "base-coat" with relative ease and it also retains a lot of the flexibility that SASS and Foundation offer. And one more set of eyes working on refactoring and stripping down these core styles would be good.

That and changes to layout/general.php are the two big things in the Bootstrap theme at the moment. There's only really two renderers I've found so far that you can cleanly change and have the results appear throughout Moodle (navbar and notification in core, https://github.com/bmbrands/theme_bootstrap/blob/moodle_25/renderers/core.php#L26-L57) so bigger changes to rendererss have been de-prioritized in the hope that the core ones will be re-written on top of a collection of smaller, more focussed renderers (otherwise you're essentially forking large swathes of core code just to make some buttons look nicer, and even then often requiring some wacky maneuvers).

Oh, and I've just noticed that Foundation applies it's styles directly to the table tag. You probably want to change that to be a mixin on .generaltable, so that's another good reason to compile. Even if the remaining tables used for layout in Moodle get fixed, people creating content in Moodle are still going to use them that way.
Average of ratings: -
In reply to David Scotson

Re: [Theme] Foundation for Moodle

by David Scotson -
It seems that older versions of sass can convert automatically between .less and .scss though they've since removed the feature as of about 8 months ago.

I tried to give it a shot but the version installed in Ubuntu doesn't have the dependency and the version installed via gem was too new, but I'd wager it's worth a go.
Average of ratings: -
In reply to David Scotson

Re: [Theme] Foundation for Moodle

by Danny Wahl -

I think you're right, I've been looking at renderers all day and I believe there's only a few major one's I'm going to want to do:

  • navbar
  • custommenu (to comply with necessary HTML)
  • login_info (to stick it in the custommenu, because I want to...)

but after that I'm going to try out SASS.  I think it'll be a good addition for Moodle: a theme that uses LESS and a theme that uses SASS.  Something for everyone.

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by Bas Brands -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

That's great Danny,

I have done some experimenting with Foundation as well and it does have some really nice features. I'll am looking forward to watching this project evolve!

What other frameworks do you think are worth trying? Html5Boilerplate?

 

Average of ratings: -
In reply to Bas Brands

Re: [Theme] Foundation for Moodle

by Danny Wahl -

h5bp isn't really a framework so much - I actually try to use it as much as possible in anything I do (mobile first, etc...) but there do seem to be some alternatives too:

HTMLkickstart (looks more like a bootstrap fork)

skeleton (I've seen this used in WordPress a lot)

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by Danny Wahl -

Update:

I've finished the navbar and the customenu, and am now working on integrating the login_info() function into the custommenu.  I've got the basic framework done and have written everything for:

  • logged out
  • guest
  • authenticated user
  • "log in as" user

still to do:

  • "switch role to" (additional panel)
  • "MNET" users (additional panel)

here's the basic view(s)

desktop:

 

mobile:

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by David Bogner -
Picture of Core developers Picture of Plugin developers

Hi Danny,

we are going to publish a version of the Moodle-Theme, that we (John Stabinger did most of it) programmed for http://www.virtuelle-ph.at/ soon. You did change the custom menu. We do want to develop a touch friendly version of it. Did you do similar things?

Also there were some things, we could not change with renderers.php, like styling a category page correctly, needed quite some not so beautiful hacks.

Best regards,

David

Average of ratings: -
In reply to David Bogner

Re: [Theme] Foundation for Moodle

by Danny Wahl -

That is a beautiful looking moodle theme - really exemplifies that Moodle doesn't have to look like "Base" or "Standard".

I haven't done any touch optimization on Foundation - other than that it comes with it built-in.

modernizr does add a lot of html classes that you can leverage (and I might in teh future) like .touch and .no-touch

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by Danny Wahl -

another update:  I've finished the heavy lifting on rtl support.  truth be told it wasn't that hard - just some logic in the renderers and exactly 5 css rules, all dealing with the navbar.

Notice that not only is the custommenu just shifted to the right - the order of the items is switched too, as well as the separators.

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by Danny Wahl -

finished the 3 "User Panels" from the custom menu by rewriting the login_info() renderer and including it in the custom_menu renderer.  Here you see a user that is

1) Logged in from MNET

2) Logged in as another user and

3) switched roles

the "panels" show or don't show depending on those 3 things.  If none of them exist the dropdown disappears from the user's name on the top (and from the mobile menu)

since I don't have a real MNET host to check the output looks a little funny because $idprovidername is NULL - there should be a provider name and link back to your host.  If anyone has a real MNET setup and can test this for me I would be grateful, but it should be working ;)

Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by Hassan Kazem -

Hello,

I can see that the latest post in this thread is back to march 2013!

Would you kindly let me know the latest news about the RTL development you initiated?

I am interested

And I am ready to share some knowledge, time and/or resources.

I have --with-xmlrpc supprt and I would like to discuss if possible to sponsor your efforts as in term of hosting with --with-xmlrpc support.

Regards

Keep it us

Hassan

Dorar Design

CEO


Average of ratings: -
In reply to Danny Wahl

Re: [Theme] Foundation for Moodle

by Danny Wahl -

beginning work on the blocks.  Nice and simple using the styles from Foundation: Sections->Accordion and the JS from Moodle.

Average of ratings: -