New Flexbox CSS Properties
We’ve kicked off Microthemer’s CSS property expansion with CSS flexbox properties. This will be good news for those of you that have been adding flexbox styles via the custom code area up until now. For those of you that haven’t tried flexbox yet, or would benefit from a 14 minute refresher course, please check out our new flexbox video which details all of the properties and explains the key concepts. It also provides some sample HTML for you to get started with flexbox. Note: flexbox GUI properties are only available with the premium version of Microthemer.
Optional Text Labels
You may notice some new text labels from the header image at the top of this article. These new text labels are optional, and are not currently enabled by default. But you may find them helpful:
- If you’re just getting started with Microthemer.
- You’re trying to learn new CSS properties.
- You’re a developer that recognises CSS syntax.
- Or you’re returning to Microthemer after some time away.
You can toggle text labels on and off via Microthemer’s View menu. It’s also a good idea to learn the keyboard shortcut Ctrl + Alt + L (Command + Alt + L on Mac). There is a trade off in vertical space for the site preview when labels are enabled, and so having an easy method to switch labels on an off may be quite handy.
Faster, More Reliable Selector Sorting
Transferring selectors from one folder to another wasn’t as quick and easy as it could have been. Particularly when lots of selectors had been created. Some users reported a bug where selectors could only be dragged between certain folders. This prompted a reworking of the drag and drop system for selectors. The new system taps into the browser’s native HTML5 drag and drop behaviour. As a result, dragging selectors between folders and reordering them inside the same folder is faster. The bug has been fixed. And it is no longer necessary to open the receiving folder before dragging a selector into it. Just hover the dragged selector over the receiving folder’s folder icon.
What’s Next on the List?
CSS animation properties!