Themes

 
 
Picture of David Scotson
Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I thought I'd update on my progress with renderers and styles for Moodle based on Bootstrap 3 (the as yet unfinished next version of the Bootstrap web framework).

The project has the same goals as previous work with the current version of Bootstrap, make Moodle lighter, faster, prettier, more consistent, more usable, more themeable, more mobile-ready, more responsive etc.

You can see some screenshots (mostly using the very handy Totara Element library) running under my current dev theme here:

http://imgur.com/a/IFUlj

The images are big so you might need to click the gear icon in the top-right corner to view the full size image, simply clicking on the image with the magnifying glass icon only makes them marginally larger. I'll attach a few edited highlights below as well.

The code is in github (https://github.com/ds125v/moodle-theme_bootstrap_renderers) and contributions are always welcome, I wouldn't have got this far without the contributions of people that are already too many to name, but thanks to everyone that's reported a bug, answered a question or taught me how to do something cool with Moodle.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I've just started work on the modal windows of the filemanager. Normally either javascript or forms makes things incredibly hard to theme in Moodle, but this has been mostly very easy. And it gives a bit more unity to Moodle when all the buttons match, rather than different parts seeming to be thrown together (TinyMCE is on my hit list for this reason as well, just not got round to it yet).

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
And a new look for Choice:

 
Average of ratings: -
Gareth J Barnard
Re: Bootstrap 3 progress
Group DevelopersGroup Particularly helpful Moodlers

Looking good David smile

 
Average of ratings: -
Me
Re: Bootstrap 3 progress
Group Moodle Course Creator Certificate holders

Oh my goodness, that Choice activity looks so much better! smile What excellent work.

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
I feel obliged to point out that almost all of the visual looks here are created by others, I'm just connecting Moodle and these existing styles.

The basics are of course the Bootstrap system itself but others such as the Choice are taken from the wider community that's building on Bootstrap, in this particular case the Bootsnipps project, where someone has taken the standard Bootstrap "progress-bars" and used them for poll results:

http://bootsnipp.com/snipps/poll-example
 
Average of ratings: -
Me
Re: Bootstrap 3 progress
Group Moodle Course Creator Certificate holders

Yep, I get that... but you are doing the work to apply it to a Moodle theme, and so that's what I'm giving the appreciation for. smile

 
Average of ratings: -
Picture of Mark Andrews
Re: Bootstrap 3 progress
 

Agreed! - It's one thing to have the idea it's another to stitch it together, In a manner that others can extend.

have had a quick play with this theme and the other Bootstrap theme and they really do give moodle a new, agile feel - it's fantastic!

Mark

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I think what is needed now David is for a master bootstrap theme that we can push into Moodle CORE, then we can use it like a new Base theme, borrowing layouts and renderers and a place to keep the icons and the lion's share of the CSS.

I really think the time is ripe.

MDL-38016

 
Average of ratings:Useful (5)
Julian Ridden
Re: Bootstrap 3 progress
Group DevelopersGroup Moodle Course Creator Certificate holdersGroup Particularly helpful MoodlersGroup Translators

+99 to Mary's ideas. Sure got my vote!

Julian

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Cheers!

 
Average of ratings: -
Gareth J Barnard
Re: Bootstrap 3 progress
Group DevelopersGroup Particularly helpful Moodlers

Got my vote smile

 
Average of ratings: -
It's only an avatar...
Re: Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Cheers Gareth

 
Average of ratings: -
Picture of Alfonso Roman
Re: Bootstrap 3 progress
 

Hi all, I'm a developer at UCLA and we also want to use Bootstrap in our theme.  We have, however, used a very different approach since we're very allergic to changing Moodle core code or overriding renderers too much.  We decided that we mostly wanted to do this by overriding Moodle's core CSS, so we opted to use the SASS stylesheet language and the Compass framework to achieve this.

In case you're not up to speed on what SASS & Compass are, you can check out these links to learn more:

http://sass-lang.com/
http://compass-style.org/
In a nutshell, SASS is a CSS metalanguage that adds constructs (variables, functions/mixins) to make it easier to work with CSS.  Compass is a library of pre-written SASS, for example it contains a mixin called: border-radius($border: 5px) that when used will generate CSS for a border radius that's compatible with all browsers.  You should know that this is a compiled language, but it's not as scary as it sounds once you start using it.  Also, since it is compiled, it outputs minified and compressed CSS.

To give you some motivation on how you'd use SASS to override core CSS, take for example the common class names that moodle uses for some tables:

.userenrolment, .forumheaderlist, .generaltable

Normally, you'd have to copy/paste the bootstrap code to override those in your theme CSS, then add your own custom changes on top of that.  Then track down all other classes that are used in tables, etc.  That's pretty awful, but with SASS you can do something like the following:

.userenrolment,
.generaltable,
.forumheaderlist {
    // Copy over Bootstrap table styles at compile time
    @extend .table;
    @extend .table-striped;
    @extend .table-bordered;
}

Bootstrap tableAnd now you have boostrap tables with three lines of code.  Suppose you wanted to change the nav tabs.  The following SASS will give you Moodle nav-tabs everywhere:

// .tabrow0 is the classname of default Moodle navigation tabs
.tabrow0 {
  // Grab the boostrap styles at compile time
  @extend .nav;
  @extend .nav-tabs;
}

// We still need to modify the hover states
.tabrow0 > .selected > a,
.tabrow0 > .selected > a:hover,
.tabrow0 > .selected > a:focus {
  color: $gray;
  background-color: $bodyBackground;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}

Bootstrap nav tabs

So hopefully you can see that sneaking boostrap into Moodle is a lot easier with SASS.  But there's an added benefit to using a tool like this.  First, you don't have to bring in bootstrap as a CSS file, you can bring in the boostrap SASS source files and now you have the option of loading only the things you need and overriding colors and other default values.  Suppose you only want the bostrap tables and buttons, then you only load those two files. 

Furthermore, it allows you to introduce organization into your CSS.  Most of our CSS changes were bundled into a few 1000 line enormous files.  The SASS code blocks I showed live in a single file each.  To give you a better idea, this is how our SASS project file looks like:

theme\ucla\sass\
            \ccle
            \course
                calendar.scss
                control_panel.scs
                forum.scss
            admin.scss
            blocks.scss
            frontpage.scss
        bootstrap.scss
        footer.scss
        form.scss
        header.scss
        navs.scss
        table.scss

By breaking up the files into separate modules, it's a lot easier to make complex changes to your theme. 

There are caveats of course.  Some styles are harder to change than others because of the way Moodle creates their CSS.  Some selectors are very specific and it's not very easy to override them.  There are also class name collisions which can only be resolved by renaming bootstrap styles (which sucks if they change it in the future).  Then there's the issue of adding a compile step to your workflow.  This is not as bad as it sounds since Compass includes a tool that automatically compiles SASS files when it detects changes -- making development pretty much the same as saving your CSS and reloading the page.  What you would need to do is make sure you compile your CSS (if it's changed) before you deploy.

The good outshines the bad, in my opinion since SASS constructs let you do responsive design very easily.  By bringin in Boostrap, you get their responsive grid by simply using their classnames in your custom code.  This stuff just works out of the box.  Suppose you wanted to make complex changes you can use SASS mixins to do something like:

// Suppose in your mobile site you wanted to change the tabrows to be smaller
.tabrow0 {
  // override Moodle's tabs
  @extend .nav;
  @extend .nav-tabs;
 
  // Use a mixin to add behavior for mobile.. The mixin will generate the media query
  // In this case, reduce the height of the tabs
  @include respond-to(handhelds) {
    height: 50%;
  }
}

In case you're wondering the mixin looks like this:
@mixin respond-to($media) {
    @if $media == handhelds {
        @media only screen and (max-width: 479px) { @content; }
    }
    @else if $media == wide-handhelds {
        @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
    }
    @else if $media == tablets {
        @media only screen and (min-width: 768px) and (max-width: 959px) { @content; }
    }
}

It would be very nice if there was momentum in the community to adop a CSS framework like SASS in Moodle.  I think there are great benefits in making core Moodle CSS more modular so that we can customize it as easily as we can customize blocks, modules and plugins.  It would certainly make some of the caveats go away.  I think it would also help in getting the community to make Moodle responsive by default. 

We have already done a lot of the legwork into adopting SASS in our workflow and I've created a branch (off the 2.4.1 tag) that adds the basic SASS project files and some of the overrides that I showed above to the Moodle standard theme.  The branch contains the config file needed if you're going to use Compass (recommended). 

The target compiled file is called 'theme.css'.  It's in the 'theme/standard/style/' folder and it's loaded into Moodle's CSS just like any other file in the style folder.

https://github.com/alroman/moodle/commits/moodle-sass

Some more screenshots:

Forum

 
Average of ratings: -
Picture of David Scotson
Re: Bootstrap 3 progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Hi Alfonso,

what you describe is the approach I started with, except I used LESS rather than SASS (partly because Bootstrap itself uses LESS and partly because there was a PHP port of the compiler that I could build into Moodle). Indeed I still use this technique in my Bootstrap Renderers project for any part of Moodle that I've investigated and found can't (yet) be updated with renderers. Even for the stuff I've rewritten the renderers for I still compile from LESS on-the-fly as that allows you to radically re-theme just by changing a few variables.

This thread covers a lot of this ground from when I was just starting with renderers and had just converted to using LESS:
https://moodle.org/mod/forum/discuss.php?d=208162

But even with the benefit of LESS that rapidly became an unmanageable mess. I spent more time working around my own workarounds and Moodle's existing CSS than I did improving things. That's why I started the more radical Bootstrap Renderers project which ditches all existing Moodle CSS and attempts to do as much as possible with stock, unchanged Bootstrap CSS and Moodle renderers to fix the HTML to conform to Bootstrap rather than vice versa.

I have compromised slightly in that rather than just leave the unrenderable stuff completely broken I've more recently started to patch those up using the old LESS import techniques (as long as it doesn't interfere with the other work too much). This was because the radical approach worked so suprisingly well that I thought I could actually get a usable theme out of it. The most widespread examples of un-re-rendererable content are forms and tables, though there are hundreds of tiny things hardcoded throughout Moodle:

https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/style/moodle/forms.less

https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/style/moodle/tables.less

I've also been trying to document (and file bugs) about clashes between current Moodle and Bootstrap CSS. This "undo" file has shrunk since I started using renderers to fix the core code myself instead of just work around them (though older versions are still in github).

https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/style/moodle/undo.less

There's currently some talk about getting a Bootstrap theme into 2.5. I'm just about to update the various bugs I filed so hopefully these could reconsidered in that light and simply be fixed once and for all rather than being worked around constantly (and not always 100% effectively) by themers. Originally, I just renamed the Bootstrap classes, but diverging from upstream Bootstrap became far more work than simply rewriting Moodle.

And that, in a nutshell, is why I started this Bootstrap Renderers project. I have my own internal theme that I don't want to take too far away from core, and Bas Brands has a Bootstrap based theme for general use which again isn't doing anything too crazy with renderers. One or two people can't rewrite the whole front end of Moodle alone. It's just too big a job, even if you leverage Bootsrap and related tech. But, at the end of the day, the rather archaic front-end HTML in Moodle needs to get fixed. That's why Amy Groshek and others have been pushing for a styleguide and consistent, modern markup (https://moodle.org/mod/forum/discuss.php?d=216519#p942848).

I'm hopeful that by showing what's possible with Bootstrap Renderers that people might think it's easier just to adopt the widely used, battle-tested conventions from Bootstrap for this purpose and then I wouldn't need any renderers, since all the stuff I need would be in core and getting properly QA'd. Unfortunately I think there's still a general feeling that "themes" are just frivolous decoration rather than a tricky software engineering challenge and so people often underestimate the difficulty.

Currently getting a Bootstrap based theme into Moodle 2.5 is the big priority. Your experience with Moodle and Bootstrap would be welcomed in the bug (https://tracker.moodle.org/browse/MDL-38016). My own goal here is on getting the standard Bootstrap CSS included with a Moodle theme that is QA'd by Moodle core. I think if that happens then the core and themes could evolve together and get much better, very quickly, particularly so if the community all work together on this. At the moment a crazy amount of energy is being wasted on working around things in core Moodle as if they're set in stone.
 
Average of ratings: -