Themes

The Tiny (Bootstrap) Project: A work in progress

 
 
It's only an avatar...
The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Here's a link to my GITHUB where you will find 'Tiny', a prototype Moodle theme, that I built using Twitter Bootstrap, which, for building a website, is totally awesome. Building a theme for Moodle is hard work, the Bootstrap however makes life a bit easier as all the spade work is done. All you have to do is put all the various componants together and try and blend it in to fit into Moodle.

All I can say is that it's a big, big, big, learning curve...but fun.

Just a note of caution, don't collapse any of your blocks, as they will just vanish into oblivion! If you do lose any checkout another theme and you'll find them again.

Cheers

Mary

 
Average of ratings:Useful (2)
Picture of Stuart Lamour
Re: The Tiny (Bootstrap) Project: A work in progress
Group Particularly helpful Moodlers

David has done some considerable work on this - 

http://moodle.org/mod/forum/discuss.php?d=212222 

http://docs.moodle.org/23/en/bootstrap-Theme

as has Bass -

http://theming.sonsbeekmedia.nl/

http://moodle.org/plugins/view.php?plugin=theme_bootstrap

I'm interested in what the moodle base theme can take and learn from bootstrap as its not as easy as it should be to impliment either bootstrap or http://foundation.zurb.com/

Really happy we are finally getting some proper responsive themes into moodle which should also help us optimise the base code for mobile instead of burying heads in sand and relying on a jquery mobile ui.

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Thanks Stuart, I am aware of all the work going on in this area, it's just that I have not had time to join in with the colaboration, so just made this as a one off theme to see how it all works.

I don't think it is just a matter of changing base theme, because to impliment the 'Twitter Bootstrap' idea would mean changing the way Moodle core is styled, and that is nothing to do with themes.  You need to start where each object is coded, strip out the old and add the new. Which is easier said than done.

 
Average of ratings: -
Picture of David Scotson
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Hi Mary,

The stuff I'm working on now tries to do exactly that with renderers. It's an open question as to how far it will take us, but it's looking positive so far.

You could try integrating some of my renderers into your theme if you'd like. It should make the HTML a bit more like what Bootstrap is expecting and I'd appreciate any testing or improvements you could offer.

I've recently seperated out the stuff I think is ready for wider user/testing which is now the master branch, and the Work-In-Progress stuff which you might be interested in too is on the dev branch.

I've got instructions for testing using my developer theme and for copying the renderers into any other theme that includes a Bootstrap.css file in this file:

https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/testing.txt.

It's currently a bit awkward to integrate the changes just for testing purposes, I'm hoping I can streamline that process somehow but for people like yourself that have theme development and renderer experience it's merely a minor roadbump. (In fact, I think the best thing may be to get people to use these renderers in their themes and then get people to test those themes, and send the feedback upstream, but we'll see).

