UILDING WITH BOOTSTRAPBAS BRANDS @BASBRANDS

MOODLE DEVELOPER

2013

ABOUT ME

Bas Brands

The Netherlands

Moodle Developer since 2009.

INTRODUCTION

This presentation is on the Moodle Bootstrap theme based on the Twitter Bootstrap Framework.

It will show you how the Moodle Bootstrap theme was developed how it works and is evolving.

The future of Bootstrap for Moodle is exciting and will help developers create user interfaces without needing designer skills.

TERMS USEDTerm Explanation

Twitter Bootstrap The Bootstrap framework available on bootstrap.github.com

Bootstrap Same as Twitter Bootstrap

The Bootstrap theme

The theme created for Moodle base on Bootstrap

Theme Clean The Moodle 2.5 theme that builds on The Bootstrap theme

LESS CSS Object Oriented CSS that needs to be compiled before usage

node.js Server side Javascript used as an application framework

Recess A tool that builds on NODE.js to generate CSS from less files

HISTORY OF THE BOOTSTRAP THEME

The Idea was born during the UK / Ireland Moot

Developers involved in the Moodle 2.4 theme

Bas Brands: Freelance Developer.

David Scotson: Developer at Glasgow university.

Stuart Lamour: Developer at Sussex university.

Paul Hibbitts: Early adopter

ADOPTED INTO MOODLE CORE

The bootstrap theme is available in Moodle version 2.5.

It is called bootstrapbase and can not be selected when you configure your Moodle theme.

Theme “Clean” builds on Bootstrapbase and is available in the theme selector.

If you wish to modify bootstrap you should work from theme “Clean”

WHAT IS BOOTSTRAP?

http://www.webresourcesdepot.com/free-jquery-ui-themes-collection/

Bootstrap is a framework used for building the user interfaces for web based applications.

The introduction on the bootstrap website says:

By nerds, for nerds.

ABOUT BOOTSTRAP

Created by Jacob Thornton and Mark Otto

BOOTSTRAP PROVIDES

WHAT IS A MOODLE THEME?

Moodle themes style and position HTML

They contain. PHP, JavaScript, CSS, HTML

Moodle themes are powerful and complex

THE MOODLE BOOTSTRAP THEME

THE MOODLE BOOTSTRAP THEME

THEMES BUILD ON MOODLE BOOTSTRAP

Theme Red

THEMES BUILD ON MOODLE BOOTSTRAP

THEMES BUILD ON MOODLE BOOTSTRAP

Theme Growdly.com

THEMES BUILD ON MOODLE BOOTSTRAP

Theme Aalborg University

THEMES BUILD ON MOODLE BOOTSTRAP

Theme Aalborg University Denmark

SAMPLE BOOTSTRAP CODE

LESS

LESS FOR MOODLE

COMPILED LESS CODE

LESS STRUCTURE

LESS STRUCTURE

BEYOND BOOTSTRAP: BOOTSWATCHES

Bootswatches are themes for Twitter Bootstrap

They usually contain 2 files

Bootswatch.less

Variables.less

http://blog.alfonsorv.com/bootswatch-free-themes-for-twitter-bootstrap/

SAMPLE BOOTSWATCH THEME

SAMPLE BOOTSWATCH THEME

FUTURE DEVELOPMENT: EDITOR STYLING

FUTURE DEVELOPMENTACCORDION TOPICS

FUTURE DEVELOPMENT COURSE PROGRESS

FUTURE DEVELOPMENT COURSE GALLERIES

FUTURE DEVELOPMENTTYPE AHEAD COURSE SEARCH

https://github.com/hitteshahuja/Search-Courses---Autocomplete-

FUTURE DEVELOPMENTCLIPPY!

MORE FUTURE PLANS

Grid Course Format

Embedding HTML5 Video

Carousel for images

Course overview Grid with Course images

FURTHER READING

FURTHER READING

Blogpost on this presentation

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.

END OF PRESENTATION

Thanks to:

David Scotson,

Stuart Lamour,

Mary Evans,

Paul Hibbitts,

Martin Dougiams

The iMoot organizers