New 'recent', 'suggested', and 'sampled' styles feature – feedback wanted!

Author Posts

Sebastian

Version 5.1.7.6 of Microthemer includes some trial enhancements only available in Edge mode. Edge mode can be enabled via Preferences > General > Edge mode > Yes.

These enhancements focus on making it quicker an easier to apply styles:

* ‘Recent’ styles update as you apply new styles with Microthemer.
* ‘Suggested’ styles for variable inputs like width, margin, opacity etc are based on common usage and best practice CSS units (often rems or %).
* ‘Sampled’ theme styles for a given property can be gathered by clicking the sampling icon in all eligible menus.

These potentially time saving features may need a few development iterations before they are just right. They add a bit more clutter to the dropdown menus, and so this must be justified with tangible benefits. There are currently some question marks in my mind about some of the details. If anyone can spare the time to enable edge mode and see how things work in practice, I would be very grateful to hear your thoughts.

Thank you very much!
Sebastian


QloudPress

I stopped using Microthemer because A) it was too hard to find the right selector. And B) I didn’t want to add yet another style sheet. And finally, C) I thought the pace of development was slow.

To be honest, I am using Yellow Pencil now and loving it.

Something I did like with Microthemer was the ability to add a snippet to the theme’s functions.php so that I could deactivate Microthemer, and still have the generated CSS be active.

But when I thought about it, I wondered why Microthemer just didn’t add the code to the child theme’s custom.css sheet, and not require more PHP code to be added.


cjseven

Just activated and almost missed where those updates are 🙂

I think it would help being more productive, especially the recent styles.


@qloudpress
,
YP seems more user-friendly and newbie-friendly than MT. I like the resizing on the fly, measuring tool, and wireframe features. The animation is also very interesting.

I don’t agree MT development is slow though. Several updates and new features have been added since I bought it years ago. The license model is also different so we should take that into account.

Still an MT raving fan here! 🙂


ddenev

@QloudPress,

I checked YellowPencil and there are some nice features there that could be incorporated into Microthemer as well to make it even better, namely (ordered by importance):

  • The overall speed and responsiveness. YP is indeed impressively fast and MT could improve in this direction as well
  • I liked very much the selector search feature – allows to quickly locate CSS selectors and select them
  • The Wireframe mode is also a nice touch – allow me to focus on styling the layout only. Not a critical feature but something that impresses
  • The Filter property – I didn’t see this in the MT’s roadmap so it would be nice to have there as well

Other than the above, I don’t think that YP is so much better than MT. There are a lot of things that MT has that YP does not (not going into detail cause it’s irrelevant here).

I also do not agree re the development pace. Sebastian is very responsive and does introduce new features quite often. He also listens to his customers, in contrast to some other WP developers out there (check Elementor’s github page). In contrast, the YP’s “External CSS” feature has been in Beta for more than 11 months. How’s that for speed? 😉 And it also writes the CSS in the plugin’s directory – ugh!

I’ll continue my support for MT as well – I believe it will get better and better.


Sebastian

@QloudPress – I understand MT isn’t for everyone. And to be fair, development was slow in 2016 when I wasn’t well. But since then, new features are being added quite frequently. Maybe check back on MT in a year 🙂


@cjseven
and @ddenev. Thanks for the support guys. I’ll prepare a little video explaining my thoughts on the new recent/suggested/sampled styles feature in the next day or two. But in the meantime, please consider the following questions when you’re next working in MT:

1. Do you see yourself using recent or suggested styles frequently, or will you prefer to continue entering the values with the keyboard?

2. Is is too much to have a sampled styles features in the dropdown menus?

3. Does the browser hang when you click the sampled styles icon? If so, please send me a link to your site so I can see how many stylesheets your theme loads. And maybe add libraries e.g. genericons.css to an ignore list.

4. Should suggested styles appear in the recent menu list too after being used? Or does this lead to unnecessary duplication of values in the menu? An alternative could be that styles only appear in the recent list if they are not the same as a suggested value.

5. Should the recent/suggested/sampled lists have a clear icon?

6. Is it too advanced to suggest rem based values over pixel values?

I don’t want to burden either of you with these questions, just in case they resonate with you when you next find yourself using Microthemer.

Cheers!
Sebastian


QloudPress

Sorry to hear you were unwell Sebastian. I hope you have made a full recovery. And yes I am building a new site right now and will definitely try it again. Thank you, and the other respondants for dealing with my objections so positively, and leaving the way open to move forward.


Sebastian

Thanks @QloudPress, I’m here if you need help with anything.


cjseven

@Sebastian,

1. Do you see yourself using recent or suggested styles frequently, or will you prefer to continue entering the values with the keyboard?

RE. Time will tell but I think recent is useful. And suggested too (if there is any kind of coherence on the suggestions intelligence behind it)

2. Is is too much to have a sampled styles features in the dropdown menus?