(Note that if you use my theme to test, it is currently stuck in random mode unless you edit the code, as I've not got around to creating a settings page yet)

The pagination stuff is probably a highlight at the moment, as it's mostly self contained and so doesn't break lots of other stuff, the rest is mostly small steps on the road to somewhere.
 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I have just updated this theme, and fairly confident it's working on all areas. But there's bound to be room for improvment.

If you do take this theme for a Test Drive can you let me know the outcome?

CLICK HERE to get the code.

Thanks

Mary

 
Average of ratings: -
Picture of David Scotson
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
You might want to put something in your master branch, even if it's just a readme file saying that people should look in other branches. It confused me twice, once a few days ago when I went to github to see what you'd done and found (what I thought was) an empty repository. And then again just there when I did a git clone and ended up with (what looked like) an empty directory.

Do you mind if I steal the user dropdown idea? Having those links handy is a good idea, though I might try and combine it with the currently logged in and logout links that are usually in the top right.

One thing I did notice is that if you add a label to a course, it grabs the color of the default Bootstrap label (usually gray). I see you've worked around the same issue in the view profile. I'm trying to keep track off all such Moodle/Bootstrap collisions here:

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

So if you find any more then let me know. Actually just noticed I forgot one .container is used is the quiz to add questions and Bootstrap makes it too wide to be usable.



 
Average of ratings: -
Picture of David Scotson
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
FYI, I've fixed the blocks disappearing if you hide them (via the eye) or collapse them (via the +) in the latest version of undo.css
 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

OK thanks

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

The quiz container, I dare say you can fix that using the body class for quiz whatever that happens to do when in the page where the distortion occurs.

Thanks for the tip about the undo,css I have added tiny_undo.css to my theme so I can keep trak and then I'll pass these on to you.

Moodle button css is a hoot, or rather the myriad of css classes to style the critters is hilarious. This is one list I have compiled todate...

.redirectmessage .continuebutton,
#fgroup_id_buttonar input#id_submitbutton,
#fgroup_id_buttonar input#id_cancel,
fieldset legend.ftoggler,
.buttons .singlebutton input,
.navbutton .singlebutton input,
.form-buttons input,
.guestform input,
.loginform .form-input input#loginbtn,
.continuebutton form input

The Bootstrap .btu and ,btu-small ,btu-primary etc, is really so very simple this is one of the areas that should be implemented first.  The forms too need looking at. After that the rest should fall into place, bit by bit, or fall off the radar! LOL

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi David,

It's a bit late in the day...or early in the morning whichever way you look at it...anyway I'm just letting you know I have simplified the custom menu from the way Bas has it. I guess you are all using the same renderers.php?

Rather than add all that cumbersome HTML writer divs and whatnots I have kept my original menu with the icons and lang menu as well as login/logout. The custom menu is tucked in after this. Doing it this way I can keep the three bar collapse button in the top navbar. This works fantastically well. In fact I'm really please how well it's all working out.

I've also added the major part of Bas' renderer to what I had previously. The icons look much better.

There is still a long way to go yet with the D/down in sub-menus as they are not working. Not sure why not. However, one good thing I discovered is that the menu can be accessed from the keyboard and works!

The more you work with Bootstrap the more you become addicted and the more you learn about Moodle.

I think it's time we had a Bootstrap theme in Moodle. Might be too late for 2.4 but almost certainly in 2.5. smile

Cheers

Mary

 
Average of ratings: -
Picture of José Augusto Moraes
Re: The Tiny (Bootstrap) Project: A work in progress
 

My tip to speed the job is to use the files of Bootstrap CDN. Here is the URL http://www.bootstrapcdn.com. I used in my theme - http://www.jtemas.com.br/demos/moodle. I saved a lot of time in the execution of my work with Twitter Bootstrap.

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I have just updated this and so now is pretty much stable.

CLICK HERE to download the latest version of Tiny Bootstrap.

Cheers

Mary

 
Average of ratings: -
Picture of Danny Wahl
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Particularly helpful Moodlers

Mary have you run into an issue with the fluid-grids where the block columns get too narrow for the block content?

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I have but fixed it in my latest version by adding @media in undo.css

Have you tried using Tiny (Bootstrap) theme?

I found an error last night and fixed it locally but have only just uploaded to my github this morning.

Look at tiny-layout.css and undo.css for more ideas.

Cheers

Mary

 
Average of ratings: -
Picture of Danny Wahl
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Particularly helpful Moodlers

thanks, I'm going to pull it right now.  (I seriously love git!)

 
Average of ratings: -
Me
Re: The Tiny (Bootstrap) Project: A work in progress
Group Moodle Course Creator Certificate holders

Hey Mary,

Just installed this for the first time (Moodle 2.3), and first thing I notice is that I can't seem to use submenu items in the custom menu?

I put the custom menu in (just copying and pasting the example stuff) from the Tiny settings page.

But when I click to drop down the Moodle Community menu, there is a menu item that has a sub menu (Moodle Development) and no matter what I do (hover, click), I cannot get into the Moodle Development sub menu.

submenu

Also, the "Add an activity or resource" link is not an active link in any topic box (front page or course).

And, "Edit my profile" and "My private files" in the menu don't go anywhere.

Edit my profile

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Miriam,

Thanks for letting me know about those links in the username dropdown. I forgot to add them. I've updated my local version will upload these changes to my GITHUB after I have answered the rest of your questions here.

I did comment about the sub-menus earlier in this discussion thread.

https://moodle.org/mod/forum/discuss.php?d=212661&parent=933090

The renderer needs tweaking...that's all! smile

I'm guessing but I bet the Add activity/resource is conflicting with something..probaly some js code.

I'll take a look.

Thanks again

Mary

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Miriam,

Just letting you know I have fixed the Add Resourses/Activity link. I've just pushed the changes to my Github.

Thanks for telling me it was not working! smile

Cheers

Mary

 
Average of ratings: -
Me
Re: The Tiny (Bootstrap) Project: A work in progress
Group Moodle Course Creator Certificate holders

Hey Mary,

I have to say that on first glance, I love this theme. I will update it later and take a better look. I did see the discussion earlier about the sub menus, but later in the thread you'd said that the theme was basically stable, so I thought you'd managed to fix that. smile I love the idea of this whole project, just am not in the headspace right now to contribute to it myself except giving the occasional bug report. ;)

Have fun!

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Bug reports are usually a result of testing...so thanks for that!

If you can view it on a mobile even better.

Cheers

Mary

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Here's a link to the updated tiny/layout/default.php

 
Average of ratings: -
Just wondering . . .
Re: The Tiny (Bootstrap) Project: A work in progress
Group Particularly helpful Moodlers

Hey everybody, I know this is a big ask, but is there a place we can see this in operation?  Sorry if I missed a link in the thread.

