It may be useful to have a way to apply your styles to the base breakpoint regardless of which one you are currently in.
This will be very useful in the case of a client or editor who only does basic text formatting changes and/or adds components.
They may add a component or block in the lg breakpoint and then apply styling to it, not realising their styles haven’t been applied (for example to the smaller breakpoints in a mobile first approach, or the larger breakpoints in desktop-first approach).
Having this “All breakpoints” mode, would simplify the editing experience for them and prevent confusion.
This can potentially be toggled from within the Role Editor.
I think I would also like a toggle inside the editor, so that as admin I can quickly switch mode, and edit global styling while previewing any breakpoint view.
Definitely!
I encountered this issue numerous time. I integrate a website on the large breakpoint… but -of course- styles only apply to the biggest breakpoint.
Like I commented on this feature request:
It would be really handy to be able to select/change a breakpoint / state via a right click or better to allow us to rename the classe directly via a double-click on the class label. It would be even faster especially for groups.
Now that we are using Tailwind for more client sites, this is a really necessary feature.
To be able to specify “For any user with the Editor role, by default, apply any styles to the base breakpoint” will really help for non-technical clients who just want to align their text or change the colour when they happen to be viewing the site in desktop breakpoint at that moment.
There are indeed a lot of properties that can be independent from either breakpoint or color mode, even more when using Cwicly global colors (with native light/dark variations) and fluid variables, and such switches could really simplify and speed up the workflow.
(With a keyboard shortcut, please )
An option would be to keep unlocked the layout options (flex, grid, …) so that even in all breakpoints mode, we can alter layout according to breakpoint, but that might be a little confusing, I admit
Thinking about it more, something like this may work really well to invert the current mode for the specific property.
So, if you are in “normal mode” it applies the current property to all breakpoints AND if you are in “all breakpoints mode” it applies the current property only to the specific breakpoint.
The mode setting itself should definitely be able to be managed in the Role Editor alongside this, giving fine-grained control.
The best way I can summarise the benefit of the feature as I see it is:
Conditionally being able to make editable properties (such as text formatting) work the same in all breakpoints. This will allow clients to update the content formatting regardless of which breakpoint they currently have selected and it will always update the Base breakpoint as defined in the breakpoint configuration.
Also, I have been wondering about the name of the toggle.
While it makes logical and semantic sense for it to relate to the breakpoints, it is also about what can be edited.
So, for example “Breakpoint editing mode”, with options:
Changes update the selected breakpoint
Changes update only the Base breakpoint
Something along those lines makes sense to me, what do you think?
Thank you for sharing more ideas and input on this, really appreciated.
The Role Editor definitely needs to hold settings for this so that, as you say, the experience can be seamless when wanting to update content or user accessible styles.
I think this covers it well!
Also looking into whether having the possibility to switch between breakpoint editing without affecting the canvas is something that would be useful.