Themes

 
 
Picture of Chris Chapman
Re: How to modify the 'Clean' theme using 'CSS'.
 

thanks for the reply, looks fairly simple once I get the cmd working, will have a look into it at some point when im not busy!. have installed buckle which gives me a little more css control, but I will have a look at LESS as it does seem the way forward!

 

Cheers

 
Average of ratings: -
Picture of Richard Oelmann
Re: How to modify the 'Clean' theme using 'CSS'.
Group Particularly helpful MoodlersGroup Testers

Hi Chris,

One of the things I did with buckle, which may help you when looking at other bootstrapbase themes, was to create an unminified version of the bootstrapbase css at the time (It has moved on from there but as Buckle uses bootstrapbase as a parent it will have inherited those changes), which made it much easier to see what was happening.

Minified code may be the way to go for finished themes (it's faster for one thing), but I personally find it easier to work with the unminified version while developing and for themes which I intend to build onto. You can do this with some of the options when processing the less files - if you are using less files for your theme. You can then reprocess them as minified when you are happy that everything is fine.

The other thing to bear in mind, which may be good or not depending on your view (I obviously think it is smile ) and what you want, is that the buckle theme uses the same layout/css for responsive layouts as krystle and zebra, rather than the grid framework used by bootstrapbase and other bootstrap themes.

Hope you like Buckle though smile

 
Average of ratings: -
Gareth J Barnard
Re: How to modify the 'Clean' theme using 'CSS'.
Group DevelopersGroup Particularly helpful Moodlers
Hi Richard,

Have you ever had an issue with uncompressed Bootstrap css on Buckle and IE as I seem to remember David mentioning something about a 4096 line limit?

Cheers,

Gareth
 
Average of ratings: -
Picture of David Scotson
Re: How to modify the 'Clean' theme using 'CSS'.
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
It's not a line limit, it's the number of "selectors" so

classname,
classname div a,
classname > table.th {

counts as 3 selectors towards the 4096 per stylesheet limit. Moodle sends parent stylesheets, the module stylesheets and the theme stylesheets seperately to IE browsers, so the only one you need to worry about is you theme's moodle.css which currently in Bootstrapbase sits just over the limit, so a few of the styles at the end get ignored in IE9. Low impact styles are intentionally placed near the end to limit this effect.

It worth noting that IE8 and IE9 count these selectors differently. IE8 simply ignores any inside media queries (as used for responsive layouts) since it doesn't understand them. IE9 supports them so they count towards the 4096 limit in that case.

Minification of CSS shouldn't have any impact on this.
 
Average of ratings: -
Picture of Richard Oelmann
Re: How to modify the 'Clean' theme using 'CSS'.
Group Particularly helpful MoodlersGroup Testers

No I didn't Gareth, but I didn't do it for actual use or even testing on IE, I was more than happy to actually use the minified css that was in bootstrapbase - the only reason I did it and what I was suggesting as a useful tip for someone trying to explore the css, was to create it in a readable form for when I was trying to work out what css was where. And for development like that I was using Firefox on Linux - by the time I got around to testing Buckle on IE (or proper testing on any browser) it was with the proper parent theme as it is in core, with minified css. But also, as David points out, minification or not should not affect the limits in IE as they are related to number of selectors rather than lines of code anyway.

@David - if bootstrapbase sits just over that limit, would there be any benefit in processing the less files into 2 separate css files rather than the one big one? e.g. bootstrap core and moodle specific ? Then it wouldn't be an issue of putting 'lower impact' rules to the end incase they are ignored by IE.

Given this IE limit, what are the benefits of a single css file to overweigh both this and the difficulty that you can no longer exclude a specific style sheet in a child theme as everything is in one? Or is it the single output css file simply a limitation of less?

Richard

 
Average of ratings: -
Picture of David Scotson
Re: How to modify the 'Clean' theme using 'CSS'.
Group DevelopersGroup Documentation writersGroup Particularly helpful Moodlers
This issue isn't really related to LESS at all. If you split the Bootstrap CSS into multiple files, then Moodle would stitch them back together again.

It's the output of Moodle that the browsers get to see, not the way the files are organised within the theme. Moodle already had something that sent IE the parent theme CSS, mod style CSS and theme CSS as 3 seperate files for this reason (where normally they are turned into one big file). Moodle 2.5 has improved on this by actively splitting the files on roughly the 4096 limit (and not bothering to do it for IE10, as it doesn't need this).

So mostly, it's all under control and there's no real need to do anything further as Moodle is taking care of deliver the CSS in the fastest way possible to the various browsers. But it did just catch me out today when looking at something for a 2.4 related Bootstrap theme as I added a quick fix to the end of the CSS and wondered why IE9 wasn't seeing it.
 
Average of ratings: -
Picture of Richard Oelmann
Re: How to modify the 'Clean' theme using 'CSS'.
Group Particularly helpful MoodlersGroup Testers

Excellent, thanks David smile

 
Average of ratings: -