Exploring the Clean theme

The first impressions of the Clean theme are excellent. It's not only responsive; by using the styles inherited from the open source Twitter Bootstrap project (http://twitter.github.com/bootstrap) the theme has a modern and fresh design that blows a breath of fresh air into the Moodle interface.

Let's take a more detailed look around the theme.

On the course pages, the breadcrumb trail looks a lot more elegant, in its own colored block, neatly tucked under the main heading.

The side blocks all have a standard light gray background color with a dark gray border, and the block headings are bold and capitalized. There is also improved spacing between the menu items.

The main editing buttons are now standard colors throughout the site.

However, these are purely cosmetic changes. To see the really powerful use of this important theme, you need to resize your browser. First, make sure that your browser is not maximized, and then grab the edge of the browser with your mouse and resize it to make it narrower. Then watch what happens to the Moodle page as the browser window gets narrower and narrower.

There is a point at which the whole screen reverts to a single-column layout, and this is at about 600 pixels, which is about the size of a small tablet.

If you go right down to 300 pixels or so, to emulate a smart phone, you see something like the example shown in following screenshot, in Moodle 2.5:

Several things have happened to the screen:

It's a superb theme, and its beauty is in its simplicity. The intention is that it provides a base on which you can build, so if you have development skills you should be thinking about changing the color scheme at the very least, to match that of your organization's branding.