This post has been written for the iMoot online conference.
History of the Bootstrap theme
How it all started
The idea of having a Moodle Bootstrap theme started at the Moodle Moot Ireland and UK in 2012. In November 2012 the first release was uploaded on the plugin database. On the Moodle Moot Ireland and UK 2013 the Bootstrap theme was discussed on the Hackfest event. Moodle HQ decided to try and build it into the core of Moodle. Currently it is in version 2.5.
Who was involved for the Moodle 2.4 plugin?
- Bas Brands (me): Freelance Developer.
- David Scotson: Developer at Glasgow university.
- Stuart Lamour: Developer at Sussex university.
- Paul Hibbitts: Early adopter
How it was integrated
The Bootstrap theme is currently one of the base themes in Moodle 2.5 and is named
bootstrapbase. It can not be selected from the Moodle theme selector. Theme
bootstrapstrap as it’s parent theme and is the default if you wish to use the Bootstrap framework.
What is Bootstrap?
Bootstrap is a framework used for building the user interfaces for web-based applications. When implementing Bootstrap a developer can choose to use elements of the Bootstrap framework to build a user interface.
The introduction on the Bootstrap website says:
By nerds, for nerds.
Base CSS provides button, tables, labels, typography, and much more
Icon sprites that are ease to use using class attributes
Modals are boxes that hover over you page when something is clicked.
Auto completion of input fields
And much more
What is a Moodle theme?
Shortly: A Moodle theme styles and positions Moodle HTML and can add custom logos images and more. Themes use layout templates, CSS and php code as its core elements. It can be extended to override Moodle HTML and add functions using theme renderers. It can contain it’s own JavasScript and images.
clean and is a child theme that builds on Bootstrap.
To create a customized
bootstrapbase based theme you simply need to copy the
clean theme and start editing it. The
clean theme contains a README.txt that explains, step by step, how to customize it.
The Moodle 2.4 Bootstrap theme
The Moodle 2.4 Bootstrap theme is available form the Moodle plugins database.
It’s main features are:
- Uses unmodified Bootstrap 2.3.1 LESS files
- Has a responsive layout
- Has a Bootstrap navigation menu that build from the Moodle custom menu
- Support IE7 and IE8 and all other new browsers
Some Sample Bootstrap based themes
It simply works.
Since the Moodle Bootstrap theme has been released I have done some projects using the Bootstrap 2.4 theme as a base theme. The standard Bootstrap styling uses round corners, shades of grey for blocks and blue links. Bootstrap does not limit you to this styling. You can create any style you like. Bootstrap simply makes sure you have a solid base to work from and will save a lot of time figuring out why your theme looks great on Firefox but horrible on IE. It simply works.
This is the standard Moodle 2.4 Bootstrap Theme.
In theme Red the navbar was used to create dropdowns that contains the elements of the standard Moodle Settings and Navigation blocks.
Theme Red allows docking and has a custom dropdown menu for mobile devices.
This is another variation on the Bootstrap theme. It shows you the number of notification messages you have received and has
svg custom icons.
This theme has been created for the Aalborg university of Denmark. It uses Bootstrap’s carousel to display the side news. News items slide every few seconds. The top menu bar uses Font Awesome for icons. Font awesome is a font containing icons that can be used to extend Bootstrap.
It utilizes the Bootstrap Grid and Navbar to create dropdowns from a Bootstrap Navbar.
About Twitter Bootstrap
And is used by Github and an incredibly large number of projects
Bootstrap improves usability by forcing developers to write clean HTML
Bootstrap is easy because you can create complicated web elements with little code
Bootstrap can be customized and does not have to look like Bootstrap
Bootstrap is open Source using the Apache license
Bootstrap has LESS which is awesome
Bootstrap allows mobile users to access your Moodle installation from their phones.
How the Moodle Bootstrap theme is setup
The Moodle Bootstrap theme contains:
For the Bootstrap theme the menu includes the language selector and the site name. You can add links to this menu using the standard Moodle custom menu items in the theme settings.
The Twitter Bootstrap HTML for a dropdown menu should look somewhat like this:
1 2 3 4 5 6 7 8 9 10 11
Adding a Twitter Bootstrap dropdown menu required some changes to the HTML that is outputted by Moodle core. When developing themes this can be done using theme renderers (file
renderers.php). The renderers file can include a PHP class that overrides some of the core Moodle rendering functions described in
The site breadcrumb contains the navigation and, if the user has the required capabilities, the turn editing on button.
Just like a regular theme the Bootstrap theme uses regions to position blocks. The big difference with standard themes is that the Bootstrap theme does not use the Matthew James Taylor ”Holy Grail” Layout. It uses the Bootstrap Grid.
The Holy Grail layout is a clever way of using divs and CSS to create equal size columns. The Holy Grail layout looks somewhat like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
The Twitter Bootstrap grid uses CSS classes to set the width and float attributes to create the Grid layout. The trick is to use the
<span> classes for the page columns. The Moodle Bootstrap theme uses HTML5
<aside> tags instead of
<div> where possible.
The basic Bootstrap theme layout looks like this:
1 2 3 4 5 6 7 8 9 10
As mentioned before the CSS for the Twitter Bootstrap theme is compiled using LESS CSS. Twitter Bootstrap comes with a set of LESS files to allow you to modify elements and only select the elements you wish to use.
Alexis Sellier, more commonly known as cloudhead, developed LESS. It is now maintained and extended by the LESS core team. LESS extends CSS with dynamic behaviour such as variables, mixins, operations and functions.
LESS runs on both the server-side (with Node.js and Rhino) and client-side (modern browsers only).
Browsers don’t interpret it themselves, however, so LESS files need to be converted into normal CSS before use.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
This is a sample of some custom Moodle code written in LESS CSS. After compiling the nested structure is translated into tradition CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
This is the compiled version of the above LESS CSS.
The main differences between traditional CSS and LESS CSS are:
- The ability to add functions,
- The ability to add variables
- The ability to nest CSS descriptors
For Moodle we have put a lot of effort in creating LESS files for Moodle. A Moodle Bootstrap theme that uses the LESS framework typically uses this structure:
Directory containing the original untouched Twitter Bootstrap LESS CSS files
Directory containing the Moodle specific LESS files.
File /less/moodle.less controls all of these files and brings it together:
File /www/octopress/source/downloads/code/bootstrapmain.css could not be found
The title of my iMoot 2013 presentation is Beyond Bootstrap. I refer to the Bootstrap Moodle Theme in this case, not the Twitter Bootstrap framework. Now that we have a Bootstrap theme what can we do with it?
There is a number of cool websites that show some examples uses and features for Bootstrap. The ones I find most exciting are the
Bootswatches are themes for Twitter Bootstrap. Bootswatches usually provide 2 files that hook into the Bootstrap LESS CSS files.
These files are /theme/bootstrap/less/bootswatch/bootswatch.less /theme/bootstrap/less/bootswatch/variables.less
bootswatch.less contains extra CSS or CSS that needs to be overridden
variables.less contain the variables used in Bootstrap. Examples of these are:
The latest Moodle Bootstrap theme for version 2.4 already contains these 2 files; all you need to do is replace them with your downloaded bootstrap.less and variables.less files. Then regenerate your CSS using the command:
recess --compile --compress Moodle.less > ../style/Moodle.css
If you want to create your own Bootswatches you can using The Twitter Bootstrap Bootswatch generator.
There are a number of websites providing services that allow you to create Bootswatches. The official Bootstrap generator can be a useful tool to use.
Examples of Moodle using Bootswatches
Based on the United Bootwatch.
Based on the Superhero Bootswatch.
Examples of a custom Bootwatch theme
This uses styling copied from the OKFocus website.
The future of the Bootstrap theme
Bootstrap is very popular and there are many web design resources that help you create awesome features quick and easy. Now we have a base theme using Bootstrap we can look at more uses of the Bootstrap framework that can be used in Moodle.
Samples of these could be:
Adding Editor Styling:
The standard Moodle HTML editor TinyMCE uses a default theme called o2k7. Using the style available on https://github.com/gtraxx/tinymce-skin-bootstrap you can add styling that fits Bootstrap better.
Course format for Moodle are plugins too. A course format can be build using Bootstrap Accordion plugin.
More information on Bootstrap and the Moodle Bootstrap theme.
Download the Moodle Bootstrap 2.4 theme The 2.5 version is in Moodle core.
Gavin Henricks review on theme Clean.