Beta test for AdminThemeTweaker

[Chris Bennett]

https://github.com/chrisbennett-Bene/AdminThemeTweaker

Inspired by @bernhard's excellent work on the new customisable LESS CSS getting rolled into the core soon, I thought I would offer up the module for beta testing, if it is of interest to anyone.

It takes a different approach to admin styling, basically using the Cascade part of CSS to over-ride default UiKit values.

1. Values are stored in ModuleConfig
2. Module creates a separate AdminThemeTweaker Folder at root, so it can link to AdminThemeTweaker.php as CSS
3. AdminThemeTweaker.php reads the module values, constructs the CSS variables then includes the CSS framework

Can be switched on and off with a click. Uninstall removes everything, thanks to bernhard's wonderful remove dir & contents function.

It won't touch your core. It won't care if stuff is upgraded. You won't need to compile anything and you don't need to touch CSS unless you want to.

It won't do much at all apart from read some values from your module config, work out the right CSS variables to use (auto contrast based on selected backgrounds) and throw it on your screen.

You can configure a lot of stuff, leave it as it comes (dark and curvy), change two main colors (background and content background) or delve deep to configure custom margins, height of mastheads, and all manner of silly stuff I never use.

Have been developing it for somewhere around 2 years now. It has been (and will continue to be) constantly tweaked over that time, as I click on something and find something else to do.
That said, it is pretty solid and has been in constant use as my sole Admin styling option for all of those 2 years.

If nothing else, it would be great if it can provide any assistance to @bernhard or other contributor's who may be looking to solve some of the quirkier UiKit behavior.
Has (in my opinion) more robust and predictable handling of hidden Inputfields, data-colwidths and showIf wrappers.
I am very keen to help out with that stuff in any way I can, though LESS (and any css frameworks/tools basically) are not my go.
I love CSS variables and banging-rocks-together, no-dependency CSS you can write with notepad.



 

[Chris Bennett]

Thanks to the excellent feedback from @matjazp , have re-vamped way the whole module works.

Minimizes potential conflicts and was just a better idea. 

Now draws CSS variables, conditionally loaded source CSS and framework CSS together to generate single minified CSS file, with version control link to refresh cache for other pages. 
Only occurs when the module is visited, as it should, and after that other pages draw the minifed CSS straight from cache.

Now loads in parallel with other CSS. at somewhere around 30ms, same as other CSS files.
First load (in the module itself, not subsequent pages) comes in around 17 kB compressed (somewhere around 96kB uncompressed and with all options selected), so considerable improvement, especially given the elimination of almost all processing overhead.

Very happy I was prodded into action. Took a little time, but I am much happier going forward.

As part of the re-working, I am in the process of splitting up CSS for conditional loading according to user selections.
Opens up a far greater range of user options, which I am rolling out to module as I go.  
As a bonus, splitting the source CSS up is making it easier for me to track and alter, allowing me to simplify the CSS and balance specificity better.

Always nice when file sizes are going down, not up even though you are adding new stuff :)