Building a Moodle theme with bootstrap
-
Upload
bas-brands -
Category
Technology
-
view
126 -
download
1
description
Transcript of Building a Moodle theme with bootstrap
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