RE: I didn’t get the sampled… What is this? Does it pick already in use sizes from the site?

3. Does the browser hang when you click the sampled styles icon? If so, please send me a link to your site so I can see how many stylesheets your theme loads. And maybe add libraries e.g. genericons.css to an ignore list.

RE: Didn’t notice any issues yet.

4. Should suggested styles appear in the recent menu list too after being used? Or does this lead to unnecessary duplication of values in the menu? An alternative could be that styles only appear in the recent list if they are not the same as a suggested value.

RE: I think recent should show all recent styles used, even if those are duplicate from suggestions (kind of mental organization – that way I can see what I tried before)

5. Should the recent/suggested/sampled lists have a clear icon?

RE: I don’t see that being extremely necessary but… sometimes it could be useful if we want just to reset all things 🙂

6. Is it too advanced to suggest rem based values over pixel values?

RE: Couldn’t that be defined on settings? I don’t see a problem with that though.


Sebastian

Hey Antonia, thank you so much for your replies to my questions. The fact that you missed the sampled feature shows it probably needs some work!

You can see how the sampled styles should work (for font-family) in this video I prepared:

(link jumps to the 4:08 mark which shows the sampled styles feature).

The sampled heading has a little sampling icon for getting styles already applied by the theme or a plugin for a given property. Can you see that option at your end? Easy to miss that there is an action icon there perhaps.

Cheers,
Sebastian


cjseven

I didn’t miss completely 🙂 What I mean was I was not understanding what sampled means. But the video will help on that.

Thanks


Sebastian

Oh I see! OK, I will think about the labelling might be clearer.


annmariepos

Hi there,
I do like the suggested and sampled style features. And thank-you for a vey clear and concise explanation of the rem font sizing – finally I can understand how it works so with the suggested and sampled features I can easily use it now.
The recent feature would be good while getting used to using the new features, however I agree with you that after a while they may become a nuisance. Maybe a feature that can be turned on or off in preferences?
Overall I enjoy using Microthemer – a really helpful and effective plug-in.
Ann-Marie


Sebastian

Hey Anne-Marie,

Thank you so much for trying out the new features and sharing your opinion. I will take your comments on board when working out the final implementation 🙂

Cheers!
Sebastian


ddenev

Dear Sebastian,

I had played some time with these new additions and here are my comments 🙂

1. Do you see yourself using recent or suggested styles frequently, or will you prefer to continue entering the values with the keyboard?
In terms of increasing my productivity I don’t see a great value in the recent/suggested styles. After some time I find myself directly inputting the values by hand instead of looking for them in the suggestions. The fact is that the suggestions are more of a distraction for me – the time I spent to browse for a possible value to use could simply be used to enter the value by hand.

2. Is is too much to have a sampled styles features in the dropdown menus?
I think so, yes. Honestly, the fact that I have a “width” value somewhere in my page does not help me at all during the time I decide on the width of the selector that I am currently working with.

3. Does the browser hang when you click the sampled styles icon? If so, please send me a link to your site so I can see how many stylesheets your theme loads. And maybe add libraries e.g. genericons.css to an ignore list.
No, it does not, but then again – I do not use that feature 🙂

4. Should suggested styles appear in the recent menu list too after being used? Or does this lead to unnecessary duplication of values in the menu? An alternative could be that styles only appear in the recent list if they are not the same as a suggested value.
To be honest, I would definitely prefer to have some other features added that would definitely help my productivity instead – for example, the MT selector search and the CSS selector search (these are 2 separate things 🙂 ) or the highlighting of the current selector in the directory tree. I am quite desperate for these – find myself missing them every time I start working with MT.

5. Should the recent/suggested/sampled lists have a clear icon?
See 4 above 🙂

6. Is it too advanced to suggest rem based values over pixel values?
No, it’s fine.

All the best!


katw

Suggested size feature
===================
Love the thinking behind the ‘Suggested’ size in REM. I have for many years been using ‘EMs’ and ‘%’ over pixels.

So, I love the idea of suggesting REM values…. but also go so far as to say the logic behind (ie its attachment to HTML tag) is the thing most people will have to get their head around not your proposed implementation.

I would love to have seen this idea extended and applied to EMs; for those still working with this measure. So many themes out of the box control base font sizing in BODY tag…

Showing equivalents and best practice size suggestions in Em format would be just as cool. Perhaps a ‘switch’ for user to say show suggested as [EMs|REMS]

with Sampled styles
=================

Terrific for so many reasons.

They could be made even but more useful if we could choose to save and annotate the sampled size so we have our ‘favourites’ grouped and identifiable.

As numbers they mean little, but as numbers under ‘my fav’ group head they are getting more meaningful and contextual.

Am I correct the sampled styles are user triggered? ie the list only shows sizes ‘I’ have chosen to sample? If this is true then the list will grow and [clear all] and [clear selected one] should be provided (right click on size to remove from list?)

