bootstrap-Theme: Difference between revisions
Mark Andrews (talk | contribs) |
Bas Brands (talk | contribs) |
||
(23 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
== Twitter Bootstrap Theme== | == Twitter Bootstrap Theme== | ||
This page aims to bring together discussions from the themes forum related to the development of a moodle 'base' theme that conforms to the [http://twitter.github.com/bootstrap/ | This page aims to bring together discussions from the themes forum related to the development of a moodle 'base' theme that conforms to the [http://twitter.github.com/bootstrap/ Twitter Bootstrap] coding conventions. There has already been a great deal of work done by individuals within the Moodle community and it's hoped that by formulating this work we may be able to collaborate and build on this. | ||
== | == Technical Approach == | ||
There are 5 major categories of development for this theme family: | |||
* Layouts | |||
* Renderers | |||
* Stylesheets | |||
* Javascripts | |||
* Settings (child themes) | |||
=== Layout === | |||
The General layout will be a 2 column layout based on the [http://twitter.github.com/bootstrap/examples/fluid.html "Fluid" example] providing an "out of the box" responsive grid. | |||
=== Renderers === | |||
Multiple renderers will be developed to make Moodle output more bootstrap friendly by 1) outputting classes defined in bootstrap.css and 2) outputting semantic HTML exemplified in the bootstrap documentation | |||
=== Stylesheets === | |||
Bootstrap.css will be the core CSS sheet with adjustments made to reduce re-duplication (like 'reset') and to define Moodle core classes that can't be matched to bootstrap via a renderer | |||
=== Javascripts === | |||
[http://jshirley.github.com/bootstrap/javascript.html YUI Bootstrap plugins] will be dropped in to the theme in place of the jQuery version(s). | |||
=== Settings === | |||
On the roadmap: create a child theme (or themes) to provide end users with custom settings, possibly including: | |||
* static or fixed navbar | |||
* light or dark color | |||
* 2 or 3 column layout | |||
* custom logo | |||
* [http://bootswatch.com/ bootswatches] | |||
== Success criteria == | == Success criteria == | ||
To have developed a theme that can be used as a base theme, that looks and feels like the default bootsrap interface. (see: [http://twitter.github.com/bootstrap/getting-started.html#examples examples]. | |||
==Future developments == | ==Future developments == | ||
* To make a responsive version | * To make a responsive version | ||
* Create a library of custom renderers that can be used in themes to make UI changes | * Create a library of custom renderers that can be used in themes to make UI changes | ||
* Add theme settings that | * Add theme settings that allow administrators to change the layout of templates through the theme interface. | ||
== Current development == | |||
On the Moodle tracker issue [https://tracker.moodle.org/browse/MDL-38016 MDL-38016] is used for the review process of putting the bootstrap framework into core. | |||
A Bootstrap development branch is used in this review process. There are several different bootstrap themes out there that can usefull as well. | |||
These are some themes that use the bootstrap framework | |||
=== Tiny Bootstrap === | |||
Download location: [https://github.com/lazydaisy/tiny-bootstrap-project tiny-bootstrap-project] | |||
Description: This theme provides the basics of bootstrap | |||
Current features are: | |||
* responsive | |||
* includes jQuery | |||
=== Bootstrap renderers === | |||
Download location: [https://github.com/ds125v/moodle-theme_bootstrap_renderers bootstrap_renderers] | |||
Description: This is a experimental theme for developers. It includes many features and is great as a theme to learn from and build on | |||
=== Bootstrap dev === | |||
Download location: [https://github.com/bmbrands/theme_bootstrap/tree/moodle_25 moodle_25] | |||
This branch of the bootstrap theme contains: | |||
'''Less''' | |||
This theme contains only 2 css file: bootstrap.css and editor.css. | |||
These files are compiled from the files that live in the theme's /less folder. This folder contains a README that explains how to compile a new bootstrap.css. You can use this theme without ever having to compile bootstrap.css. But you can use the power of these less files to extend the theme with extra less files from websites such as: [http://bootswatch.com/ bootswatch] that offer themes build with bootstrap. | |||
Learning less is fun. just read [http://lesscss.org/ lesscss.org] | |||
'''Responsive layout''' | |||
Bootstrap offers a Grid that allow you to create responsive layouts. This version uses a 2-1-3 layout. A 2-1-3 layout is an optimized layout where the content of Moodle is ordered differently when you look at the page (HTML) source code. | |||
* Page content goes first (2) | |||
* Then the left block region (1) | |||
* Then the right block region (3) | |||
When using the theme moodle still shows the regular block - content - block layout. | |||
* [http://moodle.org/mod/forum/discuss.php?d=212222 re-)bootstrap: work in progress] | '''Custom menu''' | ||
This theme contains a custom menu that is always present. When using small devices this menu collapses and shows a dropdown button. You can extend custom menu using the standard moodle theme settings to add links. | |||
'''Bootstrap JavaScript''' | |||
This version of bootstrap uses YUI libraries for the custom menu build by [https://github.com/jshirley Jay Shirley]. It does not offer all bootstrap's JavaScript elements, migrating those will take more time (and volunteers). Development of the Bootstrap YUI libraries has been quit for some time now but Jay Shirley is willing to transfer his project to the Moodle community. | |||
'''html5shiv''' | |||
To make sure the theme works in IE8 and IE7 the file html5shiv.js is included from the /javascript folder for users of these browsers. | |||
=== Bootstrap === | |||
Download location: [https://moodle.org/plugins/view.php?plugin=theme_bootstrap bootstrap] | |||
Description: This is the moodle theme that is available on the plugins database. It can be used for Moodle 2.2 - 2.4. This theme is very similar to Bootstrap dev | |||
Features: | |||
* build on Moodle base theme | |||
* has all bootstrap css | |||
* based on the base theme | |||
* theme settings: using custom css | |||
* theme settings: custom logos | |||
* theme settings: enabling jquery | |||
* theme settings: using glyphicons | |||
* responsive | |||
* 1-2-3 layout | |||
=== Roadmap === | |||
The Bootstrap dev theme needs some work. | |||
Some of the elements to focus on: | |||
* Minimize CSS usage | |||
* Use Yui instead of jQuery | |||
* Test on all platforms | |||
The Bootstrap minimax theme could be compared to the Bootstrap dev theme and the tiny bootstrap theme for core inclusion. | |||
The current Bootstrap theme available on the plugins database will be updated with improvements that are discovered during the development of the dev branch but will remain available for Moodle 2.2 - 2.4. | |||
== Potential projects == | |||
Some projects that don't require knowledge of PHP to help with: | |||
=== Bootstrap for Educational Content === | |||
Take some of your existing content, or freely available courses and use Bootstrap styles to format it. Maybe write a document, that uses Bootstrap styles to explain how to apply Bootstrap styles to educational content. Look at the Bootstrap documentation for inspiration, it not only tells you what is possible, it demonstrates many of them in its own presentation: | |||
* http://twitter.github.com/bootstrap/base-css.html#typography | |||
* http://twitter.github.com/bootstrap/base-css.html#code | |||
* http://twitter.github.com/bootstrap/base-css.html#tables | |||
* http://twitter.github.com/bootstrap/base-css.html#images | |||
* http://twitter.github.com/bootstrap/base-css.html#icons | |||
* http://twitter.github.com/bootstrap/components.html#labels-badges | |||
* http://twitter.github.com/bootstrap/components.html#typography | |||
* http://twitter.github.com/bootstrap/components.html#thumbnails | |||
* http://twitter.github.com/bootstrap/components.html#alerts | |||
* http://twitter.github.com/bootstrap/components.html#misc | |||
=== Bootstrap in Moodle content === | |||
There's plenty of places in Moodle that accept HTML and so can be spruced up with Bootstrap. For example, if you have a public access course, you could add a big green "start learning now" button with a white tick icon to the course description (or many other places on your site) just by using the following html: | |||
<a href="#" class="btn btn-success btn-large"><i class="icon-white icon-ok"></i> Start Learning Now</a> | |||
and the href is simply pointing to the course like any normal link, yet the presentation is transformed. There's probably a million other examples, try coming up with some and sharing them. For experimenting with what's possible with buttons, try: http://www.plugolabs.com/twitter-bootstrap-button-generator/ | |||
=== Bootstrap editor === | |||
Of course, to do the above currently takes HTML coding. But it would be nice if you could just press buttons on a gui. Moodle allows plugin editors, maybe we could use this: http://jhollingworth.github.com/bootstrap-wysihtml5/ | |||
=== Bootstrap for TinyMCE === | |||
The current editor is actually incredibly flexible. It is themeable (http://www.tinymce.com/wiki.php/Creating_a_theme) and Bootstrap comes with a range of editor icons. It should also be able to pick up and use classes from an editor.css file you feed it (http://www.tinymce.com/wiki.php/Configuration:content_css). It should be possible to create a better Bootstrap editor using this flexibility | |||
=== Checkout the competition === | |||
There's all sorts of Bootstrap projects for various blog engines and content management systems. If you already use say Wordpress you could install some of them an report back anything useful, or just nice looking, that they do and you think would transfer across to Moodle. The new version of Joomla ([http://www.joomla.org/3/]) also uses Bootstrap throughout the user and admin interface and can probably provide some inspiration. | |||
=== Create alternate icon sprites === | |||
All the Bootstrap icons are merged into one single image to make things download faster. If you want to use a different set of icons you'll need to do the same. Instructions here: http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily | |||
== Links to Discussions in Forums == | |||
* [http://moodle.org/mod/forum/discuss.php?d=212222 (re-)bootstrap: work in progress] | |||
* [http://moodle.org/mod/forum/discuss.php?d=212341 Amelia and Cyborg Bootswatches for Moodle] | * [http://moodle.org/mod/forum/discuss.php?d=212341 Amelia and Cyborg Bootswatches for Moodle] | ||
* [http://moodle.org/mod/forum/discuss.php?d=208162 Bootstrap for Moodle project] | * [http://moodle.org/mod/forum/discuss.php?d=208162 Bootstrap for Moodle project] | ||
== Resources == | |||
* [http://twitter.github.com/bootstrap/ Twitter Bootstrap Home] | |||
* [http://jshirley.github.com/bootstrap/javascript.html Bootstrap YUI Plugins] | |||
* [http://bootswatch.com/ Bootswatch] | |||
* [http://bootsnipp.com/ Bootsnipp] | |||
* [http://fortawesome.github.com/Font-Awesome/ Font Awesome] (icon font for Bootstrap) | |||
* [http://www.alistapart.com/articles/building-twitter-bootstrap/ A List Apart: Building Twitter Bootstrap] (the story behind and philosophy of Bootstrap) |
Latest revision as of 10:38, 18 March 2013
Twitter Bootstrap Theme
This page aims to bring together discussions from the themes forum related to the development of a moodle 'base' theme that conforms to the Twitter Bootstrap coding conventions. There has already been a great deal of work done by individuals within the Moodle community and it's hoped that by formulating this work we may be able to collaborate and build on this.
Technical Approach
There are 5 major categories of development for this theme family:
- Layouts
- Renderers
- Stylesheets
- Javascripts
- Settings (child themes)
Layout
The General layout will be a 2 column layout based on the "Fluid" example providing an "out of the box" responsive grid.
Renderers
Multiple renderers will be developed to make Moodle output more bootstrap friendly by 1) outputting classes defined in bootstrap.css and 2) outputting semantic HTML exemplified in the bootstrap documentation
Stylesheets
Bootstrap.css will be the core CSS sheet with adjustments made to reduce re-duplication (like 'reset') and to define Moodle core classes that can't be matched to bootstrap via a renderer
Javascripts
YUI Bootstrap plugins will be dropped in to the theme in place of the jQuery version(s).
Settings
On the roadmap: create a child theme (or themes) to provide end users with custom settings, possibly including:
- static or fixed navbar
- light or dark color
- 2 or 3 column layout
- custom logo
- bootswatches
Success criteria
To have developed a theme that can be used as a base theme, that looks and feels like the default bootsrap interface. (see: examples.
Future developments
- To make a responsive version
- Create a library of custom renderers that can be used in themes to make UI changes
- Add theme settings that allow administrators to change the layout of templates through the theme interface.
Current development
On the Moodle tracker issue [https://tracker.moodle.org/browse/MDL-38016 MDL-38016] is used for the review process of putting the bootstrap framework into core.
A Bootstrap development branch is used in this review process. There are several different bootstrap themes out there that can usefull as well.
These are some themes that use the bootstrap framework
Tiny Bootstrap
Download location: tiny-bootstrap-project
Description: This theme provides the basics of bootstrap
Current features are:
- responsive
- includes jQuery
Bootstrap renderers
Download location: bootstrap_renderers
Description: This is a experimental theme for developers. It includes many features and is great as a theme to learn from and build on
Bootstrap dev
Download location: moodle_25
This branch of the bootstrap theme contains:
Less
This theme contains only 2 css file: bootstrap.css and editor.css. These files are compiled from the files that live in the theme's /less folder. This folder contains a README that explains how to compile a new bootstrap.css. You can use this theme without ever having to compile bootstrap.css. But you can use the power of these less files to extend the theme with extra less files from websites such as: bootswatch that offer themes build with bootstrap. Learning less is fun. just read lesscss.org
Responsive layout
Bootstrap offers a Grid that allow you to create responsive layouts. This version uses a 2-1-3 layout. A 2-1-3 layout is an optimized layout where the content of Moodle is ordered differently when you look at the page (HTML) source code.
- Page content goes first (2)
- Then the left block region (1)
- Then the right block region (3)
When using the theme moodle still shows the regular block - content - block layout.
Custom menu
This theme contains a custom menu that is always present. When using small devices this menu collapses and shows a dropdown button. You can extend custom menu using the standard moodle theme settings to add links.
Bootstrap JavaScript
This version of bootstrap uses YUI libraries for the custom menu build by Jay Shirley. It does not offer all bootstrap's JavaScript elements, migrating those will take more time (and volunteers). Development of the Bootstrap YUI libraries has been quit for some time now but Jay Shirley is willing to transfer his project to the Moodle community.
html5shiv
To make sure the theme works in IE8 and IE7 the file html5shiv.js is included from the /javascript folder for users of these browsers.
Bootstrap
Download location: bootstrap
Description: This is the moodle theme that is available on the plugins database. It can be used for Moodle 2.2 - 2.4. This theme is very similar to Bootstrap dev
Features:
- build on Moodle base theme
- has all bootstrap css
- based on the base theme
- theme settings: using custom css
- theme settings: custom logos
- theme settings: enabling jquery
- theme settings: using glyphicons
- responsive
- 1-2-3 layout
Roadmap
The Bootstrap dev theme needs some work.
Some of the elements to focus on:
- Minimize CSS usage
- Use Yui instead of jQuery
- Test on all platforms
The Bootstrap minimax theme could be compared to the Bootstrap dev theme and the tiny bootstrap theme for core inclusion.
The current Bootstrap theme available on the plugins database will be updated with improvements that are discovered during the development of the dev branch but will remain available for Moodle 2.2 - 2.4.
Potential projects
Some projects that don't require knowledge of PHP to help with:
Bootstrap for Educational Content
Take some of your existing content, or freely available courses and use Bootstrap styles to format it. Maybe write a document, that uses Bootstrap styles to explain how to apply Bootstrap styles to educational content. Look at the Bootstrap documentation for inspiration, it not only tells you what is possible, it demonstrates many of them in its own presentation:
- http://twitter.github.com/bootstrap/base-css.html#typography
- http://twitter.github.com/bootstrap/base-css.html#code
- http://twitter.github.com/bootstrap/base-css.html#tables
- http://twitter.github.com/bootstrap/base-css.html#images
- http://twitter.github.com/bootstrap/base-css.html#icons
- http://twitter.github.com/bootstrap/components.html#labels-badges
- http://twitter.github.com/bootstrap/components.html#typography
- http://twitter.github.com/bootstrap/components.html#thumbnails
- http://twitter.github.com/bootstrap/components.html#alerts
- http://twitter.github.com/bootstrap/components.html#misc
Bootstrap in Moodle content
There's plenty of places in Moodle that accept HTML and so can be spruced up with Bootstrap. For example, if you have a public access course, you could add a big green "start learning now" button with a white tick icon to the course description (or many other places on your site) just by using the following html:
<a href="#" class="btn btn-success btn-large"><i class="icon-white icon-ok"></i> Start Learning Now</a>
and the href is simply pointing to the course like any normal link, yet the presentation is transformed. There's probably a million other examples, try coming up with some and sharing them. For experimenting with what's possible with buttons, try: http://www.plugolabs.com/twitter-bootstrap-button-generator/
Bootstrap editor
Of course, to do the above currently takes HTML coding. But it would be nice if you could just press buttons on a gui. Moodle allows plugin editors, maybe we could use this: http://jhollingworth.github.com/bootstrap-wysihtml5/
Bootstrap for TinyMCE
The current editor is actually incredibly flexible. It is themeable (http://www.tinymce.com/wiki.php/Creating_a_theme) and Bootstrap comes with a range of editor icons. It should also be able to pick up and use classes from an editor.css file you feed it (http://www.tinymce.com/wiki.php/Configuration:content_css). It should be possible to create a better Bootstrap editor using this flexibility
Checkout the competition
There's all sorts of Bootstrap projects for various blog engines and content management systems. If you already use say Wordpress you could install some of them an report back anything useful, or just nice looking, that they do and you think would transfer across to Moodle. The new version of Joomla ([1]) also uses Bootstrap throughout the user and admin interface and can probably provide some inspiration.
Create alternate icon sprites
All the Bootstrap icons are merged into one single image to make things download faster. If you want to use a different set of icons you'll need to do the same. Instructions here: http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily
Links to Discussions in Forums
- (re-)bootstrap: work in progress
- Amelia and Cyborg Bootswatches for Moodle
- Bootstrap for Moodle project
Resources
- Twitter Bootstrap Home
- Bootstrap YUI Plugins
- Bootswatch
- Bootsnipp
- Font Awesome (icon font for Bootstrap)
- A List Apart: Building Twitter Bootstrap (the story behind and philosophy of Bootstrap)