New blog post: Working towards a new admin theme

[ryan]

This week we’ve started developing a new admin theme for ProcessWire that aims to be a community collaboration. We’ve now got some good momentum with lots to share in this post. We also get into some technical details and have screenshots as well.

https://processwire.com/blog/posts/working-towards-a-new-admin-theme/

[renobird]

Looks great Ryan! 

[Sergio]

Ryan, it looks really great indeed! A great improvement on the theming capabilities! Looking forward to create a dark theme on it!

[Robin S]

Looks very clean and sleek.

I'm a little concerned the default UIkit styling of some components takes the minimalist aesthetic a bit too far. There's a point where the visual metaphor breaks down and usability suffers. Take the 'tabs' component...

In the first screenshot it is much more obvious:

• that it will respond as a tabbed interface as opposed to some other type of navigation
• which tab is active
• which parts of the page are contained within the area the tab navigation controls (e.g. you can see that the "Save" button is outside the tabbed area).

 

Edit: I realise that UIkit will only provide the foundation styling for the admin and will be customised for use there. So this is more just an observation about the decisions made by the UIkit designers rather than something that will be a problem for the finished PW admin theme.

[adrian]

29 minutes ago, Robin S said:

e.g. you can see that the "Save" button is outside the tabbed area

I completely agree - subtle stuff like this makes all the difference in letting you know how something will behave!

[teppo]

Having a proper front-end framework power our.. umm, back end.. is a great idea. While keeping dependencies as low as possible makes sense and has, in my opinion, proved out to be a great strategy so far, this is one of those cases where an outside component just plain makes sense.

My hope is that this will also simplify the workflow for module authors trying to match the look and feel of existing admin theme(s). Currently you basically have to target a certain admin theme, and even then you'll probably end up inventing a few UI features / components of your own. Not a very good situation for providing a consistent experience for end users 

Have to agree with @Robin S. I enjoy simplicity as much as the next guy, but the default tab component in Uikit is just plain bad in terms of both usability and accessibility. Another thing that slightly bugs me in current design (which we probably shouldn't be commenting on, considering that it's obviously not the final one) is the low contrast: that's a really common mistake in terms of accessibility, but luckily it's also really easy to fix.

[marcus]

19 minutes ago, teppo said:

 

Have to agree with @Robin S. I enjoy simplicity as much as the next guy, but the default tab component in Uikit is just plain bad in terms of both usability and accessibility. Another thing that slightly bugs me in current design (which we probably shouldn't be commenting on, considering that it's obviously not the final one) is the low contrast: that's a really common mistake in terms of accessibility, but luckily it's also really easy to fix.

 

Exactly what I was going to write, but you were quicker.

I think we should put an emphasis on accessibility when creating this new admin theme. Not just only color contrast but also regarding keyboard-only usage and usage with assistive technologies like screen readers. Creators of WordPress and Drupal already aim for ATAG (Authoring Tool Accessibility Guidelines) compliance, e.g. here and here and ProcessWire should do so as well

Although I'm no professional in this topic I'd love to help with audits and Pull Requests.

Edited February 11, 2017 by marcus

[szabesz]

Thanks to UIkit 3 being hookable, it is really easy to change the look of any componenets: https://getuikit.com/docs/less#use-hooks

Even this is supported:

"Should there be neither a variable nor a hook available, you can also create your own selector. ... This will sort your new selector to the right place of the compiled CSS file."

Edited February 11, 2017 by szabesz
typo

[szabesz]

It might be obvious but I would like to point out that this would be the right time to implement most (if not all ) of the features of  AdminOnSteroids

which means at least a built in admin theme settings page to customize things to our liking, similar to AOS. However, there are features in AOS which can even be made better when implemented as integrated parts of the admin theme, such as "hiding"/revealing the Descriptions and Notes of fields.

Having Descriptions and Notes around is extremely useful, but only in "development mode". When things are set up, they just take up space, distracting navigation and focusing, so I generally "hide" them by AOS (turning them into tooltips), but oftentimes I disable AOS, just to be able to skim through them quickly.  Enabling/disabling AOS is not the best solution, because I loose all other functionalities of the module, but a native admin theme feature like this would only switch the relevant option of the admin, not all the others all at once. This can even be taken to the next level by being able to specify it on a field-by-field basis.

The above mentioned example is just one, AdminOnSteroids is full of handy-dandy goodies that could boost the new admin theme a lot if implemented in an integrated manner.

 

[LostKobrakai]

AdminOnSteroids is nice and it's features should be evaluated for the new admin theme, but I'm not sure there's even remotely the need to implement them in the core like you're describing things. The core should not strive for feature completeness, but rather in the direction of the simplest possible subset of features needed by most of our users. Everything else is a matter for optional (core or 3rd party) modules. Talking about your example I'd imagine that hiding description/notes is rather a anti-pattern for most use-cases as they're usually filled with information the editors/moderators of a site tend to forget but are important none the less.

[modifiedcontent]

I thought Reno was going to be the new admin theme. Or that the new admin theme would be based on Reno. What happens to Reno?

Will the new admin theme work better on mobile? In particular getting the Edit and View etc buttons to show up.

[szabesz]

33 minutes ago, szabesz said:

This can even be taken to the next level by being able to specify it on a field-by-field basis.

That is why I wrote the above. Some instructions are very important all the time, some (lots...) can be hidden though when no longer needed. @tpr had to "hack" a lot of things just to realize a lot of features of AOS that will propaply break with the new theme.

