Admin theme development
Posted: Mon Jan 09, 2017 4:27 pm
I have created a custom admin theme based on the code of OneEleven in version 1 of the CMS that I’m currently adapting for version 2 and in both versions there were/are a few things that have interfered my process or are annoying, and I’d like to bring that up and get some opinions (or, even better, make a difference). And please, anyone of the dev team, don’t feel offended by my suggestions; this is in no way personal, I hope to be as constructive as possible.
From the perspective of a front-end developer there are two major things of concern for theme/UI design:
Issue 1:
As of late I occasionally see some HTML that appears to emulate Bootstrap creep up in the admin theme, with things like <div class="span5"> etc. polluting the markup. This is kind of problematic as it implies some kind of layout/look that can’t be known by HTML (and isn’t supposed to be HTML’s concern, anyway). Especially when it comes to responsive layouts, presentational attributes make no sense since the layout can (and has to) change completely depending on the viewport size. But not just for responsiveness, also the fact that a user interface like this can generally have a completely different look. My custom theme has the main menu at the top, with dropdown menus, as the old themes used to have, and I have the tabs on the side instead above the content area (see attached screenshot). Suggested solution:
Create a custom HTML “framework” specifically for the admin interface, or a ruleset for template development, for that matter, that is “style agnostic”, i. e. doesn’t assume a certain look/layout by adding presentational classes etc. If it is appreciated by the developer team I would gladly come up with some sample templates or guidelines to further discuss the approach to take.
Issue 2:
This is kind of related to the above – since CMS version 2 some contents such as the Content Manager or help text are loaded asynchronously. While that in itself isn’t particularly problematic the way it is presented is, again, imposing a certain look on the theme designer that isn’t necessarily desired. The help text is loaded in jQuery UI templates that are inserted at the very end of the document and that assume the theme designer/developer wants do show it as dialog overlay. But perhaps they want to show it directly associated to the control to which it belongs (i. e. directly under the label or field as part of the content, not as overlay)? And again, it doesn’t take responsiveness into account.
Suggestion:
Insert asynchronously loaded content where it would logically/structurally be expected, using minimal markup that is, again, style agnostic and let the theme designer decide which UI style to use. They can then choose whatever method (JS library, custom vanilla JS, …) to manipulate that markup and display it as desired.
How does that sound? Any objections?
From the perspective of a front-end developer there are two major things of concern for theme/UI design:
Issue 1:
As of late I occasionally see some HTML that appears to emulate Bootstrap creep up in the admin theme, with things like <div class="span5"> etc. polluting the markup. This is kind of problematic as it implies some kind of layout/look that can’t be known by HTML (and isn’t supposed to be HTML’s concern, anyway). Especially when it comes to responsive layouts, presentational attributes make no sense since the layout can (and has to) change completely depending on the viewport size. But not just for responsiveness, also the fact that a user interface like this can generally have a completely different look. My custom theme has the main menu at the top, with dropdown menus, as the old themes used to have, and I have the tabs on the side instead above the content area (see attached screenshot). Suggested solution:
Create a custom HTML “framework” specifically for the admin interface, or a ruleset for template development, for that matter, that is “style agnostic”, i. e. doesn’t assume a certain look/layout by adding presentational classes etc. If it is appreciated by the developer team I would gladly come up with some sample templates or guidelines to further discuss the approach to take.
Issue 2:
This is kind of related to the above – since CMS version 2 some contents such as the Content Manager or help text are loaded asynchronously. While that in itself isn’t particularly problematic the way it is presented is, again, imposing a certain look on the theme designer that isn’t necessarily desired. The help text is loaded in jQuery UI templates that are inserted at the very end of the document and that assume the theme designer/developer wants do show it as dialog overlay. But perhaps they want to show it directly associated to the control to which it belongs (i. e. directly under the label or field as part of the content, not as overlay)? And again, it doesn’t take responsiveness into account.
Suggestion:
Insert asynchronously loaded content where it would logically/structurally be expected, using minimal markup that is, again, style agnostic and let the theme designer decide which UI style to use. They can then choose whatever method (JS library, custom vanilla JS, …) to manipulate that markup and display it as desired.
How does that sound? Any objections?