Bas Brands

Introduction

Recently the Twitter Bootstrap Framework has been added to Moodle version 2.5. Adding Twitter Bootstrap to Moodle can change the way Moodle developers work and develop for Moodle. Over the last year HTML5, JavaScript and CSS frameworks and Bootstrap have gained a lot of popularity amongst web designers and developers. The main reason why Bootstrap has gained its popularity is because it is easy to use and allows non designers to create high quality websites.

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 clean uses bootstrapstrap as it’s parent theme and is the default if you wish to use the Bootstrap framework.

It contains the LESS CSS, JavaScript and renderers needed to get Bootstrap to work. After the Ireland and UK Moodle moot 2013 Hackfest Martin Dougiamas decided to try and have a core version of the Bootstrap theme. After many tests, bugfixes and discussing features that should be included we finally have a Moodle 2.5 version.

The integration process has been exciting and a bit overwhelming. Some days I would get more than 100 notifications on issues reported in the tracker. The most complicated problems were related to Moodle’s core JavaScript and the Bootstrap layouts.

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.

Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Bootstrap provides:

Base CSS provides button, tables, labels, typography, and much more

Icon sprites that are ease to use using class attributes

Dropdown menus

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.

Moodle themes have become increasingly complex. Developing your own theme requires knowledge of Moodle’s HTML, page types, JavaScript, PHP and HTML. In Moodle 2.5 there are 2 new themes. One is called bootstrapbase and provides the Bootstrap CSS, JavaScript and renderers. The other is called 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 Bootstrap JavaScript
• 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

Bootstrap was build by Jacob Thornton @fat and Mark Otto @mdo

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:

Custom menu

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

<ul class="nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        LINKNAME
        <b class="caret"></b>
        </a>
            <ul class="dropdown-menu">
            DROPDOWN MENU CONTENT
            </ul>
    </li>
</ul>

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 /lib/outputrenderers.php.

Breadcrumb

The site breadcrumb contains the navigation and, if the user has the required capabilities, the turn editing on button.

Content layout

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

<div id="page-content-wrapper" class="wrapper clearfix">
    <div id="page-content">
        <div id="region-main-box">
            <div id="region-post-box">
                <div id="region-main-wrap">
                    <div id="region-main">
                        <div class="region-content phoenixmain">
                            MAIN CONTENT
                        </div>
                    </div>
                </div>
                <div id="region-post" class="block-region">
                    <div class="region-content">
                        BLOCKS RIGHT
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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 <section> and <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

<div id="page">
    <div class="row-fluid" id="page-content">
        <section class="span9" id="region-main">
            MAIN CONTENT
        </section>
       <aside class="span3 block-region region-content" id="region-post">
            BLOCKS RIGHT
       </aside>
    </div>
</div>

LESS CSS

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.

For more information on installing and using LESS read Moodle docs page on LESS and LESS home

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

.categorybox {
    .categorylist {
        margin-bottom: 30px;
    }
    .category {
        width: 100%;
        margin-bottom: 5px;
        .image {
            float: left;
        }
    }

    .course {
        .name {
            display: inline-block;
            height: 30px;
        }
        .info {
            display: inline-block;
            float: left;
            margin-right: 5px;
            padding-left: 1px;
        }
    }
}

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

.categorybox .categorylist {
  margin-bottom: 30px;
}
.categorybox .category {
  width: 100%;
  margin-bottom: 5px;
}
.categorybox .category .image {
  float: left;
}
.categorybox .course .name {
  display: inline-block;
  height: 30px;
}
.categorybox .course .info {
  display: inline-block;
  float: left;
  margin-right: 5px;
  padding-left: 1px;
}

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 /var/www/octopress/source/downloads/code/bootstrapmain.css could not be found

JavaScript

The Twitter Bootstrap framework uses jQuery as its default JavaScript engine. A standard Bootstrap based website will include jquery.min.js and bootstrap.min.js. Moodle is based on the YUI framework and is not likely to change frameworks. The default policy is to only accept new functions if they support YUI. Luckily Jay Shirley has written a port of the Twitter Bootstrap JavaScript libraries of YUI. Recently Jay transferred ownership of his Bootstrap YUI port to Andrew Nichols, a very active and bright Moodle developer.

Beyond Bootstrap

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

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

The bootswatch.less contains extra CSS or CSS that needs to be overridden

The variables.less contain the variables used in Bootstrap. Examples of these are:

@baseFontSize, @navbarCollapseWidth and @basefontfamily

Bootswatches can be found on bootswatch.com (free) and on wrapbootstrap.com (cheap)

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.

Preview the Bootstrap theme

Download the Moodle Bootstrap 2.4 theme The 2.5 version is in Moodle core.

Bootsnipp.com http://bootsnipp.com/resources

Bootstrap Theme on Moodle docs

Gavin Henricks review on theme Clean.