If sampled sizes shows all in stylesheet/theme by default …. this is useful for information; but less useful for user as the context where the size is used is missing. It becomes hit and miss to then apply the size information.

When a user samples a size they learn context and therefore can apply that learning more effectively.

If a sampled size matched a suggested size perhaps a ‘dot’ could be applied alongside the size so the user knows it is one of the suggested.


Sebastian

@ddenev and @katw, thank you so much for your thoughtful comments! I’ve been in the countryside for my dad’s 70th all weekend. And will be travelling back most of the day today. But I just wanted to leave a quick note to say I will reply properly to each of your points tomorrow. You’ve both raised some interesting topics of discussion 🙂

Cheers,
Sebastian


Sebastian

@ddenev, regarding your points above:

1. It’s very interesting to learn that you reverted to entering styles by hand after working with the new style options for some time. Including the recent styles, which I was most confident would be useful. I will keep the new recent/suggested/sampled feature in beta for while longer to give others a chance to share their verdict. I’d like to see if less experienced devs find the suggested styles useful/educative for instance.

2. You are right to point out that knowing general width values applied to the page is unlikely be useful most of the time. I wonder if a case by case approach would be more suitable. Knowing which font families and font-sizes are in use should be useful for applying typography that is consistent with the theme. Colors, text-shadow, box-shadow, margin and padding too for matching styling and spacing. But height, width, and position for example tend to be a bit more haphazard. Whether it’s worth omitting the sampling feature for such properties is something to consider.

3. OK, I’m glad it’s quick for you to use even if you choose not to sample styles.

4. I hear you on the selector search feature. Did you know that you can search the CSS code using Control+F after clicking View > Generated CSS & JS code? Also, the highlighted selector won’t take me long to implement, so I will try to add that when I move onto my list of quick updates (after updating the Google fonts GUI, which I’m half way through).

5. Thanks for confirmation on the rems. And for sharing your honest feedback. It really does help!


Sebastian

@katw, regarding your points above:

I like ems too. I always used ems when rem support wasn’t great, and people used pixel fallbacks. But now that Microsoft has dropped support for old versions of IE, including IE10, that isn’t such an issue. And I feel rems might be a better choice because em compounding can be a pain even for experienced coders that know how to overcome, it or mitigate it happening (most of the time). For less technical Microthemer users, compounding can be as surprising as it is frustrating.

Having said that, I completely see your point about modifying a theme that anchors font-sizes on the body tag. And if you would like to continue using ems as you always have done, em-based suggestions are bound to appeal more. What did you think of the actual values chosen for the rem suggestions. E.g. 1rem, 1.2rem for font-size, 1rem, 1.5 rem for padding etc. Would you want the equivalent with the unit changed e.g. 1em, 1.2em?

Microthemer could allow for configuration of the suggestions with some options to the right of the Suggested styles heading e.g. rem|em|px, which show only when hovering over the suggested styles heading. But one thing I’m weary of with these new styles is going into configuration overdrive. @ddenev found the options to be a distraction, and that’s in their current form.

Another solution that’s bubbling away at the back of my mind if having a context menu for each CSS property. A menu that only shows after clicking the CSS property icon perhaps. This would be used for configuring the features discussed in this thread, along with !important and default CSS units perhaps. Allowing the dropdown menus to remain simple.

This context menu could potentially facilitate your suggestion of saved styles. But I think the effort of creating saved styles would only be justifiable once MTs workspace settings can be automatically synced with the ‘themeover cloud’. These settings would be fetched from themover.com upon unlocking the program. This feature is in the pipeline.

In answer to your question about how styles are sampled – the sizes are for that property only, if that’s what you mean by context. All stylesheets loaded onto the page are checked, and the values for a given property are combined into a list. A separate list for each of MT’s CSS properties.

Thanks again for thinking about these questions so deeply. Your feedback is greatly appreciated!


Sebastian

Hi guys,

I’d love to know what you think of the latest iteration of Suggested styles. It’s still only available in Edge mode. But I’d like to release it soon once it’s passed some user scrutiny.

In summary:

  • There is just ‘Suggested’ styles, and this includes recent styles ordered by CSS unit and then alph-numerically.
  • MT suggests all styles as plain numbers. These will render as pixels by default. But if you enable the ‘px to em’ or ‘px to rem’ unit for e.g. font-size via Preferences > CSS/SCSS Microthemer will auto-convert the pixel value to an equivalent em/rem value. Useful if you like to work with ems/rems but still think in pixels, which I do.
  • Recent styles can be saved so they don’t leave the menu over time. Suggested styles can be saved too. Clearing all suggestions will not clear saved styles.
  • Site styles can be sampled for color, font-family, font-size, and line-height.
  • Suggested styles are accessed via 3 dots that appear on hover for fields that accept numeric values. They don’t show by default when placing your cursor in the field. So should be less of a distraction.

Cheers,
Sebastian

You must login or register to reply to this topic.