0
UILDINGWITHBOOTSTRAPBAS BRANDS @BASBRANDSMOODLE DEVELOPER2013
ABOUT MEBas BrandsThe NetherlandsMoodle Developer since 2009.
INTRODUCTIONThis presentation is on the Moodle Bootstrap theme basedon the Twitter Bootstrap Framework.It will show you ho...
TERMS USEDTerm ExplanationTwitter Bootstrap The Bootstrap framework available onbootstrap.github.comBootstrap Same as Twit...
HISTORY OF THEBOOTSTRAP THEMEThe Idea was born during the UK / Ireland MootDevelopers involved in the Moodle 2.4 themeBas ...
ADOPTED INTOMOODLE COREThe bootstrap theme is available in Moodle version 2.5.It is called bootstrapbase and can not be se...
WHAT IS BOOTSTRAP?http://www.webresourcesdepot.com/free-jquery-ui-themes-collection/Bootstrap is a framework used for buil...
ABOUT BOOTSTRAPCreated by Jacob Thornton and Mark Otto
BOOTSTRAPPROVIDES
WHAT IS A MOODLETHEME?Moodle themes style and position HTMLThey contain. PHP, JavaScript, CSS, HTMLMoodle themes are power...
THE MOODLEBOOTSTRAP THEME
THE MOODLEBOOTSTRAP THEME
THEMES BUILD ONMOODLE BOOTSTRAPTheme Red
THEMES BUILD ONMOODLE BOOTSTRAP
THEMES BUILD ONMOODLE BOOTSTRAPTheme Growdly.com
THEMES BUILD ONMOODLE BOOTSTRAPTheme Aalborg University
THEMES BUILD ONMOODLE BOOTSTRAPTheme Aalborg University Denmark
SAMPLE BOOTSTRAPCODE
LESS
LESS FOR MOODLE
COMPILED LESS CODE
LESS STRUCTURE
LESS STRUCTURE
BEYOND BOOTSTRAP:BOOTSWATCHESBootswatches are themes for Twitter BootstrapThey usually contain 2 filesBootswatch.lessVaria...
SAMPLEBOOTSWATCH THEME
SAMPLEBOOTSWATCH THEME
FUTURE DEVELOPMENT:EDITOR STYLING
FUTURE DEVELOPMENTACCORDION TOPICS
FUTURE DEVELOPMENTCOURSE PROGRESS
FUTURE DEVELOPMENTCOURSE GALLERIES
FUTURE DEVELOPMENTTYPE AHEAD COURSESEARCHhttps://github.com/hitteshahuja/Search-Courses---Autocomplete-
FUTURE DEVELOPMENTCLIPPY!
MORE FUTURE PLANSGrid Course FormatEmbedding HTML5 VideoCarousel for imagesCourse overview Grid with Course images
FURTHER READING
FURTHER READINGBlogpost on this presentationPreview the Bootstrap themeDownload the Moodle Bootstrap 2.4 theme The 2.5 ver...
END OFPRESENTATIONThanks to:David Scotson,Stuart Lamour,Mary Evans,Paul Hibbitts,Martin DougiamsThe iMoot organizers
Upcoming SlideShare
Loading in...5
×

Building a Moodle theme with bootstrap

11,238

Published on

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

