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

Building a Moodle theme with bootstrap

on

  • 10,001 views

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.

Statistics

Views

Total Views
10,001
Views on SlideShare
9,077
Embed Views
924

Actions

Likes
8
Downloads
145
Comments
1

6 Embeds 924

http://www.scoop.it 799
http://2013.imoot.org 49
https://twitter.com 34
http://cormic.local 27
http://studyspace.stanmore.ac.uk 14
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building a Moodle theme with bootstrap Building a Moodle theme with bootstrap Presentation Transcript

  • 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 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.
  • 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
  • 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
  • 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”
  • 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.
  • 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 powerful and complex
  • 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.lessVariables.lesshttp://blog.alfonsorv.com/bootswatch-free-themes-for-twitter-bootstrap/
  • 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 version isin Moodle core.Bootsnipp.com http://bootsnipp.com/resourcesBootstrap Theme on Moodle docsGavin Henricks review on theme Clean.
  • END OFPRESENTATIONThanks to:David Scotson,Stuart Lamour,Mary Evans,Paul Hibbitts,Martin DougiamsThe iMoot organizers