Thanks @Maratopia_Digital,
I appreciate you taking the time to write this up and share your thoughts with us.
On beta one how the responsive styling would work was that once I clicked on the screen size and the button turned blue I would be on responsive mode and then when I changed any value it would automatically apply it responsively to the rest of the screen sizes (adding a blue or yellow highlight to the label). I liked the way this workflow works because my way of building sites is I start on the desktop to make it look nice then move down to the next screen and make the necessary changes. The only downside to Beta 1 was that we couldn’t choose the desktop first option which then wasn’t inheriting the values to match my workflow.
Maybe if I start by outlining some of the current behavior and how it relates to things changed since beta 1 that will help, then you can let me know if I’m missing anything or if anything else needs clarification. We did make some changes that may take some adjusting to if you settled into the patterns from beta 1.
- In Beta 2 we switched the blue and yellow colors. We felt like blue being a more passive color was better to indicate inheritance, and yellow now indicates something is truly set at a breakpoint.
- Under Theme Options > Layout and Design you can change the base breakpoint back to mobile if desired
- Using the device preview buttons only serves as a way to quickly jump to a breakpoint size and cause the dragging to lock that range. This lets you easily drag between the min and max size. This no longer has any effect on how responsive styling is applied.
- When you see a value without any color feedback, it means that changing it in the Inspector will always take place on the base breakpoint. This is true for just about every control in the default state which means there will be less accidental changes that only take place on certain breakpoints.
- Clicking a label to reveal the responsive values UI will let you explicitly change the value at any breakpoint.
- Once you’ve made that change, any changes you make in the Inspector top level will only be applied to the breakpoint you are currently seeing in the preview.
- If you see a yellow label, it means you’re changing the current screen size and beyond
- If you see a blue label, it means you might want to check a previous breakpoint before adjusting the control. The blue is a reminder of your decision to make a change happen at a different level.
-
Finally, the dimensions control (Margin, Padding, Border Radius) has a bug that makes the visual feedback unreliable - so put that aside until we get beta3/RC1 pushed out.
On beta 2, when I click on the screen size and the button turns blue to say I’m on responsive mode, then I change a value it is inheriting the value to all the breakpoints even the bigger screen sizes that I would have already fixed and made it how I want it. I understand we can now click on the label and it gives us the responsive modal which is awesome but my concern here is the fact that once I’m on a responsive mode on a screen size I’m expecting to change the value and that value is changed only for the selected breakpoint and inherit it down (to the other screens I haven’t gotten to yet), clicking on the label then changing it seems like an extra step to me and somewhat confusing.
The main difference is that values in the top level inspector are only treated as “responsive styling” after the first time you change them in the responsive UI, as opposed to tie-ing it to which breakpoint icon is active.
Just one more thing as well, I would say that now the start of the responsiveness being the click of the label can give it a hidden feature kinda vibe, thinking from a beginners perspective the hover on the label might not be enough to intrigue them to click as it’s not really portraying that you can make a responsive styling here. I don’t have any data to back me up on this so take this with a pinch of salt I’m only saying this from personal experience and trying out multiple builders.
You’re right, it does make things less obvious. We actually see this as a positive since responsive styling itself is more of an advanced feature. I’ve seen other builders add more icons in their equivalent of the Inspector, but I think in Cornerstone that would be a step backwards and clutter things up. We also tried an approach were we had a toggle to turn on responsive styling mode, but after seeing the mechanics we realized it was just too hard to follow what all the different combinations of active states really meant.
Hopefully this helps clear things up!
