theme_bootstrap
theme_bootstrap copied to clipboard
bmbrands
A new method of working with RTL themes
For RTL languages the Bootstrap and the Bootstrap3 theme still need a lot of work. To make working with the RTL languages easier I have created a child theme that you can download here: https://github.com/bmbrands/theme_bsrtl
This child uses the flipped moodle.css and added yui-rtl and forms-rtl CSS. Maybe in future we can even use this project https://github.com/ratnic/bootstrap-rtl To make boostrap3 more RTL!
Hopefully this is a temporary solution and MDL core will allow loading separate css files when changing to rtl languages.
I was checking out the ratnic project the other day. Seems like they take a similar approach to Moodle and go through and create the RTL, and the CSS required to reset the LTR, by hand.
On the other hand, they send it as an optional extra file. So you only get the RTL CSS if you use an RTL language. This simplifies things a bit, as they can mostly send the same CSS flipped. For Moodle you need to add an extra body class at the start, which means you need to know whether each CSS rule is starting from the body (in which case you append it directly) or not (in which case you leave a space after it).
Note that the ratnic approach adds about 50% to the CSS size. Since they already detect the language, I'm wondering if they've measured this and found it a better approach than what Bootstrap upstream is doing for certain use cases.
I've been wondering if it's possible to automate that resetting process, and therefore do it (and the flipping) for Bootstrap upstream and the Bootstrap 3 Moodle theme in one go (includig the Moodle stuff about detecting whether each CSS rule is attached to the body or not).
It just seems tragic to put so much effort into that when there's so many benefits to Moodle sending the files based on current page language.
I am not sure splitting the RTL fixes into a new theme is a good approche.
As you know, Moodle's approach is to detect the user's language and add a .dir-rtl class which should help the underlying theme to decide which CSS roles should be applied to the page from a cached CSS file that include all the rules. And we should comply with it, for now. And... Discuss with Moodle HQ developers the splitting into LTR and RTL versions the cached CSS code which is sent to the browser. And have the theme generate different ones before hand.
Considering the world is moving to Mobile (first), it is better to send as little as possible CSS code to the user.
What do you think?
Hi Nadav,
If you want to write the .dir-rtl rules by hand then we'd be grateful to have them. No-one else involved (as far as I'm aware) has the language skills required.
I also have some shell scripts that generate a roughly 90% complete combined, moodle-style CSS with the RTL rules following the LTR rules. I've not committed them yet (I will try to put them online tonight) but your help to either bring the scripts up to 100% or to tweak the results by hand to bring them up to scratch would also be appreciated.
We still need to have separate LTR and RTL only CSS as the size of a combined bootstrap alone is a bit ridiculous, so only those that need it should use it.
Getting core Moodle to split the CSS has been part of the plan for the last couple of years but we've not seen much interest in that, or several other suggestions to reduce the size of the CSS being sent. I brought it up at the dev session at the Moot but it didn't get enough votes to be discussed.
Relatedly, Bootstrap have announced that their RTL solution is not ready for the 3.2 release. They said they'd provide more info on their plans for RTL when they release 3.2 soon.
Regards,
Dave Le 18 mai 2014 09:59, "Nadav Kavalerchik" [email protected] a écrit :
I am not sure splitting the RTL fixes into a new theme is a good approche.
As you know, Moodle's approach is to detect the user's language and add a .dir-rtl class which should help the underlying theme to decide which CSS roles should be applied to the page from a cached CSS file that include all the rules. And we should comply with it, for now. And... Discuss with Moodle HQ developers the splitting into LTR and RTL versions the cached CSS code which is sent to the browser. And have the theme generate different ones before hand.
Considering the world is moving to Mobile (first), it is better to send as little as possible CSS code to the user.
What do you think?
— Reply to this email directly or view it on GitHubhttps://github.com/bmbrands/theme_bootstrap/issues/262#issuecomment-43434798 .
Thank you for the feedback, information and the Bootstrap 3.2 RTL update.
So I guess we'll have to continue what you are already doing.
I am frequently updating the theme, locally. And I will continue to use and test it. And send RTL CSS patches and fixes.
I am wondering if we should add them as separate LESS files or CSS files (on top of your and bootstraps' RTL files) What do you think?
On 18 May 2014 12:48, David Scotson [email protected] wrote:
Hi Nadav,
If you want to write the .dir-rtl rules by hand then we'd be grateful to have them. No-one else involved (as far as I'm aware) has the language skills required.
I also have some shell scripts that generate a roughly 90% complete combined, moodle-style CSS with the RTL rules following the LTR rules. I've not committed them yet (I will try to put them online tonight) but your help to either bring the scripts up to 100% or to tweak the results by hand to bring them up to scratch would also be appreciated.
We still need to have separate LTR and RTL only CSS as the size of a combined bootstrap alone is a bit ridiculous, so only those that need it should use it.
Getting core Moodle to split the CSS has been part of the plan for the last couple of years but we've not seen much interest in that, or several other suggestions to reduce the size of the CSS being sent. I brought it up at the dev session at the Moot but it didn't get enough votes to be discussed.
Relatedly, Bootstrap have announced that their RTL solution is not ready for the 3.2 release. They said they'd provide more info on their plans for RTL when they release 3.2 soon.
Regards,
Dave Le 18 mai 2014 09:59, "Nadav Kavalerchik" [email protected] a écrit :
I am not sure splitting the RTL fixes into a new theme is a good approche.
As you know, Moodle's approach is to detect the user's language and add a .dir-rtl class which should help the underlying theme to decide which CSS roles should be applied to the page from a cached CSS file that include all the rules. And we should comply with it, for now. And... Discuss with Moodle HQ developers the splitting into LTR and RTL versions the cached CSS code which is sent to the browser. And have the theme generate different ones before hand.
Considering the world is moving to Mobile (first), it is better to send as little as possible CSS code to the user.
What do you think?
— Reply to this email directly or view it on GitHub< https://github.com/bmbrands/theme_bootstrap/issues/262#issuecomment-43434798>
.
— Reply to this email directly or view it on GitHubhttps://github.com/bmbrands/theme_bootstrap/issues/262#issuecomment-43435646 .
Hi all,
I think I have an alternative: https://moodle.org/mod/forum/discuss.php?d=264955 - which is implemented on https://github.com/gjb2048/theme_bootstrap/tree/master_rtl - difference: https://github.com/gjb2048/theme_bootstrap/compare/master_rtl
It employs css flip to produce the flipped version of the moodle.css file to moodle-rtl.css which are served directly by the theme. Thus only one of the files is used. The disadvantage of this are another HTTP call and the need to move pre-processed pix to another file which is then cached. The advantage because of the direct flipping is that there is no longer a need to declare for the most part LTR and RTL specific selectors. This has had a big impact on the layout CSS in removing a lot of the selectors that dealt with adjusting the grid. Also, logic in lib.php for RTL has been removed. This is all down to css-flip directly swapping the bootstrap3 grid.less generated CSS and therefore the grid system operates in reverse.
I have tested a little but really believe that I'm on to something.
Cheers,
Gareth
Hi Bas and David,
I have made significant progress on RTL in the Essential theme, please see: https://github.com/DBezemer/moodle-theme_essential/issues/249. Which will be in the next release, 2.7.8.
The main sticking points have been the order of CSS import and that affecting overrides. Some of which I have had to resolve with '!important' and with the Quiz by excluding the original, importing and getting the order correct.
In the current Moodle we have core plugin styles then theme styles. With the change there is: theme styles, core plugin styles and then theme setting styles. If some things in the theme styles override the core plugin styles then they need to go in the theme setting styles but as long as the RTL switching is not broken. A little complicated. However, in Essential I believe that I have got this right and in the process eliminated almost all the 'dir-rtl' styles and indeed some duplication which has not been discovered in core.
Almost there!
Cheers,
Gareth
Would you mind giving a short demo on what you have done for this. Or maybe we could organise a 1 hour devmeeting on this topic only for anybody interested including @nadavkav to get this sorted once and for all
Absolutely. I'm happy with demo or dev Q&A session. Let me know. Just need to see how Essential 2.7.8 goes.
Sent from my iPod in deep space...=
Looking forward for this :smile:
Must say, testing this special Essential theme I found it very (very) promising. RTL looks great! I think Mary evans should also be included and anyone from core that is related to themes.
Please give me time to work out a sequence for the demo. However, due to other circumstances that took me by complete surprise, if Mary attends I shall refuse to demonstrate / meet.