Note: You are currently viewing documentation for Moodle 3.4. Up-to-date documentation for the latest stable version of Moodle is likely available here: bootstrap-Theme.

bootstrap-Theme: Difference between revisions

From MoodleDocs
No edit summary
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/ twitter bootstrap] coding conventions. There has already been a great deal of work done by inderviduals within the moodle community and it's hoped that by formulising this work we may be able to collaborate and build on this.
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.




Line 6: Line 6:
There are 5 major categories of development for this theme family:
There are 5 major categories of development for this theme family:


* Layout
* Layouts
* Renderers
* Renderers
* Stylesheets
* Stylesheets
Line 13: Line 13:


=== Layout ===
=== Layout ===
The 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.
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 ===
=== Renderers ===
Line 34: Line 34:


== 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].
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 allo administrators to change the layout of templates through the theme interface.
* Add theme settings that allow administrators to change the layout of templates through the theme interface.


== 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=208162 Bootstrap for Moodle project]


== Links to discussions in forums: ==
== Resources ==


* [http://moodle.org/mod/forum/discuss.php?d=212222 re-)bootstrap: work in progress]
* [http://twitter.github.com/bootstrap/ Twitter Bootstrap Home]
* [http://moodle.org/mod/forum/discuss.php?d=212341 Amelia and Cyborg Bootswatches for Moodle]
* [http://jshirley.github.com/bootstrap/javascript.html Bootstrap YUI Plugins]
* [http://moodle.org/mod/forum/discuss.php?d=208162 Bootstrap for Moodle project]
* [http://bootswatch.com/ Bootswatch]
* [http://bootsnipp.com/ Bootsnipp]

Revision as of 14:33, 28 September 2012

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 Approah

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.

Links to Discussions in Forums

Resources