Theme Bootstrap 3 for Moodle
August 2013 version 3 of the Twitter Bootstrap CSS framework was released. This post explains how this framework was used to create a new Moodle theme.
A little history: If you are using Moodle version 2.5 or newer you can select a theme called Clean from the Moodle theme selector. This theme uses a base theme called bootstrapbase which makes the theme called Clean a child theme. The bootstrapbase theme is build using version 2.x of the Twitter Bootstrap framework. Last year Moodle Head Quarters descided to adopt the bootstrapbase theme and the Clean theme into it’s core distribution. It has become a popular theme especially for usage on Mobile devices.
The bootstrapbase theme was created using the bootstrap theme which I created together with David Scotson. This new version of the theme is a theme on it’s own. Perhaps at some time it will be used to upgrade the Moodle core theme. for now it is there for you to use and enjoy.
So what is Twitter Bootstrap?
Twitter 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. With version 3 developers can now create a better Grid, faster load times and most importantly have a better Mobile experience.
Coding for fun
This Christmas brake I simply could not sit down and enjoy Christmas carols and shopping. So instead I took some time creating a new version of the bootstrap moodle theme based on Twitter Bootstrap version 3. The new version is still a work in progress but it is already working quite well. It works for Moodle versions 2.5 and 2.6, you just need to download the right branch.
Get it now!
Click the read more link to learn more about the new features.
New features in Twitter Bootstrap 3
Twitter Bootstrap version 3 offers loads of new features. Most of which are only interesting if you are a front-end developer. Checkout this blog to learn more about them.
New features in the bootstrap theme
First of all it the Grid has changed, it now support large and small screens and only collapses (repositions blocks) on the really small devices.
The login page has change to look more modern and use the Grid
Messages, language selection and user profile info are all pushed into the Moodle navbar. To make your Moodle just a little more Facebook like.
The forms now use the Bootstrap grid
Testing, lots of testing. So any help is more than welcome.
Rewrite CSS. There is still a lot of CSS that can be rewritten to use Twitter bootstrap awesomeness. If you are into writing LESS css.. Please fork my on github