PW 3.0.179 – Core updates

[ryan]

ProcessWire 3.0.179 adds great new admin theme customization tools that put you in full control over the admin styles, thanks to PR #189 from @bernhard —

https://processwire.com/blog/posts/pw-3.0.179/

[adrian]

Thank you @bernhard and @ryan

This is really brilliant and exactly the type of skinning ability that I think we've been missing!

[bernhard]

Thx @ryan for all the additional effort you put into this and of course for providing me with all the necessary files and information to work on that PR. I'm really happy that everything worked out so well and I hope we see lots of great designs from some css ninjas in the community ? 

I've created a dedicated thread for discussion and issue reports related to the rock style that might be easier to find in the future:

Happy styling ?

[3fingers]

@ryan and @bernhard, you rock!

Could you please provide some screenshots of the Reno and Rock themes? Thanks! 

[ErikMH]

I’m a nearly brand-new ProcessWire user, and I’ve got to say I’m really impressed — not just with this functionality, but with how easy @ryan and @bernhard have made everything. I installed the new version of PW on my cloud server, installed the Less module, updated config.php and put a few Less statements into admin.less — and had it all working perfectly within about 15 minutes. Nicely done!

[ErikMH]

As things stand, is it possible to get the same sort of functionality for auto-compiling .less files for front-end CSS — like, put the .less files into the right place and add a line to config.php?

If not, I see hints of how I might begin to script that sort of thing in @ryan’s post, but I’m sure I wouldn’t be able to figure out the fancy timestamp checking, &c. (Old-school applications programmer/systems analyst here, but still pretty new at PHP, Unix, &c.) I’m game to experiment, if someone could point me in the right direction.

Thanks!

[Robin S]

Very cool, thanks @bernhard and @ryan!

Any thoughts about supporting an SCSS version of AdminThemeUikit and customising via an admin.scss file? Uikit offers a Sass (SCSS) version and my impression is that SCSS is more popular than LESS.

Google Trends:

One person's opinion from 2015: https://www.telerik.com/blogs/why-bootstrap-4-means-sass-has-won

It would be interesting to conduct a poll of PW users to see which is the more popular CSS pre-processor.

[ukyo]

@bernhard @ryan Thanks for admin theme customization option

But i didn't like uikit source files under AdminThemeUikit/uikit, no need these files. Folder size is big !

I can give an idea about using uikit less or scss files:

- You can install uikit via node with package.json file
- You can load source uikit files from node_modules/uikit/src/less/uikit.less
- You can add node_modules folder to .gitignore
- If a user want to modify admin theme, user can define uikit source from less file

With this way, we don't need uikit source files under AdminThemeUikit folder

[bernhard]

11 hours ago, 3fingers said:

Could you please provide some screenshots of the Reno and Rock themes? Thanks! 

Reno style:

Rock style:

9 hours ago, Robin S said:

Any thoughts about supporting an SCSS version of AdminThemeUikit and customising via an admin.scss file? Uikit offers a Sass (SCSS) version and my impression is that SCSS is more popular than LESS.

Uikit offers SCSS but the PW backend is based on LESS - see the uikit-pw folder: https://github.com/processwire/processwire/tree/dev/wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw

This means that it is very easy to build an admin theme/style based on the core LESS files while it would need a total rewrite using SCSS I guess. I'm not an expert on frontend/CSS stuff. Maybe there are converters between LESS and SASS? I've tried https://less2scss.awk5.com/ and it seems to be working?! Or maybe https://jsonformatter.org/less-to-scss; But I've read some articles now and I'm not sure if a transition would be that easy... 

10 hours ago, ErikMH said:

As things stand, is it possible to get the same sort of functionality for auto-compiling .less files for front-end CSS — like, put the .less files into the right place and add a line to config.php?

You just need the less module and you can use it for your frontend as well: https://processwire.com/modules/less/

$less = $modules->get('Less');
$less->setOption('compress', true);
$less->addStr('@color: #4D926F; h2 { color: @color; }');
$less->addFile('/path/to/file1.less');
$less->addFile('/path/to/file2.less', '/url/to/images/');
$less->saveCss('/path/to/file.min.css');

A simple timestamp checker could look like this:

<?php
$src = $config->paths->templates."myfrontendstyle.less";
$dst = $src.".css";

if(filemtime($src) > filemtime($dst)) {
  $less = $modules->get('Less');
  $less->setOption('compress', true);
  $less->addFile($src);
  $less->saveCss($dst);
}

$url = $config->urls->templates."myfrontendstyle.less.css";
echo '<link rel="stylesheet" href="'.$url.'">';

So the basics are really easy. This does not check if files exist and it does not check for changes in imported files. You can try RockLESS which has options to monitor files and/or directories for changes.

 

[szabesz]

Thanks Bernhard and Ryan!

11 hours ago, ukyo said:

But i didn't like uikit source files under AdminThemeUikit/uikit, no need these files. Folder size is big !

I agree. Especially regarding .../wire/modules/AdminTheme/AdminThemeUikit/uikit/src/scss which is never used.

However, I disagree with "forcing" us to use node.js. There should be no need for node.js just to use core features.

Maybe an additional module which is not bundled with the core but still maintained "as if it was" a core module could solve this. A lot of times there is no need for admin design customizations, for example when just installing PW for "clean install" testing purposes.

What if there were a set of "additional core modules" which can still be installed with a few clicks but kept separately from the main zip file of PW? Ideas for such modules:

• https://github.com/ryancramerdesign/FieldtypeTextUnique
• https://github.com/ryancramerdesign/FieldtypeEvents
• https://processwire.com/talk/topic/2708-module-process-changelog
• https://processwire.com/modules/module-release-notes/

 

[ukyo]

@szabesz

