It’s taken me a couple of tries but I finally understand what’s been confusing me about the UI/UX in Pinegrow regarding the Responsive controls in the Inspector palettes.
I’m going to reference the Pine Trees Responsive Lesson here so everyone can see what I mean.
At 02:01 When talking about the spacing controls, you will clearly see that XS is highlighted in Green as this is the ‘breakpoint’ that the Spacing Controls is currently affecting. And the adjustments made affect the XS and up (Bootstrap 5) layouts.
However, in order to stop that from happening in MD and up, at 02:37, when the instructor is selecting MD and up to make changes, the XS is still remaining green.
This is a break in the UI/UX mental modal, because here it is implying that the GREEN is what you’re affecting - but you’re not - you’re only affecting the MD (and up).
The XS HAS breakpoint specific settings in this control, but the fact that when you select MD the XS still remains green is a problem.
Suggestion: When you select a breakpoint that breakpoint and up should be coloured in (let’s say) GREEN to show that’s what you’re affecting. However, any other breakpoints that you’re NOT affecting with these changes should NOT be GREEN but instead be another colour, that shows that they DO have breakpoint specific changes, but that what you have currently select is NOT affecting them.
Having both show green when you make a change is confusing.
This confusion is not just limited to the Spacing Controls, but throughout all the elements that have responsive breakpoint specific controls.
Please reconsider this current implementation and make it more clear which one you’re editing and which ones currently ‘have’ edits but that you’re not currently changing.
The green is showing you what control set you have visible in the panel, you can toggle them to show or hide.
You can see how this works..
Select MD to show the MD breakpoint spacing controls. Then set a top margin of 5. Now click the Green MD to hide the MD spacing controls. Now if you look at the classes on the element you will still see the Bootstrap class .mt-md-5 is on the element. Hiding the MD spacing controls has not removed the class.
so the ACTUAL TOTAL vewports which have styling on them are listed vertically, on the left,
but
The ones you are VIEWING are shown in green on the top, so clicking to select deselect them, lets you see everything which has been created for each one.
I too thought that you were only editing the ones in green , back in the day. Ive not used this feature for an age.
Each time I go for a refresher on the docs, it seems to be written for a different version of the UI so it can be tricky if you forget/ are learning something.
I seldom use these visual tools for the Bootstrap classes, once you know them, it’s much quicker to just add the classes than to scroll through the side panel.
Probably why I am struggling to adjust to Tailwind HAHA. Although giving it a good go for a client site I am starting tomorrow.
It’s just different to what you’re used too. I’ve used Bootstrap for what must be 14/15 years at least, I found working with tailwind slow going today , darn muscle memory. But once I finish this site, I hope I’ve got some speed going.
, darn muscle memory. But once I finish this site, I hope I’ve got some speed going.