CSS Quick Breakpoints -- It's the little things that make all the difference

I’m not sure why I’m so enamored with this feature today more than on other days, but I thought I’d share my appreciation with the Pinegrow team for this super-handy time saver.

In the past, creating media queries was a multi-step process. You’d create your regular rule, open the create new CSS rule dialog, set your selector and media query, then do your thing. If you weren’t thinking clearly, you might be tempted to use the selector & media query options in the visual style panel only to find that it took your whole rule and converted it to a media query instead of creating a new one. It wasn’t hard, but it didn’t make things fast and easy either.

Now, all I need to do to create a media query is simply click the quick breakpoint button. After clicking a “Are you really sure” button, it automatically takes whatever rule I was working on and creates a new one wrapped in a media query. With two clicks, I can start styling other breakpoints. It makes working with CSS nearly as simple and intuitive as using Tailwind.

Anyway, I’ll stop gushing now. But seriously… THANK YOU!

Of course, it wouldn’t be me if I didn’t ask for more. So… how about adding some common pseudo-classes like hover, focus, before, and after to the quick panel :slight_smile:

12 Likes

And also, please fully support nesting in SCSS, and allow us to name the breakpoint tabs. I’ve completely moved away from the UI b/c of the lack of SCSS nesting support but would gladly move back if support gets implemented.