Uikit admin theme discussion

[fbg13]

Lets discuss the new admin theme, there has been very little talk about it, a few questions about its status and some simple designs by a few users.

Have you played with it? Do you like it? Do you dislike it? Of course I'm not talking about its design, but the way its structured, how it works and the features it offers so far.

------------------------------

I'm working on a purple color scheme for it and it turned out quite well (imo), but one thing I dislike is the use of iframes. I haven't used iframes before so it might be just me, but I'm struggling with them when it comes to javascript.

When iframes are used all scripts are loaded in every frame, which can lead to unexpected results.

Javascript is an easy way to add, remove, move etc. elements in the admin, but the iframes complicate things.

What are your thoughts? Is it just me?

Here's a screenshot of the purple theme:

[Peter Knight]

Personally I like it. I'm using it more and more and hope to get time for a simple theme soon.

If you get a chance, can you document the steps you took to get you customising UIKitTheme?

I know your toolset is probably different than mine and it's about 4 years since I used CodeKit. Possibly thats a stand alone thread titled "Customising UIKit" etc or something?

For example,

• I've installed UIKitTheme and activated it.
• I have a local folder called site/assets/AdminThemeUikit
• Within this I think it's the site/assets/AdminThemeUikit/uikit/custom directory I need to drag onto CodeKit to create a project

From this point I'm a little lost as to where things are.

For example if I want to change the color below to #eb1e62 then where do I locate that

1. LESS file generating the CSS
2. The colour variables 

.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, h1, h2, h3, h4, h5, h6 {
    margin: 0 0 20px 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-weight: 400;
    color: #333;
    text-transform: none;
}

I think I just need a pointer in the right direction and I'll be flying!

 

[fbg13]

@Peter Knight You have to compile the less files. I'm using Koala to compile them. Only the pw.less (uikit/custom/pw.less) file needs to be compiled as it includes all other necessary files.

I add my styling in pw.less (below @import "pw/_import.less"), but you can do it in a separate file and include it in pw.less, or use the files in uikit/src/less/theme if you want to keep it organized.

That's my understanding of it, haven't used less/sass much before.

[AndZyk]

@Peter Knight

Personally I prefer CodeKit, but I would recommend you to use npm to compile the files of UIkit used inside the AdminThemeUIkit as described in the README. This is the recommended way to compile UIkit.

As @fbg13 mentioned I also added my stylings in the pw.less. It is really easy to override the variables of UIkit to make it look unique. 

[bernhard]

what about using less.js for development? it would be as easy as adding one line:

$config->scripts->add('//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js');

 

[Mike Rockett]

Whilst we're on the topic of processors, I've switched over to Stylus completely. The only time I use Sass and Less is when a framework requires it. I've becomed so accustomed to the way stylus works, that if you asked me to type out some Sass, Less, or CSS, you'd find missing colons everywhere.

[tpr]

The very same story here with Stylus. I use it only for about a month or two but wouldn't go back. I get angry when I have to deal with other preprocessors and the curly braces

[fbg13]

The page tree in the sidebar can be a little inconvenient at times, when the sidebar is small and the action buttons span on multiple rows or on mobile devices.

I made them open in a drop-down on click. Here's a codepen.

[SamC]

I've just installed 3.0.83, but what happened to the sidebar option?

The options I have now are:

Masthead only has no sidebar and the other options have the entire page tree in a sidebar. So I go to 'Navigation':

And the options are to either click the logo to go back to default tree list page, or click logo for an offcanvas menu, which is just weird. Who would expect a menu when clicking on a logo?

I would have liked this sidebar menu positioned to the left and kept there, with the masthead doing a disappearing act. Or having a dumbed down masthead when there is a sidebar present.

Modern monitors have a lot of width, why used a masthead and cram everything in vertically?

I feel this makes my editing experience worse than using the older reno theme. The design just feels so unbalanced. You can probably tell I'm not a fan of masthead navigation at all, but of course this is all personal opinion.

These are the best looking admins IMO so I need to look into how to create a custom admin theme in order to emulate something like these.