11 minutes ago, LostKobrakai said:

The core should not strive for feature completeness, but rather in the direction of the simplest possible subset of features needed by most of our users.

Generally true of course, however, most AOS users use most (and definitely not all) the features of the module, which boost productivity.

Edited February 12, 2017 by szabesz
typo

[tpr]

There was a blog post that the new admin theme will have some kind of sidebar if I remember right. Is this idea rejected?

[szabesz]

3 minutes ago, tpr said:

There was a blog post that the new admin theme will have some kind of sidebar if I remember right. Is this idea rejected?

Ryan says in his new blog post: "For instance, if you like a 2-column layout (like Reno) rather than 1-column layout (like Default) then that's a simple matter with the built in grid system. Nothing is set in stone, and our focus is on establishing the system to provide the path and flexibility for it all."

also:

"So what I've been doing here is coming up with a basic admin theme profile that the skilled designers in our community can then run with. My hope is this will be a collaboration where we'll come up with the best admin themes anyone has ever seen for any CMS. As a community, we'll want to select one or two that we can also bundle with the core in ProcessWire 3.1 as well."

Well,  +1 for a sidebar, but even better to have a setting that moves the menu from the top navbar to the sidebar and vice versa  

[LostKobrakai]

17 minutes ago, szabesz said:

Generally true of course, however, most AOS users use most (and definitely not all) the features of the module, which boost productivity.

Yeah, but please also consider the subset of users not even using AOS. 

[szabesz]

19 minutes ago, LostKobrakai said:

Yeah, but please also consider the subset of users not even using AOS. 

 Sure! But the "main feature" of AOS is that is has on/off settings for each feature it implements.

Anyway, I find it hard to see that having "three or four" admin themes around is better than a single but configurable one. You suggest modules to modify the admin theme by module developers, but which one when there are more than one? @tpr had to put some extra work into his module just to support the current two. Will he has time to support even more? Or anyone else, for that matter? Why not dedicate our time to only one, but a configurable admin theme, rather than spitting out "a lot", trying to customize them via modules later on?

I might be wrong here, but this is how I see it at the moment.

[tpr]

I'm not sure how the custom grid feature will be implemented, we have to wait to see it in action. The sidebar is something I would really miss.

[Tom.]

@Robin S I understand your concern, however this is default but will not remain default. What I get from this blog post is Ryan wants to work with the designers on this forum to customise UIKit using it's built in classes to create a front-end which will be ProcessWire's new default.

I personally love the new simplistic approach and it's pretty much an empty canvas for us to inject some personality. For our website  - http://peterandpaul.co.uk/ we use our own customised version of the backend.

 

[Marc]

I'm super excited by this announcement. I've always felt the default admin theme looks a little too utilitarian. The screenshots already look lovely, can't wait to try this out!

I started using Uikit again with the release of the latest PW site profile, after abandoning Uikit 2 years ago in favor of something smaller and more customized, but using Uikit 3 has been a pleasure so I'm glad to see it become available in the admin as well. Exciting times for Processwire developers! 

[renobird]

I'll be reworking the Reno Admin theme to take advantage of UIKit and all the refactoring Ryan is doing.

[szabesz]

2 minutes ago, renobird said:

I'll be reworking the Reno Admin theme to take advantage of UIKit and all the refactoring Ryan is doing.

How many admin themes are we going to have? This is not clear to me. We can expect UIkit 3, that's great However – just as I stated above – I'm a bit concerned about seeing people working on different admin themes instead of joining forces... I might be misunderstanding something here, I dunno. 

[renobird]

I've had a 95% functional version of Reno that allows you to pick between the sidebar and topnav for a while now. I just haven't had the time to track down the last few issues, so I haven't released it. I think that is something that should definitely make it as a configurable option into the new theme. I don't think it will be that difficult using UIKit. I think there are some nice ideas in AdminOnSteroids, but I tend to agree with @LostKobrakai, that many of them should be left to AOS to implement. I'm sure there are some AOS features that should be considered for the new theme, but personally I rather see clear means of manipulating the admin for AOS (or any other 3rd party developer) rather than have a ton of config settings in the core. 

[renobird]

2 minutes ago, szabesz said:

How many admin themes are we going to have? This is not clear to me. We can expect UIkit 3, that's great However – just as I stated above – I'm a bit concerned about seeing people working on different admin themes instead of joining forces... I might be misunderstanding something here, I dunno. 

I think we are talking about 2 things here. If the new default ends up covering everything that Reno does, then it will be obsolete and no longer developed. If not, we are really tied to using Reno here, so at first I'll be making sure it works (as-is).

 

[adrian]

Just my 2 cents, but I'd rather see just the one official admin theme that supports top and side menus. The key thing is that I'd like to have that official theme easily skinnable. I would love the options to color and style the theme with CSS while keeping all the html and php standard. The problem with some of the third party themes back in the early PW 2 days was that new features added to the default theme never made it to the third party themes.

I'd also love to see the page tree in the sidebar and the other menu items (setup, modules, access) in the top menu. I am not certain, but I think now that the page tree is cached it won't be a performance issue to have it in the sidebar anymore?

[LostKobrakai]

I've to agree with adrian. I'd also like to see api access to those theme colors, so if one does need to add custom styles in modules, they update with the theme settings.