-Derek

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I've just uploaded Tiny Bootstrap theme to my Moodle 2.0.8 site as this is the only version I can run at the moment.  I've had to adjust the theme slightly, but it works. Here's the link...

http://moodlestudio.co.uk/moodle/?theme=tiny

To test the Responsive design of the theme, just float your browser window. This then allows you to push/drag the right side of the window so you an see how it resizes to 240px wide which is standard width for a mobile screen.

Cheers

Mary

 
Average of ratings: -
Me
Re: The Tiny (Bootstrap) Project: A work in progress
Group Moodle Course Creator Certificate holders

Ok, now I'm even more in love with this theme. It changes when the window gets too small from three-column to one-column. How clever! Will test this on a mobile device. I have an iPhone and Android phone, but don't have a tablet.

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Miriam,

If you saw the change in the layout from three to one then you will have seen the black three-bar icon in the top menu-bar. If you click that then the menu opens up, a bit like Aardvark-Postit does, to reveal the menu in block format. And all of this menu can be accessed using the Tab key on your keyboard for accessibility. It works with the mouse too, but just keeping an eye on those accessibility features if amaising.

All this is done with just some very simple, cleverly workedout css classes and some very neat JQuery functions. smile

To put it in a nutshell, Twitter Bootstrap is a set of pick-n-mix web-design tools.

I'll look forward to your mobile device testing.

Cheers

Mary

 
Average of ratings: -
Me
Re: The Tiny (Bootstrap) Project: A work in progress
Group Moodle Course Creator Certificate holders

I tried going to your site on my mobile device and it just endlessly loaded earlier. Same thing again now. = iPhone

Just tried on my Android and it went straight there, no problems. Hmm.
 Interesting.

Also, the menu along the top works on my Android, but the sub-menus don't. Have not looked at anything else just yet. Just got home from a Halloween dance. smile

Will test this out tomorrow, and see if I can get to the site on my iPhone from my work network or 3G.

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi Miriam,

I just tested this on an iPad and it works great. It took ages trying to load so stopped it and tried again and got it first time. It displays a 3 column page in "landscape" view and a two column responsive layout is "portrait" view. The menus in both layouts work as expected.

I just need to know how it looks on a mobile. I need to know if it shrinks to a 1 column responsive layout or if it stays as 3 columns?

Thanks

Mary

 
Average of ratings: -
Me
Re: The Tiny (Bootstrap) Project: A work in progress
Group Moodle Course Creator Certificate holders

On my Android it was a single column view. I still can't get it to load on my iPhone.

Android:

Android

iPhone:

iPhone screenshot

Edit: Success on the iPhone!

iphone success

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Great stuff thanks Miriam!

Cheers

 
Average of ratings: -
Picture of David Scotson
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
Hi Mary,

how are you switching between 2 columns and 3 columns depending on width? I've got it working going from 3 to 1 but I've been wanting to combine the block columns as space gets tighter. I think Danny Wahl also has something like this working?

Also, if you're testing responsive designs Firefox has a very neat Responsive Design Mode that lets you switch easily between various standard sizes/rotations e.g. landscape iPhone or portrait iPad or standard netbook. There's an intro video here, the responsive stuff starts about 1:20 but the other tools he talks about are very handy too.

 
Average of ratings: -
It's only an avatar...
Re: The Tiny (Bootstrap) Project: A work in progress
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi,

I use...

@media (min-width: 240px) and (max-width: 768px) {
    .side-pre-only .container-fluid .tiny-row-fluid .span3.right,
    .side-post-only .container-fluid .tiny-row-fluid .span3.left,
    .content-only .container-fluid .tiny-row-fluid .span3 {
        width: 0!important;
    }
    .side-pre-only .container-fluid .tiny-row-fluid .span3.left,
    .side-post-only .container-fluid .tiny-row-fluid .span3.right,
    .side-pre-only .container-fluid .tiny-row-fluid .span6,
    .side-post-only .container-fluid .tiny-row-fluid .span6,
    .content-only .container-fluid .tiny-row-fluid .span6 {
        width: 100%;
        *width: 99.94680851063829%;
        margin: 0!important;
    }

}

It works pretty well on an iPad and iPod which I tested earlier this week.

As for testing Responsive Design generally, I have an HTML page that sits on my Localhost WAMP server and it shows me all the different views for common Mobile/Tablet/PC device layouts with one mouse click.

I got it from...

https://github.com/mattkersley/Responsive-Design-Testing

Cheers

Mary

 
Average of ratings: -
Picture of José Augusto Moraes
Re: The Tiny (Bootstrap) Project: A work in progress
 

Hi Mary,

Congratulations for your job. I share my experience with Moodle and Twiiter Bootstrap. A demo of my first Moodle theme is here - http://www.jtemas.com.br/demos/moodle.

I learned a lot from you. Thanks!


 
Average of ratings: -