Draft mode, SCSS, Custom code in GUI selectors & more

We’ve made some significant improvements to Microthemer. Here’s the lowdown:

Added support for:

• Draft mode.
• SCSS in custom code editor.
• CSS minification.

New menu at top right with labels and toggle switches.

• Option to manually set preview url (replaces option in preferences window).
• Quick links to demo video, responsive tutorial, and forum.
• Exit link to frontend as well as WP dashboard.

And last but not least:

• Custom code can be added to GUI selectors via the <> code icon at the start of the property group icons.
• Optional dark theme available for custom code editor.
• View generated CSS now displayed with syntax highlighting and tabs for SCSS/CSS/Minified.
• ‘Edit with Microthemer’ option in frontend WP toolbar improved.

THE BIG FEATURES

Draft mode

You can turn on draft mode via the General options. So next time you want to try out a bold new gradient on a live site, you can privately check to see if it’s a sensible idea first. To publish changes added in draft mode, simply turn off draft mode.

SCSS (CSS preprocessor) supported

You can now enter SCSS code in the custom code editors. Just enable the SCSS option via the SCSS/CSS tab on the preferences page. You can then enter SCSS mixins, functions, and variables etc anywhere in the Microthemer GUI. One approach could be to add a mixin and variable to the custom code view.

Reference mixins/variables via the new GUI code editor

In the following screenshot, a subtle white to grey gradient mixin (x-gradient) and color variable ($heading_color) have been referenced. Also, a nested h1 heading selector has been used.

New dark code editing theme available

If you prefer writing CSS or SCSS code with light text on a dark background you can now choose a different theme for the editor via the preferences.

CSS Minification supported

Microthemer now minifies the CSS code it generates by default. You can still view the unminified CSS/SCSS output though. Note, this feature is only supported on servers running PHP 5.3 or later. On older versions of PHP, minification will not happen.

Quick edit from frontend

The ‘Edit with Microthemer’ link in the WordPress toolbar now loads what ever page you were on before you clicked it in the preview (rather than defaulting to the last page edited in Microthemer). This should speed up those little tweaks. There is also a new option to exit back to the frontend on the new ‘Exit’ menu.

Manually change site preview URL more easily

You can now enter a different frontend URL for Microthemer to load via an option in the new ‘View’ menu. Enter a full URL or just the URL path and then click the ‘Go’ button. Microthemer will pre-populate a list of URLS as you navigate around your site. This new feature replaces the option for manually entering a preview URL via the preferences.

Feedback

As always, please give us feedback on the changes here.