mapping BS3 forms to Moodle's HTML #117
Conversation
This was one of the trickiest bits of getting Bootstrap 2.3 to work with Moodle, and Bootstrap 3 totally changed the way this was done. So I worked on the principle that if it was better to start from scratch. So I commented out the entire forms.less file and slowly started working my way through the file from top to bottom either uncommenting bits or deleting them. The bits that are still commented out at the bottom mean I've not got around to them yet. Maybe they can be deleted, maybe they need rewritten. There's almost certainly lots of niggly bugs left because every form in Moodle is different for no reason but the basics of responsive forms seem done so I thought I'd commit this.
mapping BS3 forms to Moodle's HTML
|
I think I found a bug in Bootstrap while looking at this: Seems a bit obvious to not have been noticed by anyone else yet. Or is it just me? |
|
Great David! These types of changes really clean up Moodle's CSS. It's very nice to see how the core CSS is migrated to Less and more and more can be changed in future by setting just a few variables. I agree BS3 is much easier to work with. Especially the new grid and thanks to Joby's grunt stuff development is quicker and takes less command line interaction. The idea of extend is great, it's just irritating to see how many classes extend the clearfix. That takes up a huge amount of space in my firebug and I am sure that could be done in a far cleaner way. Yes login should be fixed. I guess the login box does not need to have a flexible width. fixed to about 300px should keep it look nice and work well on mobile. The mobile first concept of BS3 seemed a bit weird at first; but now I finally understand. It's great when using very stylish bootswatches for desktops using big background graphics and simpler versions for mobiles :) All you need to understand is the BS2 grid and then reverse it :) |
|
Yeah, I noticed the clearfix as well. I found the login stuff in core.less, I think the only issue was that it's set up with different grid breaks. We should probably split that entire core.less file into sensible sections, with maybe a login.less for the layout and either put the form stuff their as well, or in form.less |
|
My Bootstrap issue got fixed for 3.2 so that's one less thing to worry about. |
This was one of the trickiest bits of getting Bootstrap 2.3 to
work with Moodle, and Bootstrap 3 totally changed the way this was
done. So I worked on the principle that if it was better to start from
scratch. So I commented out the entire forms.less file and slowly
started working my way through the file from top to bottom either
uncommenting bits or deleting them.
The bits that are still commented out at the bottom (though above the RTL stuff) mean I've not
got around to them yet. Maybe they can be deleted, maybe they need
rewritten. E.g. I know the login page looks a bit funky at certain widths.
There's almost certainly lots of niggly bugs left because
every form in Moodle is different for no reason but the basics of
responsive forms seem done so I thought I'd commit this.
In general I'm finding BS3 a fair bit easier to work with, with less clashes and better tools for fixing problems (including extend).