Of these three, craft is my favourite. I've used it to make a site before and it was extremely nice to use. It's obviously possible with the new uikit so need to find some info on making my own theme. I see in the readme:

"To install a new admin theme, you would place it in /site/templates-admin/ and leave the one that is in /wire/templates-admin/."

...so I guess that's my starting point. Looking at the current uikit admin module files though, I may be in a bit over my head here! Not sure whether you need to make a whole new module of just a '/site/templates-admin/' folder. Can't work out how the module AdminThemeUikit relates to the stuff in templates-admin folder.

[maxf5]

This is what i said a while ago, but i could'nt find any time for it to realise until now:

I'd love this:
- remove masthead
- sidebar (left) always visible
- change icons to uikit3 icons
- breadcrumb on top (with search on the right which i forgot here)
- some design fixes



 

[tpr]

Thanks @Samc and @maxf5, you gave me an idea about the future of my AdminOnSteroids module, rewriting it as an admin theme. This has been come up earlier too but there was no Uikit theme then, now it's perhaps more easy to do this.

[matjazp]

2 hours ago, tpr said:

rewriting it as an admin theme.

Hmm, sound interesting...

[SamC]

I went a bit off topic, but the question remains, what happened to the sidebar option? The video shows a sidebar with the usual pages, setup, templates etc. but the only option I have on the newest PW dev branch is an overlay (when clicking the logo?!) or a sidebar with the tree in it (equally weird),

@maxf5 I think it’s clear that we both want the same thing!

@tpr then drops a big teaser into the game.

[theoretic]

Hi there! And thanks for Processwire!

Just upgraded one of my PW sites to the new core-integrated UIKit admin theme and feel a bit confused. The "old" UIkit theme was in white and blue colors, rather minimalistic and very convenient for intense work. The current color scheme is less convenient: darker colors, rough contrasts. Okay, it's just my personal opinion -- but having possibility to choose different color schemes could be a good idea for this perfect admin theme. In plus, there's no need to build the "white-blue" theme from scratch -- it was already a part of UIkit admin theme recently.

Thanks in advance!

 

[SamC]

I'm having trouble with 'npm run watch' on the included version of uikit with the admin theme. It's not generating the uikit.pw.min.css file as it should when saving the less files.

I'm replacing the uikit directory with the newest github version to see if that helps as per instructions here:

https://github.com/ryancramerdesign/AdminThemeUikit

As far as theming, it seems like all you have to do is modify:

/site/modules/AdminThemeUikit/uikit/custom/pw/pw-theme-reno.less

...rebuild and you're good to go.

Also, removed the white background colour set in:

/site/modules/AdminThemeUikit/uikit/custom/pw.less

Not got as far as any screenshots yet but I've easily changed the colours so far, made a much lower contrast version with grays & teal. Come to think of it, I can't add any screenshots anyway because I've run out of upload space!

[tpr]

21 minutes ago, SamC said:

I can't add any screenshots anyway because I've run out of upload space

If you have an own server you can upload images there and link to them. I sometimes do this, which also has the benefit that I can modify images easily if I need to, and they will remain there whatever happens to the forum.

[SamC]

Hi @tpr thanks for the advice. I use dropbox a lot so I guess I could upload to there.

= EDIT =

I stuck an image in dropbox, shows the kind of theme I'm looking for. Certain things don't work, the login form is awkward as the fields and the labels have separate background colours, which is set to white. Not sure why, as the white is inherited from the page background colour. Anyway, the image from dropbox:

The contrast between the teal and grey could be improved, but I find something like this much more relaxing than a dark masthead/white page combo. I don't mind the large page title, but I do mind the fonts, the buttons remind me of Verdana 10px from websites c2000. The tab fonts should be bold etc.

Changing font weights easily is not something I see here in the reno less file.

Not sure if it's a good idea to use google fonts here though (although a nice simple solution!).

[SamC]

Took it one step further, and with a bit of hackery on the templates and the module file, got my sidebar in and various other tweaks. Not properly responsive, breaks some theme settings, the breadcrumbs are ropey, the sidebar is not full height (or fixed), less needs serious refactoring. Not sure why the masthead is a fixed height, but anyway, this is what I want my admin theme to look like  

