Building a Moodle theme with bootstrap
Download as PPTX, PDF11 likes17,291 views
This document summarizes the history and development of the Bootstrap theme for Moodle. It discusses how the theme was originally developed during a Moodle conference by several developers. The Bootstrap theme was later adopted into the Moodle core as the "bootstrapbase" theme in version 2.5. The theme allows other themes like "Clean" to be built upon it. It provides templates and styles based on the Twitter Bootstrap framework to help developers create interfaces without design skills. Future development of the Bootstrap theme for Moodle includes improved styling for editors, accordion layouts, course progress indicators, and search functionality.
Building a Moodle theme with bootstrap
- 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
- 10. WHAT IS A MOODLE THEME? Moodle themes style and position HTML They contain. PHP, JavaScript, CSS, HTML Moodle themes are powerful and complex
- 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
- 19. LESS
- 20. LESS FOR MOODLE
- 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/
- 31. FUTURE DEVELOPMENT TYPE AHEAD COURSE SEARCH https://github.com/hitteshahuja/Search-Courses---Autocomplete-
- 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