Your SlideShare is downloading. ×
Building a Moodle theme with bootstrap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Building a Moodle theme with bootstrap

10,307
views

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

Published in: Technology, Design

1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,307
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
187
Comments
1
Likes
9
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