I personally think you don't need theme settings for layout, for me it just makes the admin theme harder to tweak. Why not just have a theme that does one thing?

I don't want to use jquery layout, or any fly in anythings, other than the sidebar on mobile. It doesn't need to be overcomplicated.

Would be awesome to get something like this working properly so it could be a proper admin theme. I'm a bit stuck on the php side of things, I can handle the less (need more practice with uikit though for sure). I'm more than willing to team up with someone if they like the idea/look of this.

[theoretic]

Since no one tried to revive the "oldish" UIKit theme -- i did it.

• Moderate contrast
• Non-aggressive color scheme
• Light colors, no dark backgrounds
• Very close to the original UIKit design

Feel free to replace the /wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.pw.min.css with the file i upload here. Hope it will be useful for community.uikit.pw.min.css

uikit.pw.min.css

[bernhard]

hi @theoretic

this looks very nice. I'm just not sure about the blue link color... 

I think the main problem is that there is no guide at all of how to customize the uikit theme properly. Maybe you could share what we have to do in a tutorial?

[theoretic]

@bernhard , thank You ! It's nice to see that i can do something useful for the community. I clearly understand that anyone can have his own preferred colors, but the convenience and positive UX can be achieved if we will accept some simple design rules.

1. Consistency. Any color, any font variation should have the same meaning across the whole app. E.g. every link should be blue, every visited link should be grey and so on. The current AdminThemeUIKit has no major drawback of this kind.
2. The link and button colors should mean what they mean in common. The blues and greens are the metaphor of something positive, greys are neutral, light greys are about something disabled and/or inaccessible. As for reds -- they're commonly threated as a sign of risk and a metaphor for dangerous actions. Here lies one of the important drawbacks of current AdminThemeUIKit . Every link is red -- why? The "positive" buttons like "Add new something" become red when hovered -- what is the reason? Okay, we humans are able to quickly adaptate to almost everything. But adaptation always means discomfort and perplexion.
3. High contrasts and bright colors are for wow effect only. Admin interfaces need the light, moderate-contrast and calm appearance. The current color scheme of AdminThemeUIKit has the major drawback of high contrast and bright colors. Details are below.
4. The bigger area we fill with color the less bright and less saturated this color should be. Just imagine the AdminThemeUIKit's header totally filled with red: it will be extremely annoying. The current almost-black header fill is also far from being ideal. Too dark, too saturated, too much contrast with the rest of the page. This big area needs a light, low-brightness, low-saturation filling. On the other hand, the textual links deserve the bright and highly saturated colors (but not reds please, at least for "positive" links).

Hope this will help. And thanks again for a perfect product!

[theoretic]

@bernhard sorry, i though You mean the design approach not the technical realization. I just did some auto-replacements in /wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.pw.min.css . The better way will be to do the same with /wire/modules/AdminTheme/AdminThemeUikit/uikit/dist/css/uikit.pw.css and then to minimize it using Your preferred tool.

[SamC]

@bernhard I’m working on a tutorial for this i.e. compiling from source with node/npm and editing the less files. I’ll include my starter (less) file which allowed me to easily change the colour schemes as shown in my vid: https://www.youtube.com/watch?v=cKlzg_kIi-w

It’s pretty simple but the only problem I can see is that copying the module to ‘/site/modules/‘ means you have to keep the admin theme updated yourself. There appears to be no way to simply use a css file (in the module config) because the icons then don’t point to the correct locations and modifying the paths in the original less files for this module was a huge pita so I ditched that idea.

The way @theoretic did it above means the icons point to the correct locations but (a big but) this means modifying a core module.

 

[bernhard]

@SamC great. Maybe you want to use less.js (http://lesscss.org/#using-less-third-party-tools) to show a very simple way of playing around with the admin themes LESS files? We could even build a theme generator using less.js and/or AIOM's php based less parser... Changing colors of the theme should be a lot easier than downloading source files, compiling everything, uploading...

[theoretic]

@bernhard , @SamC , it's great what You're planning to do, but maybe it could be better just to provide some different compiled css files inside AdminThemeUIKit and to give users a possibility to switch between them?