Hello
I am learning Moodle theming. I have a subtheme from a theme (Iomad) that is a bootstrapbase subtheme. So I get many redundant css rules. I have search for solutions but I have not clear what to do. Has anybody used grunt-uncss? Any solutions to make css files smaller? Thanks
Interesting idea .
https://addyosmani.com/blog/removing-unused-css/
Just found this...
Thanks Mary
I am using git to update moodle, so I don't want to modify any file on it. In a branch, I add themes and plugins so I can merge to update server.
Five years ago, I installed a moodle and now I have a small job with an NGO for installing another. So, I am very insecure about themes.
My doubt on grunt-uncss is that in grunt I only put my subtheme, so it only checks for my theme. If I put the parents, then ... Would it modify them or only will modify the cache css? I know about the cache css, but not exactly where it's saved... Now I am on the designer mode and for what I understand, grunt-uncss will not apply. Am I right?
Thanks a lot you two
Hi Rosa,
I am no expert where GRUNT is concerned as I have only just got to grips with it.
Gareth has more experience and perhaps better qualified to answer your questions.
On a similar subject of CSS and un-CSS is this setting that is in theme/bootstrapbase/config.php
$THEME->supportscssoptimisation = false;
As you see it is switched off if you reverse that setting and make it = true then all the CSS in Bootstrap and Bootstrapbase CSS is optimised which can have a bad effect on Moodle.
If what you are worrying about does anything like the CSS Optimiser then perhaps you have a right to be a bit worried.
Cheers
Mary
Thanks Mary
I have played a bit with Gruntfile.js. Now my problem is that in Firebug or Web Developer Tools I get only the lines of the main file and not the @import files, so it is impossible to develop. How do you do to work? I mean, which programs do you use to edit the .less files. Thanks
I got how to make firebug to work. I put it here just in case someone needs it. In the Gruntfile.js
less: {
bootstrapbase: {
files: {
"theme/YOUR_THEME/style/YOUR_CSS.css": "theme/YOUR_THEME/less/YOUR_CSS.less",
},
options: {
compress: false, //false while developing. Put to true for production
sourceMap: true, //for developing. Remove for production
outputSourceFiles: true, //this made the trick for Firebug
}
}
},
When I finish with scss, I will test the grunt-uncss and tell here. Have a good night
I forgot to put that
outputSourceFiles: true, //this made the trick for Firebughas to be also removed for production
Thank you very much. I am used to sass and compass and now I am learning less with grunt. Also learning moodle and its subtheming. I really appreciate your help
My problem is that my client doesn't want borders or round corners and moodle has many, so I have to look on all bootstrapbase .less to find them and change them, what makes my subtheme very big. I have to subtheme Iomad theme (bootstrapbase subtheme) because the multi-tenancy (my client collaborates with 4 small NGOs for marginal young people). Any tips to make the css smaller or better or any grunt plugin or x will be welcome My last moodle was 5 years ago O.O Its much better than then, but I have many things to learn.....
Hi Rosa,
The borders are added because the blocks and some of of the content container boxes use the Bootstrap class .well in the moodle LESS files found in Bootstrapbase which adds a border. So it's easier to style .well { border: 0 none} in your themes which will remove the borders whenever the well is uses.
I have no idea about SASS or COMPASS as we don't use them in Moodle. But if you need help with Moodle theme's you are in the right place as there are a host of good people here who can help you learn about Moodle.
Cheers
Mary
Hi Rosa,
Further to my last comment, I was jsut wondering why you think your themes are getting too big? First of all you do not need to add all the Bootstrap/Bootstrapbase LESS in your themes. You only need a small override stylesheet. Or is it that you feel that is getting too big?
By the way I use a clone of the More theme to start with then I adapt it to work then way I want. Checkout Morecandy which is on my GitHub HERE.
Hope this helps?
Mary
Thanks a lot for your kindness
I am constrained by having to use Iomad theme because this distribution has plugins that only work with its theme or subthemes (I helped them to get it work with subthemes). So I can't use one of your excellent themes, at for example, choosing one that didn't have borders or rounded corners.
About subtheming, maybe I am misunderstanding. For what I understand, the page imports the parents themes and at last my subtheme. When they are compiled to css, each goes for their own. I mean, that if I change, as for example, color variables, I have to redeclare all the classes again to have those changes. Am I right?
The Iomad theme has not done much css, so most of the look comes from bootstrapbase. At the moment, I have copied all the bootstrapbase .less and file by file, I am deleting what is not border, color, shadow or round corner for importing in the main page. Then, I will apply the style for my subtheme. I hope you understand my bad English ))
Thanks a lot again and have a good day
Sorry Rosa, I did not have a clue what IOMAD was until I Googled it just now. 
In Moodle the theme CSS overrides the parents. So yes Moodle styles all the layouts and the theme changes the way it looks and in some cases how certain pages work.
Changing a colour in a theme is done in a setting within the theme via the Admin UI. Once changed all the CSS resets to new colour automatically.
Do you remember the Splash theme in Moodle 2.0? It was removed in Moodle 2.7. Splash used the YUI ColourSwitcher JavaScript file that allowed you to decide which colour scheme you wanted to use. There were four colour schemes available, Red, Green, Blue and Orange. The code is easy to add and the CSS files are colour coded using body class CSS selectors that are generated when changing the setting. https://github.com/moodle/moodle/blob/MOODLE_26_STABLE/theme/splash/javascript/colourswitcher.js
Hope this helps?
Mary
Ups, I should have put it http://www.iomad.org/
My subtheme has not a color switcher. I have seen before this kind of changing a theme, but I never used because I use to put all the work on the subtheme. Now with your help and David I have seen that i can modify the theme and where I don't arrive, make it with the subtheme. I am very glad to learn this way Never the less, I have learn about the structure on how its built bootstrap. I used it a couple of times the past 3 years. Thanks for the patience!
Edit: Good link. I will take a look on Monday to see if I can implement in my subtheme. And now to sleep
In some themes you can alter the Bootstrap variables, and then generate new .css from the .less. One of those variables controls the roundness of the corners, so if that's the kind of theme you are dealing with then a few variable changes should get rid of most rounded corners in one go.
In defaul Bootstrap those options are:
@baseBorderRadius: 4px;
@borderRadiusLarge: 6px;
@borderRadiusSmall: 3px;
And setting them all to 0 should get rid of rounded corners. I don't know if this is possible with the theme you currently use, but it's something we do to achieve pointy corners in a Bootstrap 3-based theme, so possibly worth looking into. A similar technique could probably remove most borders as well.
I am going to try it, thanks! The subtheme has not a field for processing .less in settings, but the other day I say the code to do it and tested when I was having problems debugging the subtheme system in Iomad. I was not conscious of its possibilities since I was thinking in modifying my subtheme, not the parent theme. Monday I will be in the evening with it. Thanks