Collaboration Between Theme & CSS Style Editor Developers

Taking the next step into the future of the Web.

While WordPress is moving forwards with implementing full site wide editing via blocks, my guess is we won’t see a viable production ready version of this until at least the summer, potentially even the end of the year, as it is a pretty big leap for people. That said, once it is implemented and people understand the huge paradigm shift with it, they’ll love the increased functionality and flexibility. All that said though, what happens in the meantime?

What I mean by this is that I don’t want to have to just sit around and wait another year before I can do anything new with the platform, I want to try to start making step forwards with WordPress in other different ways while this work is being undertaken. As I mentioned in my future of the Web and WordPress post, I think the next step after full site editing will be a unified HTML & CSS framework and even integrated site editing capabilities. The question I have now is can this future feature be emulated in some way right now.

Plugins such as Microthemer most definitely give a person the capability to integrate a visual CSS style editor into WordPress right now. Yet as I noted in my future of the Web post, it’s still a limited experience because every design pack style you can create and even export to share with a friend who could import it, requires that friend using the same exact same theme as well. Even more so, you have to create your own Scaffold (selectors) for each theme you want to use it on, rather than just having them readily accessible from the start (thus making it easier to understand what you’re doing as a new user).

Integrating A Theme & Style Editor As A Unified Package

To me, the ideal situation here is that Microthemer needs to partner with a specific theme developer, whereby the theme developer focuses on the custom functionality and layout side of things while Microthemer focuses on the styling side of things. Together they sell their separate products as an integrated package though, each empowering and simplifying the others experience.

To achieve this though, many things need to be done differently than how they’re currently done. The theme developer is effectively just creating a base template with content or layout customizer options only. Anything relating to styling (i.e. colours, fonts, sizes, etc) would be left out of the customizer. In effect, the most the theme developer creates in terms of styles is a CSS reset and base foundation with default fonts and sizes.

Now Microthemer, as the visual CSS style editor plugin developer, takes the theme from the developer and creates a Scaffold of CSS selectors within Microthemer and applies styles to it. What I just said here may sound obvious but it’s not. The emphasis here is that the actual CSS styles of the theme, beyond the base CSS reset, are actually contained within Microthemer.

Simplifying the End User Experience

Why is this important? Because if you use Microthemer on a theme that has CSS styles already applied beyond just the CSS reset, you create a situation where it can confuse the Microthemer user modifying it. For example, say the theme developer applies a 1 pixel dotted border around a post but Microthemer creates a design pack Skin style which changes that to a 2 pixel solid border around it. Now imagine if a Microthemer user uses that design pack Skin style and modifies it by wanting to remove the border altogether. If they delete the specific Microthemer style on that specific selector, suddenly it defaults to a 1 pixel border and they’re confused, since they thought it would be gone not change to something else.

This is why CSS styles beyond the CSS reset should all be contained within Microthemer. That way if the Microthemer user wants to removes a style on a selector, like a border box around post or a line divider between posts, deleting the styles applied to the specific selector easily achieves this. The other way though, if the theme has CSS styles beyond the CSS reset, to remove them requires actually applying additional Microthemer styles to counteract and remove the original theme’s styles.

Again instead of waiting around for a pair of developers to think about this and do it, I should just do it myself. In effect, I already have Microthemer, so I just need a start theme pack of some kind that has little or no style settings (i.e. fonts, colours, etc) but primarily just content and layout options. I then create the Scaffold selectors in Microthemer for this starter theme and apply a Skin style settings to it.

By Nollind Whachell

Questing to translate Joseph Campbell's Hero’s Journey into The Player’s Handbook for the roleplaying game called Life, thus making vertical (leadership) development an accessible, epic framework for everyone.

Leave a Reply