Microthemer is a Live CSS editor plugin, competing against plugins like CSS Hero and Yellow Pencil. And if this is your first time hearing about MicroThemer, you’re in for a treat.
That’s because Microthemer is one of the most impressive plugins you’ve never heard of. It’s not a mass-market plugin run by a giant dev studio. It’s a passion project maintained by a solo developer who truly cares about his work — and it shows.
Microthemer Quick Summary:
- Visual design your site and the plugin generates all CSS code for you
- Built-in targeting mode for choosing the right selectors
- 300+ supported CSS properties including position, flexbox, grid and animation
- Lightweight, won’t slow down your site
- Can export the CSS file (and remove the plugin if desired).
- Only Live CSS Editor that supports Flexbox and Grid
What is Microthemer?
Microthemer is a visual CSS editor plugin. It lets you target and generate CSS rules without actually writing the code yourself. You use the visual UI to create selectors, target elements, and adjust CSS properties.
Unlike text-based CSS editors, you don’t have know any CSS to use Microthemer (though it does help if you understand the basics of CSS selectors).
Who should buy Microthemer?
Microthemer is perfect for both professional designers with CSS skills as well as aspiring amateurs who can barely write CSS code.
If you’re a pro, it will speed up your workflow and help keep your selectors organized. If you’re a novice, Microthemer gives you powerful design capabilities you could only get from a page builder (and more besides).
Microthemer follows a freemium pricing model. There is a limited free version available in the official plugin repository.
However, Microthemer Lite is severly limited so it’s only useful if you want to make a a handful of changes to your site. It only lets you style 15 elements (total) and doesn’t include the flexbox and grid features of the Pro Version.
How much does Microthemer Cost?
Microthemer Pro starts $49 for a single site, and goes all the way up to $499 for a lifetime developer license (unlimited sites).
Microthemer is definitely on expensive side, and the cost-per-domain is not very generous unless you get the developer version. That said, it has features that you can’t get from any other plugin so it’s well worth the cost for the right user.
All Microthemer licenses are available yearly or lifetime. There is one quirk, however. The licenses are priced per domain, not per active install. This means you can’t reclaim a used license by deactivating Microthemer on that domain. You also can’t access the pro features without activation.
It’s one of the more restrictive licensing models I’ve seen, and to be honest I hope the developer modifies the structure in the future to be a bit more generous.
Let’s dive deeper into Microthemer’s capabilities, so you can really get a feel for how it works and what it can do for you site.
First off, let’s look at how Microthemer handles CSS selectors and targeting.
Targeting & Selectors
Because Microthemer writes valid CSS code, all rules must target actual CSS selectors, such as element names, classes, and IDs.
Of course you don’t have to type these in manually, Microthemer has a visual targeting mode that lets you point-and-click to choose selectors.
Microthemer also has a built-in code inspector, just like Chrome and you can step through the HTML to choose the exact element you need.
Auto-suggested selector Names
Once you’ve chosen an element, Microthemer will auto-suggest possible selectors you can use. This helps you target the exact elements, classes, and pages you want to.
You can choose whichever suggested selector is the best fit, or manually write your own if necessary.
Once you create a selector, you can give it a custom name and it will be saved for easy re-use later. Microthemer stores saved selectors in Folders. You can create and arrange folders as you see fit.
This makes it easy to add new rules to an existing selector, without having to browse the actual CSS or remember what combination of selectors you used.
Supported CSS Properties
Microthemer supports hundreds of CSS properties, all of which can be accessed with just a mouse click.
They’re organized by category on the left-hand panel, which makes finding the correct property pretty simple once you’ve used it for a few hours. I do wish their was a search feature, however, which would make the UX even faster.
Example CSS Properties
Here’s a quick sample of what you’ll find in each category:
- Font: Family, size, weight, color
- Text: Alignment, transform, word spacing
- List: List-style-type, list-style-position
- Shadow: Box-shadow
- Background: Background image & color
- Gradient: Gradients
- Shapes & Masks
- Filter: CSS Filters like blur & hue
- Dimensions: width, height, max-width
- Spacing: Margin & Padding
- Border: Border & border-radius
- Flexbox: All flexbox settings
- Grid: Grid builder and grid settings
- Position: CSS position
- Transform: Skew, rotate, translate
- Animation: keyframed animations
- Transition: transition property for auto-animation
- Behavior: display, overflow, visibility & opacity
And this is just a partial sampling. In truth, Microthemer supports nearly every CSS property that has widespread support in modern browsers.
Flexbox is the most helpful feature in the history of CSS (along with Grid). It simplifies the previously tedious task of laying out containers in responsive column and row layouts.
In fact, I use flexbox and flex containers in nearly every snippet of CSS for components that contain 2 or more nested divs. It’s insanely useful.
However, Flexbox can be confusing for beginners.
But not with Microthemer. It includes a complete flexbox layout system which makes it quite easy to create and manage your own flex containers and flex items. All you need is a basic understanding of how flexbox works, and Microthemer does the rest.
CSS Grid Layouts
If Flexbox is the gold standard of layout control, Grid is the holy gray. It makes things possible you never imagined (like reordering HTML elements using just CSS).
Imagine drawing a layout on graph paper, and sticking elements wherever you want using a few lines of CSS. That’s what grid does. It’s amazing.
And like flexbox, grid can be intimidating for beginners (even more complicated).
But Microthemer makes grid incredibly accessible, even for CSS novices. You can literally draw your grid visually, then drag and resize elements to place them wherever you want. You don’t even have to know how it works.
To create a custom grid layout with Microthemer:
- Draw your grid dimensions
- Place and resize elements in the grid
- Choose your column and row sizes
- Set grid gaps (space between grid items)
Microthemer is the only CSS editor that includes full grid layout capabilities.
This feature by itself is worth the cost of Microthemer. It’s incredible and will save you so much time building complex layouts and making them responsive.
Animation & Scroll Events
You can set the timing, duration, repeat, and delay for these animations, as well as the triggering event.
Microthemer has more than 30 pre-built animation types, like bounce, hinge, flash, rubberband, slide, fade-in (or out), and dozens more.
And of course you can use your own custom-defined animations as well.
Learn more: Microthemer animation documentation
Media Queries / Responsive
Responsive web design is absolutely essential in the age of smartphones, where most browsing is now done on screens narrower than 600 pixels.
Microthemer makes it easy to build responsive designs, thanks to the built-in media query controls.
Microthemer ships with pre-defined breakpoints, but you can also define your own custom breakpoints (and save them for easy re-use).
- All devices
- less than 1200px
- less than 980px
- less than 768px (tablet)
- less than 480px (phone)
Once you select a breakpoint, Microthemer’s live preview window changes to that width, allowing you to preview your design at the correct size as you work.
All properties you modify while in responsive mode will be wrapped in a media query and only apply to that screen size. Microthemer handles this seamlessly behind the scenes, you never have to write a media query yourself.
In addition, there are several other features worth mentioning:
- Draft mode
- Revision History
- CSS Export
- Google Fonts integration
Draft mode lets you use Microthemer on a live site, without visitors seeing the changes as you work. In draft mode, all changes are only visible to Admins, until you ‘publish’ the design and push it live to your site.
Microthemer saves a history of every CSS change you make to your site, allowing you to easily undo changes with a click or revert back to a previous version of the design.
You can adjust how many revisions to keep in your Microthemer settings. Rolling back design changes is truly a life-saving feature. I love it.
You don’t have to keep Microthemer installed on your site to use the generated CSS. Instead, you can export the CSS file and load it automatically with a simple PHP snippet (generated by Microthemer).
This is perfect for freelancers or agencies who don’t want their clients to have access to Microthemer after a design is complete. You can always re-install Microthemer later and pick up your design where you left off.
Access the full Google Fonts library in your designs (using CSS @import). This is great for testing different font combinations on your site. Just be careful of how many different fonts you use in your design or load times could take a hit (I’d stick to 2-3 max).
Page Builder Integration
Microthemer has built-in integrations with many popular page builders, including:
- Beaver Builder
It auto-detects when a page builder is active and allows you to use both simultaneously on the same canvas. There’s even a dual-screen mode that works with Elementor and other page builders.
Here’s a video of Microthemer in action with Elementor:
Microthemer is a perfect addon for almost any page builder, even incredibly capable builders like Oxygen.
Building complex layouts with Microthemer is faster than trying to re-create designs with built-in page builder controls. And, by using CSS classes instead of one-off selectors (which Elementor and Beaver Builder use), you’ll end up with a lighter page and faster load times.
Overall, Microthemer is an incredible plugin. It is well designed, intuitive, and loaded with features. There really isn’t any other WordPress plugin that can match it feature-for-feature.
Microthemer supports the largest list of CSS properties, and is the only CSS Editor plugin to offer both Flexbox and Grid layouts.
The animations library is a nice cherry on top (if you want to create some really eye-catching motion designs).
Design & UX
Microthemer’s layout is really well thought out. The UI is intuitive and all the controls are pretty much exactly where you’d want them. It’s honestly incredible that this plugin was built by a solo developer.
I have literally no complaints or critiques. In fact, the only wishlist feature I’d add would be a search function for quicker access to CSS properties.
Verdict: Should you buy Microthemer?
Microthemer is a massively powerful tool that I’ve added to my toolkit. It saves me time and helps me build professional looking designs quickly. It also makes it possible to build layouts that would be nearly impossible in Gutenberg without custom CSS.
Microthemer will be a great plugin for many (but not all) users.
Let me break it down for you:
- Anyone who understands the basics of CSS selectors but struggles with property names and syntax
- CSS beginners looking to learn as they go
- Skilled front-end developers looking to speed up their workflow
Basically, if you would be writing (or trying to write) CSS for your site anyway, Microthemer will help you do it faster (and better).
- Complete beginners who don’t understand what a CSS selector is and don’t want to learn.
- Anyone who is severely design-challenged
While you don’t have to write any CSS to use Microthemer, you do need to understand the basics of how CSS selectors work. You also have to know what CSS properties do, in order to apply them intelligently to your site’s elements.
Also, if every page builder design you create looks like a Rorschach test, Microthemer isn’t for you. It’s too much power in the hands of someone who isn’t ready to wield it (no offense).
Alternatives to consider
While Microthemer is (in my opinion) the most powerful visual CSS editor, that doesn’t mean it’s the best option for you.
CSS Hero and YellowPencil are both terrific alternatives.
Here’s how to choose between them:
- CSS Hero: Perfect if you want the simplest interface, the most pre-built designs, or you’re using a theme with official CSS hero support (for easy styling of theme elements)
- Yellow Pencil: Tons of features and the most affordable option for 1 (or two) domains. Great for users without a ton of sites.