Twitter Bootstrap 3.0.2 Moodle theme

Twitter Bootstrap 3.0.2 Moodle theme

by Bas Brands -
Number of replies: 3
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers Picture of Plugins guardians Picture of Testers

The bootstrap base theme is build on Twitter Bootstrap 2.3.0. A few months ago Twitter Bootstrap 3 was released offering some new and exciting features.

The most exciting feature is the 4 grid system. It is still the Bootstrap grid we were used to but with 4 different levels of responsiveness. The .spanx classes are replaced with .col-xs- (extra small) .col-sm-(small) .col-md- (medium) .col-lg- (large). Other elements like the carrousel, modals and collapsible items have been simplified. And most of the variables have been renamed.

Moving from Bootstrap 2 to 3 is no simple matter. Most of the less variable names have been replaced and some of the mixins have been removed / changed.However, I have made a start at migrating the bootstrapbase theme to Twitter Bootstrap 3 and after doing many find - replaces and rewrites of the Moodle less files I kind of got it working. I will release it as soon as the main bugs are solved (rtl layouts / icon fixes and more need to be worked on). My first attempt can be previewed here: http://theming.sonsbeekmedia.nl

This might be interesting for the bootstrapbase theme as well. There are a few pro's and cons of course.Pro: faster, cleaner, use grid on mobile, the way forward
Con: no YUI, many rewrites needed in moodle's less files

I am hoping others will want to jump in and help on this new project or help by adding your comments and ideas.

Screenshot of bootstrap 3 :

 

Average of ratings:Useful (2)
In reply to Bas Brands

Re: Twitter Bootstrap 3.0.2 Moodle theme

by Julian Ridden -

Thanks for the update Bas. Really looking forward to seeing Bootstrap 3 adopted with the many new features it provides.

I will be extremely keen to migrate the Essential theme across to the new framework as soon as you say it is stable enough to do so.

Regards

Julian

Average of ratings: -
In reply to Bas Brands

Re: Twitter Bootstrap 3.0.2 Moodle theme

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Bas,

Awesome!

Are you planning to work with David et al on MDL-40177 to get it into core?

Cheers,

Gareth

Average of ratings: -
In reply to Bas Brands

Re: Twitter Bootstrap 3.0.2 Moodle theme

by David Scotson -
I'd started on this a while ago but got sidetracked by other stuff at work:

https://github.com/ds125v/moodle/compare/bootstrap3

I didn't really get much past the find'n'replace stage, but it was mostly hanging together even with just those mechanical changes. I found it noticeably "snappier" and the theme measurably smaller.

For the rewrites in .less files, I found that you could remarkably simplify things if you went with a max of 2 columns all the time. I don't know if everyone's ready for that step, but I think there's many benefits so I think we're going to investigate it for our next update.

I think the only thing that made me sigh a bit was the thought of having to re-do the work to make the forms look Bootstrappy again, though the fact that Bootstrap moved to using the grid for forms, and the more flexible grids in v3 made some of this much easier (thinking in particular about the backup workflow, which is all accessible to rewrite the HTML to suit Bootstrap3 via renderers).

Our update will be to Moodle 2.6, but I'm hoping to submit some renderers I develop for it to 2.7 (and/or 3rd party themes) to get as many people working on the same stuff as possible. Maybe MoodleHQ will decide to upgrade to Bootstrap 3 for 2.7?

Average of ratings: -