Uikit 3 admin theme updates

ProcessWire 3.0.77

While there's a new version on the dev branch this week, it contains mostly minor updates that corresponded to some updates in the AdminThemeUikit module. In last week's post, I mentioned the following with regard to that admin theme module:

Now we're going to start with building a version that feels like part of the AdminThemeReno family.

…and that's how things went. This week I've got another update to the AdminThemeUikit admin theme that inherits the colors and several design details from Tom Reno's fantastic AdminThemeReno. Though so far it's just an interpretation of his theme, and we're looking forward to hopefully getting Tom involved in designing/developing the new admin themes too. In this post we'll take a closer look at several screenshots. AdminThemeUikit is starting to look more like ProcessWire and less like Uikit 3. The folks building Uikit 3 have really done a nice job in making it themeable and flexible.

While we've still got more work to do, it is getting to the point where it's starting to feel like home and nice to use. I'm now using it instead of AdminThemeDefault, in part because I just like using it (now that it's got some color), but also because it helps me to spot little issues or things left to cover in development. I'd encourage you to download and try it out too, and let us know how it works for you. I've already got a list of things to cover, so expect to see lots more detail work over the next week as well.

One of the biggest differences between AdminThemeReno and AdminThemeDefault has been that AdminThemeReno has always been sidebar-navigation based, and AdminThemeDefault has always been dropdown-navigation based. While AdminThemeUikit supports sidebars for page tree and offcanvas navigation, I'd say it's more of a masthead-based navigation theme, as I think this covers the capabilities of multi-level nested navigation in Process modules a little better. When it comes to navigation, AdminThemeUikit is kind of a hybrid between AdminThemeReno and AdminThemeDefault.

Part of the intention with developing this Reno-color-based theme was to show how one could theme the stock AdminThemeUikit, as I know there are others interested in working with this admin theme. The entirety of what differentiates the stock Uikit admin theme from the RenoKit theme is all in this file: pw-theme-reno.less. If you remove that file from the bottom of the _import.less file, then it returns to the stock Uikit theme. That's all there is to it.

Screenshots

The login screen:

The main page list (tree) screen, with a dropdown menu open:

Results from the admin search feature:

Example from the page editor, editing a blog post from a few weeks ago:

Same thing as above, but this time demonstrating the datepicker (style from AdminThemeReno):

This screenshot shows the offcanvas sidebar, which can be opened by clicking the ProcessWire logo. This offcanvas sidebar is capable of doing everything that the top/primary navigation dropdowns can do, as they both use the same ajax-driven source for data. In this screenshot, just the user “Ryan” navigation item is open:

This screenshot demonstrates the page editor with language tabs active. Note that unpopulated languages appear in a muted text, like RU and NL in the Headline field below.

The admin theme also supports a 2-column mode where the page tree is in the left column, and everything else in the right.

Example of a 3rd party module in the admin theme (ProCache). Note how the active tab color mirrors the color of the active tab content:

Another example of a 3rd party module in this admin theme. This is the one I use to distribute the ProcessWire Weekly to our email subscribers every week:

Below you'll see an example of message, warning and error notifications:

This is what the page editor looks like when using ProDrafts and editing a draft:

Comments

• 

  abdus

  • 7 years ago
  • 70

  ★★★★★

  I love the color palette. It's not blindingly white and bland like vanilla UIKit, but with the colors that we all came to love. Can't wait to play with that newsletter module too.

  Reply

• 

  Tom Reno

  • 7 years ago
  • 130

  ★★★★★

  Awesome work Ryan! I was able to cruise around this a little, and I really like it. It's a big motivator for me to get my hands dirty and start working on things too. It's amazing to look at the .less file and see how easy it is to theme UIKit. So exciting to see this all coming together — I can't thank you enough for all your hard work.

  Reply

• 

  Tom

  • 7 years ago
  • 50

  I can't wait for you and Ryan to get really stuck in on this, I noticed the push to the admin theme today and it's looking amazing already. Keep up the great work guys :)

  Reply

• 

  Paul Carnevale

  • 7 years ago
  • 40

  ★★★★★

  Really beautiful work, Ryan. I've been following UIkit 3 development the past few months and love the way it's coming along. The progress on this theme is certainly exciting!

  Reply

• 

  gmclelland

  • 7 years ago
  • 30

  I just tried out the new theme. Like, like, like... Great job!

  I actually like the original "Classic" theme. It seemed fresh and vibrant.
  Reno seemed clean and corporate. This new theme combines the best of both themes.

  For those that want to try it out, download and enable the new AdminThemeUikit module. Then go to your profile page and select UiKit as the Admin Theme.

  Reply

• 

  MrSnoozles

  • 7 years ago
  • 40

  ★★★★★

  Looks really good already. I prepared a demo with the ability to switch between the old and new theme and to even create your own ones:

  http://pwadmin.youbility.de/processwire/
  username: admin
  password: admin123

  Reply

• 

  cstevensjr

  • 7 years ago
  • 00

  ★★★★★

  I finally got around to using this Admin Theme. I'm sold, I can now give up the old Default Admin Theme. Very nice work!

  Reply