Moodle in English: Bootstrap - doing more with less?

Bootstrap - doing more with less?

by Brian Merritt - Tuesday, 4 June 2013, 5:21 AM

I have to thank Bas for pushing over the edge into Less, and in the Bootstrap theme for 2.4 I created an additional custom folder under less where I keep the batch file to compile plus the extra CSS I want to add to my themes.

In 2.5, Bootstrap Base continues to support Less, but it's the parent theme, so I don't really want to load my custom folder (or css) into that theme - I want to keep it in my own Theme.

However, all the @include files assume that all the Less is in the Theme folder, not the parent folder.

Just a thought - how about changing the Less bootstrapbase files so that the Bootstrap + Moodle .less files compile on the assumption that all the includes are ../../bootstrapbase/less/bootstrap and ../../bootstrapbase/less/moodle.

There is no cost penalty for this change, it just means that any theme based on bootstrapbase, clean, shoestring, buckle, or anklebracelet (OK, I made that last one up) can compile less very simply with their own .less file in the theme.

For anyone who has yet to try less - you can get bootstrap minified CSS almost anywhere on the web, but it won't integrate properly with the Moodle code unless you use Less.

Other benefits of Less include the variables (for example,

@navbarBackground: #42a2ce;

@navbarBackgroundHighlight: @navbarBackground;
@navbarLinkBackgroundActive: @navbarBackground;
@dropdownBackground: @navbarBackground;
@dropdownLinkBackgroundHover: @navbarBackground;
@wellBackground: @navbarBackground ;

You only have to set one variable to an actual color, and then set all the other relevant / responsive equivalents to that variable so changing a color or style is suddenly so much easier.

Mixins and all sorts of other effects are also available - for example, I wanted a gentle hover effect on the bootstrap navbar, so I used:

color: darken(@textColor,5%) ;
 background-color: darken(@navbarBackground,5%) ;

Now if I change the font color, I only make one change and don't have to go through the whole CSS file to find out what else is affected.

So Less does give us a lot more, and I would just like to make it a bit easier to generate new bootstrap responsive themes with Less without having to alter the core theme to do it.

Thanks for listening

Average of ratings: -

Re: Bootstrap - doing more with less?

by Mary Evans - Tuesday, 4 June 2013, 5:40 AM

ALL the CSS and I do me ALL of it IS in theme/bootstrapbase/less/moodle/

this is where ALL the .less files are kept. We then point the compiler to moodle/theme/bootstrapbase/less> recess --compile --compress moodle.less > ..style/moodle.css

All of this happens inside bootstrapbase at this point and it is from here that clean inherits ALL that CSS. The only CSS that is in Clean theme is custom.css added to enable the logo to display in the header if activated in Clean custom settings page.

So not quite sure how you are reading the bootstrapbase/less/moodle.less file???

Mary

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Tuesday, 4 June 2013, 7:25 AM

Hi Mary

I hope you are as fed up with me as I am

less compiles perfectly well in bootstrapbase and in a child theme - it was a typo on my side that caused the problem (not enough ..'s)

I will try to re-edit my answer to Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Tuesday, 4 June 2013, 5:44 AM

Dear Brian,

Good idea but I don't think that changing the Bootstrap base 'less' files is the solution. Rather, just have your own 'moodle.less' and 'editor.less' files in your own theme with the relative paths and compile them instead adding your own extras as required.

Be aware that there are still some fixed colours in both the moodle and bootstrap less files that do not reference 'variables.less'.

I'm starting to love less

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Tuesday, 4 June 2013, 6:58 AM

Thanks Gareth

I could do that, and probably will have to, but every change in bootstrapbase would then not be reflected in my theme.

For myself I don't mind, but if someone is using my Theme I want them to be able to upgrade as needed and have Less "catch up" (assuming they have a Less compiler)

I believe the only work required is to modify the moodle.less and bootstrap.less files once, e.g. this:

// Old Moodle stuff from base theme.
// Massive, needs broken up.
@import "moodle/core";
@import "moodle/admin";
@import "moodle/calendar";
@import "moodle/course";
@import "moodle/filemanager";
@import "moodle/grade";
@import "moodle/message";
@import "moodle/question";
@import "moodle/user";


// Upstream Bootstrap.
@import "bootstrap/bootstrap";

Would become

// Old Moodle stuff from base theme.
// Massive, needs broken up.
@import "../../bootstrap/less/moodle/core";
@import "../../bootstrap/less/moodle/admin";
@import "../../bootstrap/less/moodle/calendar";
@import "../../bootstrap/less/moodle/course";
@import "../../bootstrap/less/moodle/filemanager";
@import "../../bootstrap/less/moodle/grade";
@import "../../bootstrap/less/moodle/message";
@import "../../bootstrap/less/moodle/question";
@import "../../bootstrap/less/moodle/user";


// Upstream Bootstrap.
@import "../../bootstrap/less/bootstrap/bootstrap";

A simple search for the @import " and replace with @import " ../../bootstrap/less would do the trick.

The reason for doing this Mary is provide access to the .less system including variables for Theme Developers.

I installed node.js and recess on my laptop, and run a very simple batch file

recess --compile --compress custom_compilefor_moodle.less > ..\..\style\moodle.css

And custom_compilefor_moodle.less is equally simple and imports my own less script (extra-moodle.less)

/* Custom Client Less Script
 This script is for Moodle pages */

// Allows custom less to be easily added at end
// Also includes support for extra Moodle css during development & theme tuning

@import "../../bootstrap/less/moodle";


// Now include custom less
@import "extra-moodle";

Average of ratings: -

Re: Bootstrap - doing more with less?

by Mary Evans - Tuesday, 4 June 2013, 7:17 AM

Sorry Brian,

But I am lost with all this ../../ business

As I see it bootstrapbase/less/moodle.less calls all the .less files from bootstrapbase/less/moodle and also the bootstrap.less file from bootstrapbase/less/bootstrap which in turn includes variables.less and a load or other .less files too.

So where in all of this is it not calling the CSS you need for your theme if bootstrapbase is your theme's parent theme? If 'bootstrapbase' is not one of your theme's parent themes, or if your parent theme is clean theme only then you need to also ADD bootstrapbase in the parents array like so...

$THEME->parents = array('clean', 'bootstrapbase');

Sorry if I seem a bit dense but what you are saying is not making too much sense to me.

Mary

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Tuesday, 4 June 2013, 7:37 AM

Thanks Mary & Gareth

I am having an "interesting" day, but yes, the ../.. is not needed because Less @import works from which ever directory the .less file is stored.

If anyone else in interested how I finally got it working as I wanted, in my theme I create a folder called less, and a subfolder called custom.

I then installed node.js and recess on my laptop, and run a very simple batch file

recess --compile --compress custom_compilefor_moodle.less > ..\..\..\bootstrapbase\style\moodle.css

This overwrites bootstrapbase/style/moodle.css

The file custom_compilefor_moodle.less is really simple and after compiling moodle.less it also imports my own .less script (extra-moodle.less)

/* Custom Client Less Script
 This script is for Moodle pages */

// Allows custom less to be easily added at end
// Also includes support for extra Moodle css during development & theme tuning

@import "../../../bootstrapbase/less/moodle.less";


// Now include custom less
@import "extra-moodle";

Average of ratings: Useful (1)

Re: Bootstrap - doing more with less?

by David Scotson - Wednesday, 5 June 2013, 11:28 PM

This is close to what I do currently, except I leave CSS and LESS (and well everything) in Bootstrapbase completely as it is, inherit from it in MyTheme to get the renderers but exclude the CSS coming from the parent, then I have theme/mytheme/less/moodle.less (which is basically the same as your custom_compilefor_moodle.less) and generate that into theme/mytheme/style/moodle.css.

Keeps all the theme related stuff within it's own directory, and treats BootstrapBase as a read-only dependency.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 12:31 AM

Please can someone explain in detail the reasoning behind why the bootstrapbase less files need to be brought into a child theme for recompiling with any changes?

My understanding is:

less in bootstrapbase creates the bootstrapbase css files which is what is used.

child themes inherit that css (not the less files, but the compiled css that results from them)

to override that css in most cases we would simply inherit that css from the parent theme and only add new/changed css to the child theme

Can we not simply create the new/changed/overriding less variables in a less file, compile these into a child theme css file. Moodle will then take the bootstrapbase css and override it where relevant with the child theme css as compiled through less.

The implication, or my understanding at least, of the posts above is that people are taking the whole less folder from bootstrapbase making changes in there and recompiling the whole lot. Doesn't this mean that less/css changes to bootstrapbase will not then be taken into any child themes using this technique?

Apologies if this seems naive to those who have worked with less for longer than I have, but it doesn't seem to make sense to me in terms of the way Moodle css inheritance and parent/child theme relationships work.

Richard

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Thursday, 6 June 2013, 2:48 AM

Dear Richard,

There are two techniques based upon what you want to do:

The override bootstrap base css as you describe.
The compile a new css with your own changes to the bootstrap base 'less' files, use the generated css in the new theme and exclude the bootstrap base css.

The 'Clean' theme does '1' (currently without any overrides) and the 'Shoelace' theme does '2'.

The 'Can we not simply create the new/changed/overriding less variables in a less file, compile these into a child theme css file.' option is a new possibility and would be a hybrid of '1'.

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 3:34 AM

Yes, I realise that Gareth, those are the options I described in my post (although I would describe #1 as inheriting and overriding rather than simply overriding )

I guess what I am asking is why do #2 ? What are the benefits? Are there any? Am I not understanding something and missing the benefits of doing this, or are other people not understanding the way Moodle css inheritance works?

To my understanding, this loses all the benefits of the parent/child inheritance of css and the upstream changes which is an integral part of most themes and a benefit of the way the theme system works in Moodle - that changes to their parent theme (whether it is base/bootstrapbase) are 'automatically' included in the child theme. This would appear to be especially true at a time when bootstrapbase is still being worked on, so all those changes would not be included in any child theme using this technique meaning it has to be recompiled and rebuilt every time changes are made to bootstrapbase css.

No-one would (I hope) think of copying all the base theme css into their child theme when they have base as a parent for its layouts, and add a new override.css file tacked on the end, yet this is what seems to be happening here.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Thursday, 6 June 2013, 6:11 AM

Dear Richard,

It is true that nobody would consider copying all of the base theme css into their child theme and that when fixes are made to the underlying bootstrap base theme 'less' that a recompilation is required. But there is the spanner in the works of the 'variables.less' file. It is a very powerful concept that one small one line change to that means that lots of selectors change to and that takes a lot to find and create overrides with pure css only.

Also, in my experience with course formats, more often than not a change to the underlying API means a change and re-release of the add-on. So, I suspect even with mechanism '1' there will be times when the overrides don't keep up with underlying changes, although admittedly less likely. The benefits of '2' are that it is far quicker to create a whole new colour scheme with only a few changes. That is the basis of the underlying Bootswatch idea and website. It's also true of the MyMobile theme and the jQueryMobile site - although in Moodle it requires a bit more effort than a straight swap.

Pragmatically, it's choosing what works for you in the given situation that you find yourself in. If '1' works, then that's the best way, but if you find yourself spending ages trying to change a certain colour in every single selector it is used (and indeed subtle colours that are derived from it) then '2' is the solution despite the maintenance issue, especially if you only update Moodle every now and then. So, from the user's point of view, '1' is more COTS and '2' is more 'Bespoke'.

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 8:07 AM

I like to think I'm not entirely stupid or inexperienced, Gareth, but your analogies have lost me! I don't see the relevance of any of them.

I'm not sure what link you are making with course format APIs or with jQueryMobile - I was asking about css changes not upstream changes from bootstrap or changes to core moodle apis such as happened with the maincontent output method a few release ago.

'Commercial Off The Shelf' v Bespoke - again I do not see the point you are making at all here either. Neither method is any more/less bespoke than the other, and neither is 'off the shelf' any more than the other. Both solutions allow changes to be made.

'Pragmatically', I agree it is about choosing what works for an individual in a given situation - I just can't imagine a situation for me, personally, where I would prefer to save a bit of work once creating the overrides for inherited css (manually or using less on child theme changes) than creating a potential ongoing maintenance nightmare and having to recompile constantly while bootstrapbase continues to be improved because I have broken the inheritance of the css.

I am not trying to provoke an argument here - I am genuinely trying to learn, but I still do not see how the benefits of method #2 outweigh the downsides. I am aware that others will have a different opinion and that is fine, we all have different ways of working.

The way I have been trying today is to take the existing bootstrapbase less files and make the changes I want in the less files and recompile that, then to create a diff file between that and the original bootstrapbase css. That forms the basis of the override.css file for my child theme while allowing me to continue to use the css inheritance features of the theme system. I'm not convinced its a good workflow, for me anyway (or not yet while I am learning more about less). Neither am I convinced it is a way I could recommend people coming to the theme community forums for support to use. But it maybe a way forward - and its something I'm trying anyway - in creating themes that do maintain the inheritance of css from bootstrapbase.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Thursday, 6 June 2013, 1:58 PM

Hi all

If it is any help, I believe the best is either

1. Use less, but have only the changed less files in the child theme

2. If not using less, then override the CSS but do understand that even simple change may require a lot of overriding.

With regard to 1 - do any of you:

a. have a problem with the parent theme loading moodle.css?

if so, do you

b. rename your child output to something else, but end up with two full minified .css files downloaded to the user?

Average of ratings: -

Re: Bootstrap - doing more with less?

by David Scotson - Thursday, 6 June 2013, 2:18 PM

You need to exclude the CSS coming from the parent theme in config.php.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 2:39 PM

@David,

My whole point is that you should NOT have to exclude the parent theme css - and that you DO NOT need to!

@Brian

No I haven't had any problems with the child theme inheriting the parent css (moodle.css) as happens in Clean and in Buckle and in some experimental themes I've been trying different things out on

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Thursday, 6 June 2013, 4:38 PM

@Richard - I will go back and recheck, as I was having a bad hair day the last time I had problems combining less.

Re your point to David - are you saying that you should not have to exclude parent theme css because:

there is a logic error in Moodle, and css should automatically come from child theme if the same file exists in child and parent
Moodle should load both parent and child css files (and it's up to the theme developer and/or css alterer to get it right) ?
Something else

Thanks

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 10:13 PM

#2 Brian

Take a look at the page source code of a (standard) theme that has base&canvas as parents and you will see how it works.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Thursday, 6 June 2013, 9:00 PM

@Richard,

Ok....

'course format APIs or with jQueryMobile' = keeping up with core changes forces re-release of code analogy where probably changes to 'less' that are excluded by method '2' might force re-release of code by method '1' anyway as they could break the 'overrides' etc.

''Commercial Off The Shelf' v Bespoke' = Method '1' -> COTS -> take what is there and make subtle small changes to what you need - quick but not tailored completely to your entire requirements - Method '2' -> Bespoke = harder to do and more costly but you get exactly what you want.

I hope this makes sense.

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 9:19 PM

Umm - in terms of the question I was asking for help with - No it doesn't

But there we are.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Thursday, 6 June 2013, 9:29 PM

@Richard,

Ok, I've now lost the plot with the thread here. What's missing?

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 9:56 PM

Gareth, its not that your analogies don't make sense, its that I don't see that they make sense in the context of what I was asking about.

1. I don't see the api/upstream jQuery analogy as relevant because we are talking about css changes and inheriting those in an already defined structure. Yes upstream changes (e.g Bootstrap moving to v.X) can always break things, but that if that happens it happens irrespective of the way the css is inherited, not because of the method used. ie both methods have the same issues with upstream changes beyond the level of parent/child relationships. If anything, the inheritance method is LESS (no pun intended) susceptible to them, because changes made in the parent theme are automatically carried over into the child theme, while recompiled themes will by necessity require recompiling to pick up those changes.

2. COTS v Bespoke - I just plain don't agree with. Both methods can be used to provide whatever level of 'bespokeness' you want. ie both methods have the same level of configurablility etc.

I don't see either analogy as differentiating the two methods or providing any additonal information related to what I was trying to find out. Its whether the benefits of recompiling everything, every time outweigh the benefits of maintaining the inheritance cascade and whether what I was doing was actually wrong.

As I have said in another reply - to me the answer is no, they don't (acknowledging that for other people there may be a different answer to this as it seems to me to be a judgement call), and no what I was doing is not 'wrong' - its just not the way you and David do it.

I am not trying to say that your way is wrong either (or that my way is better necessarily), I completely agree with your comment that it is down to the individual and the circumstances to choose the appropriate methodology for them at that time - I was just trying to make sure that what I was doing wasn't incorrect and in that context I could not (cannot) see how your analogies were/are relevant to the discussion.

But (again as I said in another post) I have learned a lot from the contributions on this thread (not just about the technology and LESS) and I would thank you for them.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Thursday, 6 June 2013, 10:19 PM

@Richard,

Ok, fair enough - 'api/upstream jQuery' might have been too obscure! Was trying to express the 'api' update issue - which you have already covered in your latest reply and for 'jQueryMobile' how that matches the Bootswatch idea (Bas's presentation at iMoot) which can be implemented with method '2'.

For 'COTS' vs 'Bespoke' I think time will tell. I just see method '2' as being more bespoke than method '1' as you can decide to break away from the Bootstrap base css completely and do your own thing but still retain the rest like the JavaScript.

Before Bootstrap effectively moth balled MyMobile I created (took three weeks) a version that enabled you to use the jQueryMobile swatch tool and bolt in a completely new colour scheme with relative ease. It also had a wonderful full blown integration with Collapsed Topics - full rendering - the full monty. The experience with this sort of theme / swatch design led me to create Shoelace in the same light and hence my demonstration theme at iMoot which uses some of the same code including jQuery based slider in the admin settings for the theme to switch things like fonts in a graphical way ->

<- for which I am grateful to Mary for helping with suggesting use of the BX Slider. All of this led me to the JQueryMobile swatch analogy.

So for us as a community, the big push now is to fix as many Bootstrap base issues in core as possible to give stability to our sibling themes. I've already worked on four and I think two have been integrated to be in this week's release .

Cheers,

Gareth

P.S. Thank you for your kind appreciation

Average of ratings: Useful (1)

Re: Bootstrap - doing more with less?

by David Scotson - Thursday, 6 June 2013, 10:46 PM

Wow, Gareth, that's very cool. You should really start a thread just about the stuff in that video rather than hiding your light under a bushel. Very inspiring.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Thursday, 6 June 2013, 11:17 PM

@David,

Thank you - Mutant Banjo is sort of finished, but it uses the same css build technology as Shoelace but replicated many times. What is needed is for all the Bootstrap 'less' to be fixed as much as possible for it, Shoelace and Clean for the benefit of all of us. Hence me working on some of the tracker issues . Then I'll go ahead with a production version.

It does use jQuery and in a current non-core approved way, but it is in it's own YUI contained area and pulls in the version contained within core.

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Amy Groshek - Friday, 7 June 2013, 1:28 AM

I've been watching this discussion unfold. The question of workflow is an interesting one. David and I explored the idea of building a preprocessor into Moodle. https://tracker.moodle.org/browse/MDL-38160 If that were done, then it might be possible to actually include/compile .less files from a parent theme as a part of CSS compression, which would lead to the kind of seamless use of parent theme variables and mixins that Richard seems to be wanting. It does make sense when you talk about really benefitting from the magic of preprocessing when working on a child theme. Otherwise you start from scratch with the child theme, and have to override a bunch of stuff without benefitting from all the goodies in the .less. I'm not saying it would be a perfect solution, as there's nothing really delineated in the tracker task for how that would work or even what lib would be used, but it's interesting to think about the options it opens up.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Friday, 7 June 2013, 8:34 PM

I have voted for this one! Hope that helps rather than hinders your cause

Average of ratings: -

Re: Bootstrap - doing more with less?

by David Scotson - Thursday, 6 June 2013, 2:26 PM

Sorry for the short reply, I'm on my phone currently but two points:

1. you don't lose the changes in Bootstrap base because they are all in the .less files which you are importing so if you make no customizations then the generated CSS would match Bootstrap base exactly.

2. Less is built around the idea of producing a single file and Bootstrap takes advantage of that. It's not impossible to create multiple files (e.g. Bootstrap does it for its responsive stuff) but its more advanced and not really applicable in our case. Its simply easier to recreate the whole file with modifications.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 2:48 PM

David,

The point is that to get any future changes in bootstrapbase you would need to recompile everything if you have excluded the parent css, while the default way that theme inheritance works in Moodle is that upstream fixes to a parent are then included in a child theme by default as it inherits that css (however that upstream css is created - manually in a text editor, through and IDE or through LESS/SASS or any other precompiler/framework).

Excluding the parent css file means losing that inheritance and forcing child theme creators to have to recompile their changes everytime an upstream modification is made.

Allowing the child to inherit the parent css, then creating the child_theme_overrides.css file in whatever way the developer/designer wishes (again, manually, through an IDE or through a precompiler) maintains that upstream link.

Moodle does handle multiple css files, as do the browsers that display the webpages. Just because bootstrap by default minifies everything into a single css file does not , by default, mean that is best practice for Moodle theme creation (my opinion).

'Easier to create the whole file with modifications' - In an ideal world where everything upstream is entirely stable and you are creating a stable theme and only have to do this once, maybe - in the real world with ongoing development and upstream changes, I'm really not sure about that.

Richard

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Thursday, 6 June 2013, 4:44 PM

Ahhh - I think the answer to my question above is 2

I believe Moodle does this, but with any .css generated by LESS/SASS the theme developer or user always has the caveat that CSS overrides do not always function as expected, and that therefore recompiling is advisable with anything to do with navbar, buttons, drop downs, responsive etc.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Thursday, 6 June 2013, 4:54 PM

Yes, when I look at my site, bootstrap base theme loads "moodle.css" and as a Bootstrap theme developer that is compiling LESS I have the choice of

1. Overwriting moodle.css in bootstrapbase/style with my own compiled output (not ideal but it works)

2. Creating a my_theme_custom.css file, and Moodle will download both (which is a waste of bandwidth, esp for mobile users)

3. Creating a my_theme_custom.css file, and changing the config.php in bootstrapbase (that change being over-written with the next upgrade)

My ideal choice would have been:

I generate moodle.css file in my_theme/style and that overrides the parent theme.

That doesn't stop Richard from using his method (unless he calls the custom .css file the same name, e.g. moodle.css)

Thoughts?

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 8:22 PM

As far as I am aware, file names don't matter in terms of the inheritance - at least there are many themes that use pagelayout.css or styles.css and moodle will pick up both the child and the parent css, with tools such as firebug identifying exactly where it has come from- it works exactly like css inheritance does with a string of css files in the same website

'core' css -> first parent (grandparent?) theme css (in order specified in that theme's config) -> next parent theme css (in order specified in that theme's config) -> child theme css (in the order specified in the child theme config)

Each file overrides any settings in the previous files, just as one setting would override the same thing earlier in the same file.

The way the inheritance works, we should be able to leave the parent css in place and just make the necessary changes in the child theme, which would mean that upstream changes to the parent theme are automatically fed into the child theme through - rather than having to pull all the parent css into the child theme and exclude the inheritance from the parent.

Attached is an extract from the page source code of a theme on my develoment server in work - the child theme is called newu, it uses both canvas and base as parents (canvas has base as a parent, effectively making base the 'grandparent' of newu)

If you look you will see that both canvas and base have css files called pagelayout, core, course, blocks and question and that newu also has a css file called pagelayout. All of these files are picked up by Moodle and are used in the order you can see in the extract of the page source, so that base/pagelayout is applied first, is overriden by canvas/pagelayout, which is in turn overriden by newu/pagelayout.

Naming of css files in different themes is NOT an issue.

If I were to follow pattern described, I would exclude ALL of the parent/grandparent theme css, copy it ALL into newu, making all my changes there.

As I said previously - if everything is guaranteed not to change, that is fine in an ideal world. But in the situation where css changes in the parent/grandparent theme, the inheritance model cascades those changes (as it is cascading style sheets after all) into the child theme without me having to re-edit my own child theme and reapply any upstram changes.

So - my point again: I do not see that the speed of development advantages of excluding the parent css and having to copy, change my variables and recompile the .less files every time an upstream change is made outweighs the ongoing maintenance issues of breaking the inheritance cascade.

However, as I also stated earlier - I am aware others will have differing view points and may be perfectly happy to recompile their child themes every time changes are made to bootstrapbase.

What I was trying to ascertain in my original query is, with some of the developers with more experience in less than myself choosing to do it this way, is this some sort of requirement of bootstrap - in which case we seem to be into a new/different paradigm of theme creation which is neither cloning, nor parent/child but a hybrid of both - or is it simply a preferred workflow.

The answer after all this, appears to be that it is a preferred workflow for those particular developers. That is fine and is all the answer I really need - I am not trying to tell anyone that one way is right and another is wrong, but trying to find out if the way I was doing it was wrong. It seems to me that it isn't wrong, it just doesn't match the way David and Gareth prefer to do it themselves. I'm sure in the future I will find occasions where I will prefer to clone whatever theme rather than use parent/child and when that is appropriate - for me and my workflow - that is what I will do. At the moment and when working with bootstrapbase with its frequent changes and ongoing improvements and development, I prefer to be able to inherit its css rather than recompile it every time.

I would thank everyone for their answers in this thread - I have learned a lot about many things - not just technical and less related!

Richard

stylesextract.txt

Average of ratings: -

Re: Bootstrap - doing more with less?

by David Scotson - Thursday, 6 June 2013, 10:39 PM

Hi Brian,

you can achieve your "ideal choice" as long as you add

$THEME->parent_exclude_sheets = array('moodle');

to the child theme's config.php.

As Richard notes, updates to the less files in Bootstrapbase will not be picked up automatically in this case, you'd need to recompile if those files changed. I personally would try to automate such stuff to happen automatically on upgrades, but that's not possible for everyone. I did survey such changes historically and there didn't seem to be that many, but having said that there's been a bit more activity around themes lately.

Your option 1 and 3 would give you even more trouble in an update situation, and 2 would possibly suffer the same problem as the ideal solution depending on how the two CSS files interacted.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Friday, 7 June 2013, 3:05 PM

Sorry David

I missed this vital fact in all the excitement of the discussion

Merci B

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Friday, 7 June 2013, 6:31 PM

So - in my bootstrap theme, I include:

$THEME->parents = array('bootstrapbase');

$THEME->plugins_exclude_sheets = array(
'bootstrapbase' => array(
'moodle',
),
'block' => array(
'html',
),
'gradereport' => array(
'grader',
),
);

Yet, when I view my html source I find the line:

Have flushed all caches until they are awash, full debug mode, theme designer is on, and the moon is in whatever phase the moon is in.

What am I doing wrong?

Average of ratings: -

Re: Bootstrap - doing more with less?

by David Scotson - Friday, 7 June 2013, 7:06 PM

It's a matter of "parent" vs. "plugins", you need a line like this:

$THEME->parent_exclude_sheets = array('moodle');

which controls the theme sheets (i.e. themename/styles/blah.css) you get from parents.

This line, which you've already got, excludes the styles coming from plugins (e.g. mod/forum/styles.css)

$THEME->plugins_exclude_sheets = array(

So take bootstrapbase out of the latter, and put it into the former. If you've only got one parent, you don't need to specify the theme by name in an outer array, just name the stylesheet.

Average of ratings: Useful (1)

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Friday, 7 June 2013, 8:25 PM

Dear Brian,

Exactly as David suggests - Shoelace is an example of this

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Friday, 7 June 2013, 8:47 PM

It's one of those days the moodle.css is still loading after purging caches and broswer cache, designer mode is on, etc

$THEME->doctype = 'html5';
$THEME->parents = array('bootstrapbase');
$THEME->sheets = array('custom');
$THEME->supportscssoptimisation = false;
$THEME->yuicssmodules = array();

$THEME->editor_sheets = array();

$THEME->parent_exclude_sheets = array('moodle');

$THEME->plugins_exclude_sheets = array(
'block' => array(
'html',
),
'gradereport' => array(
'grader',
),
);

$THEME->rendererfactory = 'theme_overridden_renderer_factory';
$THEME->csspostprocess = 'iscacoach_process_css';

I would have thought that I drop to no css (apart from the micro bit in custom), but moodle keeps hanging in there

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Friday, 7 June 2013, 8:55 PM

Dear Brian,

You need:

$THEME->parents_exclude_sheets = array(
'bootstrapbase' => array(
'moodle',
'editor'
)
);

And as 'bootstrap/variables.less' is in 'editor.less' then generate both

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Friday, 7 June 2013, 9:39 PM

@Brian - I believe it should be parents_exclude_sheets = array('moodle');

@Gareth - as David said previously, if bootstrapbase is the only parent theme there is no need to declare that in the exclude array, just the file name itself. If Brian is not redeclaring editor.css in his own child theme, then that shouldn't be excluded or it wont be picked up from anywhere. (If you are advising that he should redeclare editor.css as well then the exclude would be parents_exclude_sheets = array('moodle','editor'); )

Richard

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Friday, 7 June 2013, 10:08 PM

Maximum thanks Gareth - should be didn't work but yours did. No idea why, but who needs why when what works! (that should be read who needs Why, when What works)

Thanks Richard for your input

Thanks Mary for being you, and all the help and support

Thanks David for putting me onto the right track

I guess that, like Zedd, this thread is now dead

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Friday, 7 June 2013, 10:23 PM

@Richard,

Missed that bit of David's! In the context of Brian's development then do need to re-declare 'editor.css' and regenerate it .

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Thursday, 6 June 2013, 8:51 PM

Well, the broswers don't read the less/sass, they read the css - so if the original css and the overrides are written properly (by the less compilation) they will work as expected.

In fact you could take the less folders out completely once it is all compiled and the website/theme should work fine (not suggesting anyone should as the less files are needed for reference and for changes being made to bootstrapbase!). You could even compile the css to the unminified version and then split it into more logical separate css files allowing parts of the css to be excluded from child themes rather than the whole of the parent css (again not suggesting that should be done with bootstrapbase, or advocating it, just that you could - browsers read the css not the less/sass files)

Average of ratings: -

Re: Bootstrap - doing more with less?

by David Scotson - Thursday, 6 June 2013, 10:20 PM

You're right that you have to compile if there's any update to the less files in Bootstrapbase that you want to take advantage of. It's probably the biggest downside to this approach, but as long as your aware of that you can get benefits that more than counterbalance it for many circumstances (and if you control your own server you can automate it as part of the upgrade). Certainly not worth the trouble for less radical changes or for people that don't want to mess with such techy gubbins though.

Note that Moodle (long before Bootstrap) actually goes to a lot of trouble to gather up all the CSS files and turn them into a single, minified CSS file to send to the browser (with some workaround for IE<10 that can't handle really big files). It makes things go quite bit faster, particularly on bad internet connections and is generally consider a best practice for the web.

I originally looked at hooking a PHP-based less compiler into that process, so that all the changes got compiled on the fly and then cached. You could even have it in theme designer mode and instantly see changes to your less files. That had other trade-offs and different benefits and drawbacks e.g. on the good side you could get values from the user via the web interface and use those to change the colorscheme, but on the bad side the PHP port wasn't always 100% compatible with the Javascript verson. Always nice to have options though.

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Tuesday, 4 June 2013, 7:40 AM

Dear Mary,

Like Shoelace, I suspect that Brian has 'Bootstrap base' as a parent but excludes the 'moodle.css' file to replace it with his own generated version, thus getting a new compatible style set with the benefits of inheriting layouts / JavaScript etc. No need to go near 'Clean' at all.

The '..' are just for the recompilation of the less files outside of the Moodle server PHP stuff.

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Mary Evans - Tuesday, 4 June 2013, 7:48 AM

I see...another case of DANGER Men @ Work!

rofl

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Tuesday, 4 June 2013, 8:03 AM

But this is a walk in the park ;) - not like creating a client / server Internet Caching Protocol program to cache web pages for multiple clients like an enhanced proxy server But implementing the 'Hyper Text Coffee Pot Control Protocol' would be fun

And should that be 'DANGER People @ Work!'?

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Tuesday, 4 June 2013, 7:35 AM

Dear Brian,

Cool, that would work in terms of easily updating the moodle.css file for yourself when Bootstrap base changes and keeping your extras. If you want auto-update then there is a way without using recess with the inline less compilation but to be honest, page load is slow and impractical in production.

Shoelace uses the same mechanism (ish).

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Brian Merritt - Tuesday, 4 June 2013, 7:40 AM

Thanks Gareth - I will have a look at Shoelace now that I am experiencing "less .less difficulties"

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Wednesday, 5 June 2013, 3:06 AM

Gareth,

Can you point me in the direction of this mechanism in Shoelace - I'd like to learn more about the inline compiling but can't find it in the theme.

Richard

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Wednesday, 5 June 2013, 3:49 AM

Dear Richard,

The mechanism is not in Shoelace. Shoelace just has the compiled result. I use a separate bespoke theme for development and debugging.

Lots of information about less on http://lesscss.org/.

Cheers,

Gareth

Average of ratings: -

Re: Bootstrap - doing more with less?

by Richard Oelmann - Wednesday, 5 June 2013, 4:02 AM

Sorry OK, I obviously misunderstood when you were talking about inline less compilation and then a follow up comment that 'Shoelace uses the same mechanism (ish)'

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Wednesday, 5 June 2013, 4:09 AM

No need to apologise

Average of ratings: -

Re: Bootstrap - doing more with less?

by Mary Evans - Wednesday, 5 June 2013, 4:40 AM

http://docs.moodle.org/dev/LESS

Get ready for some phun...hackers anon

Average of ratings: -

Re: Bootstrap - doing more with less?

by Gareth J Barnard - Wednesday, 5 June 2013, 5:02 AM

twitch twitch ;)

Not hacking - been using the Red and Blue books for years -> http://www.esa.int/TEC/Software_engineering_and_standardisation/TECBUCUXBQE_0.html <- upon which configuration management and testing repeatability are a part

Average of ratings: -

Re: Bootstrap - doing more with less?

by David Scotson - Thursday, 6 June 2013, 10:24 PM

Some of my live LESS compiler code is here:

https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/lib.php

Takes some tweaking to make it work though, not sure if I left it in a working state.

The mention of using the javascript compiler in the browser reminds me that I meant to investigate the crazy idea of compiling the less into CSS on the admin users browser during the upgrade progress.

Average of ratings: -

Re: Bootstrap - doing more with less?

by David Scotson - Friday, 7 June 2013, 5:13 PM

I just tried this theme in 2.5 to test another feature someone was asking about and was pleasantly surprised to see that it all still worked (though I was checking it mostly because someone else reported that it broke for them so YMMV). Some of the theme settings will change the less files that get compiled, you can choose "Random" as a theme and it'll flick different settings on and off each time you refresh the page in theme designer mode. Not very useful, but it shows what's possible.

Average of ratings: -