Responsive Styling Beta Progress

[alexander]

Hi friends,

Thank you to everyone who has been testing the beta. We know it’s a bit more rough around the edges than other cycles, and we really appreciate all the feedback we’ve received. This is quite a complex update, so it’s taking us a while to iterate and make changes. It will likely be towards the end of next week that we have another beta available.

Here are some improvements you can expect:

1. Quickly changing any value at any breakpoint from the query inspector UI (Beta 1: Copy Styles from higher to lower breakpoints)
2. We’re working on a way to let you change the base breakpoint (Pondering mobile first)
3. Considering 1 and 2, we are adding a toggle that enables “responsive styling” mode. When turned on, the inspector will show the value of the current breakpoint. When not on, you’re always editing the base value (unless you click into the query inspector from point 1) This will help avoid unwanted breakpoint edits.

All of those combined should support a number of different workflows and prevent Cornerstone from being too opinionated one way or another.

We apologize for having more of a gap between betas this time around. Allowing the breakpoint to be changed is particularly challenging, because of how the styling cascades. We need to build a system that will take an element created in an arbitrary base breakpoint, and convert it to the selected base breakpoint on the fly. We’re also hitting a few hard edges in parts of the codebase that will eventually be removed/replaced for the Theme Options reboot. In light of that we’ve decided to do some foundational work for the Theme Options reboot now and go ahead with some of the needed rewrites. This will grease the wheels for the next cycle, and also save us from having to redo things.

Thank you for your patience as we continue iterating, and thanks again for your participation in the process!

[Maratopia_Digital]

Thanks for the update @alexander! Really looking forward to this beast update to be completed. Giving us the ability to change base points is a big step up and one that I think is unique from the other website builders ive worked on!

Thanks for hearing us out on that one!

Jonathan

[alexander]

Thanks Jonathan!

[JvP]

Quality takes time

[alexander]

Hi again everyone,

We’re still not quite ready for the next beta. Nailing how these element will be stored and converted between base breakpoints has been slippery in how it relates to planned features for Theme Options. We’ve taken more time to do discovery on “Global Elements” and have identified a way to make that work for the Theme Options cycle in a way that doesn’t conflict with responsive styling data. By the time Responsive Styling is wrapped up we’ll be in a great place to jump right into the Theme Options reboot. Thank you again for your patience. We’ll keep you posted on where things are.

[alexander]

Hi again,

Thank you so much for your patience. We’re shooting to get beta2 out on Friday! We were able to accommodate some really important changes based on your feedback and continued testing.

1. Styling controls will now let you change all the breakpoint values at once from a unified interface. This screenshot was taken on a site configured to mobile first. There will be an indicator (not seen here) that shows your base breakpoint to help visually demonstrate how the values flow outwards from the base.

2. In Theme Options you can change your base breakpoint
   

This UI shows the current px values for each breakpoint but they can’t be modified. However, we’ve already developed that functionality so it will be possible with the Theme Options reboot cycle. We just can’t make this fully compatible with the current stacks so it’s disabled for the time being.

3. We’ve revisited how Inspector Navigation works. This has been planned for some time, and getting number 1 above to work involved some serious refactoring of the Inspector, so we went ahead and built out the necessary framework for these groups. In this example, you can click “Section” to collapse all the controls inside, then move your cursor down just a few pixels and click “Effects” to quickly jump into that group. This is much more efficient compared to moving your cursor all the way over to the control navigation in the bar. The sub groups (Setup, Design, etc.) will simply remember if you left them open or closed.

We know it’s been a long time between betas. Much of the work we’re doing now is very foundational for the Theme Options update, so fortunately at this point any additional time spent on responsive styling is going to move us closer to the new Theme Options release. We’re really excited to get this next beta pushed out!

[SchoonhovenOntwerpStudio]

Can’t wait for this Alex! Hopefully Friday will be a go, good luck!

[alexander]

Just pushed it out! Looking forward to your feedback on the design/implementation changes. Thanks!

[alexander]

Beta3 is now available. Quite a few things solved, but we still don’t have everything worked out yet - at least not to the point where it can be considered a release candidate. If I’ve not updated the thread saying the issue is fixed, it’s still on our list to investigate.