All breakpoints mode

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.

2 Likes

Brilliant, I like these innovating ideas :slight_smile:

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.

Yes, I was thinking the same thing also.

As it will help with these kinds of situations:

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.

I like this too :+1:

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.

1 Like

Having built my first site with Tailwind, I also think this is a good idea.

Always working in mobile view isn’t as enjoyable.

1 Like

Yep. All TW classes should be applied to “base” by default.

Related discussion: Tailwind: Dark Pseudo Class only for Colors

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 :pray: )

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 :rofl:

Another quick idea which could prevent adding a switch for devs:

Some keyboard trick like SHIFT + CLICK/ENTER on a property to apply it to base instead of current breakpoint.

Not sure though it is easily applicable to all inputs.

These are nice ideas for devs or technical users, as long as it can be simple for non-technical users by default. :+1:

The original request was primarily focused on making sure our clients are looked after, so that is my biggest priority for this request.

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.

As @Louis mentioned this is in the development schedule now, I am just coming back to it to add more refinement.

Firstly, when this is implemented it will finally make the Client Canvas View in the Role Editor usable, which will be fantastic.

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?

Hello @StrangeTech,

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.

1 Like