Published in: Technology, Design
3 Comments
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,238
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
211
Comments
3
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "Building a Moodle theme with bootstrap"

  1. 1. UILDINGWITHBOOTSTRAPBAS BRANDS @BASBRANDSMOODLE DEVELOPER2013
  2. 2. ABOUT MEBas BrandsThe NetherlandsMoodle Developer since 2009.
  3. 3. INTRODUCTIONThis presentation is on the Moodle Bootstrap theme basedon the Twitter Bootstrap Framework.It will show you how the Moodle Bootstrap theme wasdeveloped how it works and is evolving.The future of Bootstrap for Moodle is exciting and will helpdevelopers create user interfaces without needing designerskills.
  4. 4. TERMS USEDTerm ExplanationTwitter Bootstrap The Bootstrap framework available onbootstrap.github.comBootstrap Same as Twitter BootstrapThe BootstrapthemeThe theme created for Moodle base on BootstrapTheme Clean The Moodle 2.5 theme that builds on The BootstrapthemeLESS CSS Object Oriented CSS that needs to be compiledbefore usagenode.js Server side Javascript used as an applicationframeworkRecess A tool that builds on NODE.js to generate CSS fromless files
  5. 5. HISTORY OF THEBOOTSTRAP THEMEThe Idea was born during the UK / Ireland MootDevelopers involved in the Moodle 2.4 themeBas Brands: Freelance Developer.David Scotson: Developer at Glasgow university.Stuart Lamour: Developer at Sussex university.Paul Hibbitts: Early adopter
  6. 6. ADOPTED INTOMOODLE COREThe bootstrap theme is available in Moodle version 2.5.It is called bootstrapbase and can not be selected when youconfigure your Moodle theme.Theme “Clean” builds on Bootstrapbase and is available inthe theme selector.If you wish to modify bootstrap you should work from theme“Clean”
  7. 7. WHAT IS BOOTSTRAP?http://www.webresourcesdepot.com/free-jquery-ui-themes-collection/Bootstrap is a framework used for building the userinterfaces for web based applications.The introduction on the bootstrap website says:By nerds, for nerds.
  8. 8. ABOUT BOOTSTRAPCreated by Jacob Thornton and Mark Otto
  9. 9. BOOTSTRAPPROVIDES
  10. 10. WHAT IS A MOODLETHEME?Moodle themes style and position HTMLThey contain. PHP, JavaScript, CSS, HTMLMoodle themes are powerful and complex
  11. 11. THE MOODLEBOOTSTRAP THEME
  12. 12. THE MOODLEBOOTSTRAP THEME
  13. 13. THEMES BUILD ONMOODLE BOOTSTRAPTheme Red
  14. 14. THEMES BUILD ONMOODLE BOOTSTRAP
  15. 15. THEMES BUILD ONMOODLE BOOTSTRAPTheme Growdly.com
  16. 16. THEMES BUILD ONMOODLE BOOTSTRAPTheme Aalborg University
  17. 17. THEMES BUILD ONMOODLE BOOTSTRAPTheme Aalborg University Denmark
  18. 18. SAMPLE BOOTSTRAPCODE
  19. 19. LESS
  20. 20. LESS FOR MOODLE
  21. 21. COMPILED LESS CODE
  22. 22. LESS STRUCTURE
  23. 23. LESS STRUCTURE
  24. 24. BEYOND BOOTSTRAP:BOOTSWATCHESBootswatches are themes for Twitter BootstrapThey usually contain 2 filesBootswatch.lessVariables.lesshttp://blog.alfonsorv.com/bootswatch-free-themes-for-twitter-bootstrap/
  25. 25. SAMPLEBOOTSWATCH THEME
  26. 26. SAMPLEBOOTSWATCH THEME
  27. 27. FUTURE DEVELOPMENT:EDITOR STYLING
  28. 28. FUTURE DEVELOPMENTACCORDION TOPICS
  29. 29. FUTURE DEVELOPMENTCOURSE PROGRESS
  30. 30. FUTURE DEVELOPMENTCOURSE GALLERIES
  31. 31. FUTURE DEVELOPMENTTYPE AHEAD COURSESEARCHhttps://github.com/hitteshahuja/Search-Courses---Autocomplete-
  32. 32. FUTURE DEVELOPMENTCLIPPY!
  33. 33. MORE FUTURE PLANSGrid Course FormatEmbedding HTML5 VideoCarousel for imagesCourse overview Grid with Course images
  34. 34. FURTHER READING
  35. 35. FURTHER READINGBlogpost on this presentationPreview the Bootstrap themeDownload the Moodle Bootstrap 2.4 theme The 2.5 version isin Moodle core.Bootsnipp.com http://bootsnipp.com/resourcesBootstrap Theme on Moodle docsGavin Henricks review on theme Clean.
  36. 36. END OFPRESENTATIONThanks to:David Scotson,Stuart Lamour,Mary Evans,Paul Hibbitts,Martin DougiamsThe iMoot organizers
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×