As you’re planning on adding a few things to improve the editors UI (sliders, dragging up and down, arrows etc) I thought I’d suggest these, for the left docked view 🙂
1) Is there any way to put folders inside of folders for selection organisation at all?
For example:
Blog posts
– Main styles
– Blog Post Name 1
– Blog Post Name 2
I’m really liking the selector folders now I’m getting used to them and this would make them even better for me.
2) I’d love to see MC handle !important tags like Yellowpencil does. It’s really intelligent at working out when the tag is needed and only adds it during that time. For the most part it’s been extremely accurate.
I know during Oxygen as it sets flexbox on every div/section to start with (from what I can tell) it mean’s I’m having to manually add it often (I know about the setting to add !important to everything, but I’m prefer to not do this, when it’s not needed)
Another feature to this is YCs automatical completion when you put !i it auto fills !important in the code editor.
Your selection detection is leagues above there’s so hopefully this will be possible one day, although I know you’ve got so much on your plan, and don’t expect it to come anything soon.
Thanks for your suggestions Dean, I will reply properly in the next day or two. I’m just prioritising some other queries as, and correct me if I’m wrong, these feature requests do not require an urgent response.
Please do keep the suggestions coming though, I will respond thoughtfully to each and every one 🙂
Thanks for the continuing suggestions Dean, so here are my comments on each:
Docked left view
1. Padding and margin: The options do actually form a more logical structure if you widen the sidebar (using the drag option at the bottom right):
I appreciate this could happen at an earlier breakpoint. The side-docked options haven’t been super refined yet. I wanted to test if people actually like having the options on the side first. It seems they do.
2. With flexbox, do you mean icons instead of dropdown menus? Why do you see that as preferable?
3. Sure thing on the mouse pointer icons.
4. Sub-folders will be added in future. I initially resisted that request, but it’s necessary for some other MT updates, so I will implement it.
5. Regarding intelligent !important, I’m still deciding if I agree with that in principle. Another option would be to alert users to specificity issues, and suggest a different selector they can easily update to. Having !important always on seems better because it can be globally turned off. Rather than having random !important tags that users don’t intentionally create.
You’ve said that you find you need !important quite a lot for overriding Oxygen, but I’m going to be looking at that specific issue over the next few weeks to see if a selector-based fix can be applied.
6. Instant targeting is something I will implement too. I’ve sketched out a plan for this already. But because it involves a change, and existing users are often a little resistant to change, I’m focusing on improvements to the properties first. As they will be less controversial I just can get them done and then allow some proper time to sort out the ideal targeting workflow.
You can use the Plus [+] icon to create a selector with two clicks – one to select the element, another to create a selector.
I’m still thinking about how to handle instant selectors though. I guess auto-cleanup if no styles are added is one way to prevent junk selectors building up…
Thanks so much for taking such an active role Dean. Engaged users are gold dust to me!
2. I think icons instead of dropdowns is a clearer indication as to what they do. Coming from Webflow and oxygen where we’re used to seeing it, it takes a bit of time to work them out without the visual icons for each setting. Of course, this could be adjusted on and off, however, I think icons + labels above can still take up very little space and give instant visual feedback at a glance for users who don’t remember what the options are.
4. Amazing. Been noticing how handy this would be lately. I’ve got a lot of selectors happening and I’m a bit of an organisation nut.
5. Agreed! I think that would be great. Even just a faster way to add !important in the code editor, when doing custom code would be super handy
6. I think it would be fantastic with auto-clean up. I know now I’ve created a lot of selectors, without adding anything to them, obviously there’s the lack of a blue dot, which tells me that, but 1-click clean-up buttons would be very handy. YP automatically gets rid of them if you don’t type it in, BUT they don’t actually create selectors.
I had a few more suggestions, but I’ll wait till tomorrow for them aha 🙂
There are some advantages that would be lost with flexbox icons alone. Seeing the computed value and being able to enter custom values like inherit or sass variable. But icons alongside the text values, like your mouse cursor suggestion could work.
I think we’re agreed on the other points. And a search feature is already on the todo list.
For the new multiple select, it would be great to have a way to add new selectors (IDs) to a current selector (for when we missed some that then need the same styling)
OK, I’ll have a think about how that would be achieved via the UI. Right now you can append selector manually by clicking the selector name in the top toolbar and then adjusting the Code field e.g.
Yeah, I’ve been using that method for a while, but the upcoming feature working with this would be a game-changer. I often get a bit bummed out when you go to update a selector and the selector modifier doesn’t show up.
“I often get a bit bummed out when you go to update a selector and the selector modifier doesn’t show up“
Noted.
You can disable animations by setting the animation-name property to none. So you can do that on the responsive tabs for mobile and tablet.
You could also only set the animation via the Large Desktop tab, which uses a min-width:1200px media query, and so doesn’t affect 1199px or below. I’m assuming you haven’t customised MTs default media queries here.
I see you got this working by removing the inView event. You can actually keep the inView event if you want. But in order to override the animation set via All Devices on mobile, you would need to specify the inView event for mobile too (alongside animation-name: none).
Explanation
The CSS changes depending on whether or not you are triggering the animation with an event like, hover, mousever, click, inView etc.
Example CSS for an animation that triggers without a specified an event (so when the page first loads):
.selector {
animation-name: float;
}
With an event (e.g. inView)
.selector.mt-inView {
animation-name: float;
}
Microthemer supports events by dynamically adding classes to the HTML on the page. So it adds the mt-inView class when an element scrolls into view. That makes the event-qualified CSS above take effect. But because .selector.mt-inView has a specificity score of 20, and .selector only has a specificity score of 10, event-qualified animations cannot be overridden for mobile by setting the property without also specifying the event:
(this doesn’t override our event-qualified CSS added via the All Devices tab)
MT will generate the above CSS if you specify the event via the mobile tab too.
The advantage of this system is that you can disable e.g. inView animation on mobile, but allow click animations (and remember, MT will support multiple animations in future).
An alternative approach for now is to only set the animation on a custom media query tab. You could create a new one called ‘Above tablet’ with the following media query code:
@media (min-width: 768px)
And then simply apply your animations via that tab. That way, there is no need to undo the animation for mobile. This is the principle of mobile-first design. I talk about this in the recent Gutenberg and CSS grid video.
I feel I might have already mentioned this, but when you work on the UI it would be great to get a position UI (maybe just in left docked if it’s too big) for positioning. I think I originally mentioned Webflows:
Thanks Dean, I’ll refer back to this when I move on to the style option improvements.
Once I’ve done the main Oxygen integration features I will move on to transform, filters and sliders/buttons for numeric value fields. But I’ll work my way through a number of existing and new properties after that.
I’m happy to add a plus (+) icon next to the pixel width text Microthemer shows to the right of the site preview (when it isn’t full width). This will reveal fields for creating an extra min or max-width media query tab in the Microthemer interface. This is actually already on the todo list 🙂
.
.