Difference between revisions of "bootstrap-Theme"

Jump to: navigation, search
(adding some non-php projects)
(Potential projects)
Line 42: Line 42:
 
* Add theme settings that allow 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.
  
==Potential projects ==
+
== Potential projects ==
  
 
Some projects that don't require knowledge of PHP to help with:
 
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:
+
=== 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#typography
 
** http://twitter.github.com/bootstrap/base-css.html#code
 
** http://twitter.github.com/bootstrap/base-css.html#code
Line 58: Line 60:
 
** http://twitter.github.com/bootstrap/components.html#misc
 
** 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:
+
=== 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>
 
     <a href="#" class="btn btn-success btn-large"><i class="icon-white icon-ok"></i> Start Learning Now</a>
Line 64: Line 68:
 
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/
 
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 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 ===
  
* '''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
+
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.
  
* '''Checkout the competition''' - there's all sorts of Bootsrap 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.
+
=== Create alternate icon sprites ===
  
* '''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
+
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 ==
 
== Links to Discussions in Forums ==

Revision as of 11:35, 29 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.

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:

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.

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

Resources