Building a Moodle theme with bootstrap

  • 9,558 views
Uploaded on

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
9,558
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
161
Comments
1
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UILDINGWITHBOOTSTRAPBAS BRANDS @BASBRANDSMOODLE DEVELOPER2013
  • 2. ABOUT MEBas BrandsThe NetherlandsMoodle Developer since 2009.
  • 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. 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. 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. 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. 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. ABOUT BOOTSTRAPCreated by Jacob Thornton and Mark Otto
  • 9. BOOTSTRAPPROVIDES
  • 10. WHAT IS A MOODLETHEME?Moodle themes style and position HTMLThey contain. PHP, JavaScript, CSS, HTMLMoodle themes are powerful and complex
  • 11. THE MOODLEBOOTSTRAP THEME
  • 12. THE MOODLEBOOTSTRAP THEME
  • 13. THEMES BUILD ONMOODLE BOOTSTRAPTheme Red
  • 14. THEMES BUILD ONMOODLE BOOTSTRAP
  • 15. THEMES BUILD ONMOODLE BOOTSTRAPTheme Growdly.com
  • 16. THEMES BUILD ONMOODLE BOOTSTRAPTheme Aalborg University
  • 17. THEMES BUILD ONMOODLE BOOTSTRAPTheme Aalborg University Denmark
  • 18. SAMPLE BOOTSTRAPCODE
  • 19. LESS
  • 20. LESS FOR MOODLE
  • 21. COMPILED LESS CODE
  • 22. LESS STRUCTURE
  • 23. LESS STRUCTURE
  • 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. SAMPLEBOOTSWATCH THEME
  • 26. SAMPLEBOOTSWATCH THEME
  • 27. FUTURE DEVELOPMENT:EDITOR STYLING
  • 28. FUTURE DEVELOPMENTACCORDION TOPICS
  • 29. FUTURE DEVELOPMENTCOURSE PROGRESS
  • 30. FUTURE DEVELOPMENTCOURSE GALLERIES
  • 31. FUTURE DEVELOPMENTTYPE AHEAD COURSESEARCHhttps://github.com/hitteshahuja/Search-Courses---Autocomplete-
  • 32. FUTURE DEVELOPMENTCLIPPY!
  • 33. MORE FUTURE PLANSGrid Course FormatEmbedding HTML5 VideoCarousel for imagesCourse overview Grid with Course images
  • 34. FURTHER READING
  • 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. END OFPRESENTATIONThanks to:David Scotson,Stuart Lamour,Mary Evans,Paul Hibbitts,Martin DougiamsThe iMoot organizers