Guide To Microthemer V4 Changes

Microthemer version 4 is ready for you to download or update via your WordPress dashboard. We’ve jiggled a few things around and added some useful new features. This article covers the main changes.

New Features At A Glance

• Easier to add responsive styles.
• Improved color picker.
• Rulers on the X and Y axis.
• Quick preview feature for common devices added to top left corner of the rulers.
• Ems/rems used in media queries now preview at the correct width on the responsive tabs.
• Specify default CSS units (via the preferences) e.g. ems, vw, % instead of implicitly defaulting to pixels
• Collapse or expand the Microthemer interface by clicking the MT logo.
• Full screen mode.
• Preview selectors when hovering over selector names in the main menu or top toolbar.
• The selector wizard options all display more neatly to the right of the page.

Design Changes

1. The media query tabs are now above the CSS property groups and are always visible. They can be hidden via the Edit Media Queries popup.
2. The folder and selector management options have been moved to the top left.
3. Default computed colors are show by a bottom border on the new color picker field (which is a small square now).
4. The left toolbar icons have been moved to the top right of the interface. Some have been grouped together. Related options display on hover.
5. The responsive slider has been replaced by the rulers. Drag the rulers or click on a point to adjust the screen width. Rulers shading shows the scope of the current responsive tab.

New Color Picker

This one was a long time coming. The new color picker supports RGB/A and HSL/A color codes as well as hex codes. The large picker area gives very finegrained control over color variations. We’ve left some space for color pallettes that will be added in a future version. And a color sampler tool will also be added in time.

Functional Changes

• Microthemer doesn’t use the crosshair mouse icon any more because this was artificially changing the computed CSS for the mouse cursor property.
• The media query tabs do not lock the screen width slider at a minimum or maximum screen width. The shading shows the scope of the media query conditions. And if the user drags outside the scope of the media query a warning icon is displayed in the top left of the rulers.
• Hovering over the selector’s name in the top toolbar temporarily triggers highlighting and auto-scrolls to the right place in the page.
• Continuity has been given precedence. When switching between property groups (e.g. font to padding) the responsive tab never changes. This holds true when switching between selectors. When switching between selectors, Microthemer no longer remembers the property group that was last edited on that selector. It favours continuity and stays on the same property group the previous selector was on.

Paving the way for the future

The idea behind version 4 was to get all of the design changes done in one go so that user adjustment can be a one time thing. Based on your feedback we have a very long list of improvements. Not all of them have been implemented in version 4. But we looked ahead and made sure that features requiring a significant layout change would be preempted in this version. That’s why the selector wizard has been redesigned without any functional changes for instance. This paves the way for a series of features all focused on making it quicker and easier to target elements on the page with selectors correctly.

Some other big features that are hot on our rader:

• General speed optimisations
• An updated custom code editor with support for SASS, SCSS, Javascript, and jQuery code
• Integration with page builders and other complimentary products
• A search function for Google fonts and TypeKit Integration
• An option to auto-name selectors in the wizard (human readable names based on the CSS selector code)
• Import CSS selectors from a user-defined stylesheet
• Better selector targeting features
• Suggested values for input fields based on previously entered values
• Much improved history feature with each action logged clearly for easy undo.

Some smaller but still important features:

• Draft mode for previewing changes before they go live
• The ability to temporarily disable styles for a selector or media query tab
• Get actual unit specified in stylesheet as well as computed px value (if possible)
• The ability to export/import workspace settings (preferences etc)
• Use selector wizard to combine CSS selectors e.g. add h2 to an existing h1 selector using the UI.

But we’re adding more docs first!

Before we do any of the features outlined above we’re going to add more articles and video tutorials, starting with a long overdue tutorial on designing responsively with Microthemer. We held off a doing a bug push on the docs because we wanted to address some fundamental issues with Microthemer before documenting a soon to be outdated system. Now that we’ve addressed those issues, we’re looking forward to showing you how to make the most of Microthemer.

Feedback

As usual, your feedback is always welcome.