No need new Module for Uikit source files !

Node example only for theme development, if you need admin theme customizations you can import uikit source files on your side. Node usage example is not for ProcessWire users, its only for theme development by @ryan or @bernhard.

User can import uikit source files inside : /site/templates/admin.less

You can add @uikit-source-path variable on wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/pw.less

You can change variable value normally on lately loaded file on less.

// Import uikit, use less variable for uikit source
@uikit-source-path: "../../node_modules/uikit/src/less/uikit.less"

@import $uikit-source-path;

Change @uikit-source-path variable /site/templates/admin.less

@uikit-source-path: 'source/to/uikit/less/uikit.less';

div { border: 1px solid red; }

 

[ryan]

@Robin S Uikit 3 originally had LESS only, and we were an early adopter. I would have preferred SCSS at the time, as I didn't know much about LESS. But I soon learned that there's not that much difference between the two. If you know the basics of one, you already know the other. Now I regularly use both LESS and SCSS and consider them equals for my use cases at least, one of which is maintaining the Uikit PW admin theme. Given two choices I would almost always choose what's less popular. ? (I don't use WordPress either). It might be worthwhile for a major CSS framework to also add SCSS support like Uikit has done, but I think in our case it wouldn't be a good use of time. 

@ukyo There is some stuff we can delete, such as the /src/scss files and /src/js files, which we don't need. But prior to Bernhard's work, I was using Uikit with node and that's not something I'd want to go back to, it was really not a good solution for PW and was the main obstacle towards more happening with AdminThemeUikit. I'm sure it works fine for some, but for me and I imagine many PW users, we don't like having dependencies beyond PHP and PW, especially higher maintenance ones like node and the seemingly endless dependencies on top of it that result. Bernhard solved those obstacles so that now customization of Uikit is easily accessible to all PW users, and while it might consume a little more disk space for the .less files, it's well worth it in my mind. If someone wants to define their own uikit source path, that is also fine too, but the goal here has really been to make the whole thing as simple as possible, so I don't want to require people to download their own separate copy of Uikit, but will definitely get rid of some of the unnecessary files we don't need.

[gornycreative]

I found that it was necessary to do some uninstall/reinstall in order to undo AdminThemeBoss because of how it brings on board its own version of AdminThemeUikit in the /site/ directory.

• Disable the Boss theme
• Go to the UIKit module setting and selection the version in /wire/ rather than /site/ - this should upgrade the module to 0.3.3 from 0.3.0
• Uninstall AdminThemeBoss, delete the plugin
• Delete the folder in the /site/ directory for AdminThemeUikit if it is still there
• Switch your admin profile theme to Default from Uikit
• Uninstall AdminThemeUikit from Modules/core
• Make sure the Less module is installed in site
• Reinstall UIKit in Modules/core

This is what I had to do to get things to compile properly. Deleting the files on baremetal and clearing cache/compiled files etc, refreshing the wire directory from a fresh dev archive, etc. did not work. I had to uninstall and reinstall UIkit fromwithin processwire for the LESS compilations to occur.

Took a little while to get this working, hopefully it saves other time who have experimented with other admin theme modules that mess with UIkit.

[rick]

6 hours ago, ryan said:

but for me and I imagine many PW users, we don't like having dependencies beyond PHP and PW, especially higher maintenance ones like node and the seemingly endless dependencies on top of it that result.

Thank you.

[johndoe]

Just a quick test: dark theme.

For anyone interested, here's the admin.less file: admin.less

 

Edited May 31, 2021 by johndoe
added admin.less

[Ivan Gretsky]

Cool! Looks like we gotta gave a theme switcher module.

[AndZyk]

Thank you for making it easier to style the admin theme. This is way better than building it every time with node. ?

Is it possible to provide also a source map file in addition to the css? I like to search for the variables with the developer tools and this would help me a lot.

I know I can look through the admin theme style, but for example the reno theme uses many own variables instead of the UIkit variables.

Regards, Andreas

[matjazp]

I had some fun too. Created another theme/style based on default reno style but tried to add more contrast (WCAG AA). It's also more in blue tones (but I kept PW pinky color) to match our website color theme. There are also some other tweaks.

admin.less

[adrian]

@ryan - what about a dedicated "Skins" section - maybe within the modules directory. Perhaps the requirement for adding a skin to the directory would be to link to a Github repo with the admin.less and also an admin.png file which could be used on the skin's page in the directory. Ideally I think it would be nice if it was possible to view all skin screenshots via a gallery of thumbnails to make it easy to browse visually.

[matjazp]

And perhaps an option for each user to select it's own skin/style/theme (whatever it's named) in his profile...

[bernhard]

On 6/6/2021 at 9:38 PM, adrian said:

@ryan - what about a dedicated "Skins" section - maybe within the modules directory. Perhaps the requirement for adding a skin to the directory would be to link to a Github repo with the admin.less and also an admin.png file which could be used on the skin's page in the directory. Ideally I think it would be nice if it was possible to view all skin screenshots via a gallery of thumbnails to make it easy to browse visually.

Hey Adrian, I like the idea! But I'm not sure what would really be the best way to achieve something like this.

I've created a module for my style to make it easy for me to maintain it and also it has lots of helpful background information about admin themes/styles:

https://github.com/baumrock/AdminStyleRock

The main reason for putting everything into a module is my git submodule based setup. So I can simply add my theme as submodule and pull and push changes to any of my projects.

My module can also serve as an example for others that want to provide a style for AdminThemeUikit. It could be simplified even more, but maybe it's good to wait a little to see how and if the community will come up with other styles at all?

I think what we have now is only a first step. But I'm really not sure what would be a good next step as there are many good options... ? 

[matjazp]

More fun (can't upload animated gif) with style switcher...