Hackfest UK 2014/Bootstrap3
Bootstrap Development
bootstrapbase and the clean theme are used in Moodle core since version 2.5. It is build on Bootstrap version 2.3.2. David Scotson and Bas Brands have been working on a new version of the Bootstrap 3 theme for Moodle. In this hackfest session we have demonstrated how to use the Bootstrap 3 theme and the new features and issues we have.
There are already quite a few organisations that have adopted Bootstrap 3 as its base theme or have created modified version. We invite everybody to share your experiences / code or bugs you might have found.
Participants
- Gerry Hall
- sam marshall
- David Scotson
- Stephen Spencer
- Richard Oelmann
- Davo Smith
- Sarah Cotton
- Mahmoud Kassaei
- stuart lamour
- Alex Walker
- Kiran Chiragowni
- Bas Brands
Topics
- What is Grunt and how to use Grunt for Bootstrap 3
- Working with Bootswatches
- How to style RTL languages
- Can we remove jQuery in Bootstrap 3?
- How to work with renderers?
- Issues with renderers
- What's the plan for getting Bootstrap 3 in core?
Outcomes
Grunt
Developers can use Grunt for advanced themes. Grunt is a JavaScript taskrunner that runs on Node.js. If you want to work with grunt you can install Node.js on your local machine. In the Bootstrap theme we have added a Gruntfile.js that contains both the documentation for installing the required libraries.
Some samples of using grunt for the Bootstrap themes are:
grunt
Running grunt on it's own initiates the Grunt watch function which waits for changes in the Less (css) files and compiles new css and flushes the theme cache as soon as it sees a change.
grunt swatch --name=darkly
This command uses the darkly bootswatch which is a theme within the Bootstrap theme.
grunt exec:decache
This is a subcommand that clears your Moodle theme cache.
You can still create a child theme that adds styles to the Bootstrap3 theme.
RTL Languages
Can we send a separate RTL css file to a user that uses a RTL language and can we do it in core? The reason to have this is because Grunt can automate creating the RTL css for us but we don't want to send it to user that will never use RTL languages. Serving the right CSS file to the user device is something we can not do from a theme. It would require a core change to achieve this. Tracker issue [https://tracker.moodle.org/browse/MDL-39094 MDL-39094] has been reported to try and have this as a core feature. Further information can be found on our Github repository.
NOTE: Just noticed this Hackfest :-), So If anyone has any RTL question, he/she can send me an email. --Nadav Kavalerchik (talk) 23:33, 17 April 2014 (WST)
JQuery and the Moodle theme
Bootstrap 3 comes with JQuery for it's interactive elements. The bootstrap 3 theme only uses it for navigation dropdowns. That bit can easily be replace with some YUI code.
Having Bootstrap 3 in Moodle core
Currently there are no plans of having Bootstrap 3 in core, Martin Dougiamas wrote a forum post on Moodle 2.7 themes that explains more. Use [https://tracker.moodle.org/browse/MDL-40177 MDL-40177] to discuss. HQ fixes issues in bootstrapbase and it would be great to get fixes in both Bootstrapbase and the Bootstrap theme.
Using Renderers
There are many renderers in Moodle that we can override in themes. There is still some hardcoded HTML which cannot be changed. When you are developing a plugin it is key to keep the logic out of the renderes.
Step by step more of the Moodle code will be cleaned up the work better with Bootstrap and renderers
