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

1. UILDING
WITH
BOOTSTRAP
BAS BRANDS @BASBRANDS
MOODLE DEVELOPER
2013

2. ABOUT ME
Bas Brands
The Netherlands
Moodle Developer since 2009.

3. 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.

4. TERMS USED
Term 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

5. 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

6. 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”

7. 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.

8. ABOUT BOOTSTRAP
Created by Jacob Thornton and Mark Otto

9. BOOTSTRAP
PROVIDES

10. WHAT IS A MOODLE
THEME?
Moodle themes style and position HTML
They contain. PHP, JavaScript, CSS, HTML
Moodle themes are powerful and complex

11. THE MOODLE
BOOTSTRAP THEME

12. THE MOODLE
BOOTSTRAP THEME

13. THEMES BUILD ON
MOODLE BOOTSTRAP
Theme Red

14. THEMES BUILD ON
MOODLE BOOTSTRAP

15. THEMES BUILD ON
MOODLE BOOTSTRAP
Theme Growdly.com

16. THEMES BUILD ON
MOODLE BOOTSTRAP
Theme Aalborg University

17. THEMES BUILD ON
MOODLE BOOTSTRAP
Theme Aalborg University Denmark

18. SAMPLE BOOTSTRAP
CODE

19. LESS

20. LESS FOR MOODLE

21. COMPILED LESS CODE

22. LESS STRUCTURE

23. LESS STRUCTURE

24. 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/

25. SAMPLE
BOOTSWATCH THEME

26. SAMPLE
BOOTSWATCH THEME

27. FUTURE DEVELOPMENT:
EDITOR STYLING

28. FUTURE DEVELOPMENT
ACCORDION TOPICS

29. FUTURE DEVELOPMENT
COURSE PROGRESS

30. FUTURE DEVELOPMENT
COURSE GALLERIES

31. FUTURE DEVELOPMENT
TYPE AHEAD COURSE
SEARCH
https://github.com/hitteshahuja/Search-Courses---Autocomplete-

32. FUTURE DEVELOPMENT
CLIPPY!

33. MORE FUTURE PLANS
Grid Course Format
Embedding HTML5 Video
Carousel for images
Course overview Grid with Course images

34. FURTHER READING

35. 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.

36. END OF
PRESENTATION
Thanks to:
David Scotson,
Stuart Lamour,
Mary Evans,
Paul Hibbitts,
Martin Dougiams
The iMoot organizers