Speed up workflow especially for applying global classes

I have always used VSCode and I have to admit that I miss the targeted building of a structure and the quick typing of CSS code in files. Especially the plugin “Emmet” is just brilliant to deposit an element plus classes in one go.

Now when I’m in Cwicly (or any other PageBuilder), I sometimes have to build even simple structures and classes over quite a few mouse clicks. I still want to work with Cwicly in the future, because some complex layouts and styles, e.g. angled multi-gradients, overlapping of elements in the CSS grid per code can be quite tedious :slight_smile:

My suggestion would be, as usual in any professional software, to give power users possibilities to customize to their workflow, especially through shortcuts, a certain preselection of tabs or panel arrangements.

Example:
I used to use class like “.icon” and “.icon–left” for icons at the beginning of a text, these formatted me an icon with 1.1em, the primary color and a space to the right with 0.25em as default.

In Cwicly I can prepare this behavior via global classes.
BUT: It takes quite a few clicks, sometimes a scroll (with many global classes) or a search input, to store for example these two classes. For example, if I select the “Global Styles” tab and add an icon, Cwicly automatically selects the “Block Inspector” tab again, although I actually prefer to select global styles from the list. I know I can also select global styles in the “Block Inspector”, but I have to click on the “Global Styles” icon for each class first.

In my eyes, it would be helpful if Cwicly would allow more individual settings here.
Examples:

  • Global Styles could be assigned to different tags, so that they are only shown if they are relevant for the selected tag (this makes the list for selection clearer).
  • I can open a modal window via shortcode and add the desired classes one by one without mouse clicks by entering the class names + ENTER
  • Additionally: If I e.g. hold down “Shift” when adding a tag, this modal window opens afterwards so I can immediately add the desired classes.
  • or allow an direct input of element plus classes like in VSCode with Emmet
  • Make it possible to give certain elements default (global) classes, like in Gutenberg.

I would also find it helpful if CSS professionells are shown an overview of the applied styles for the currently selected element (as pure source code). That way, one look is all it takes to see why an element behaves that way or why it looks that way.

These were my impressions after returning to Cwicly after months. Maybe some of you see it similarly or have other suggestions to speed up the workflow.

EDIT: The initial idea of this post was to reduce mouse clicks and apply styles to elements, be it via global classes or individual CSS styles.
A complementary possibility would be to also be able to apply CSS styles immediately with guided help (CSS suggestions), like in the editor with a Modal window too, opened with a shortcut. As a professional, this would have made it extremely fast to insert many commands one after the other, without having to perform countless clicks with the mouse plus maybe typing values in different input fields.
I know that the editor exists, but that means losing the ability to continue modifying commands via Cwicly UI and it still need clicks and writing “.blockclass {}”.

3 Likes

:100:

This would remove the necessity of constantly have another window or tab open to show the page on front-end, checking the block’s properties with browser dev tools, which is contrasting to the FSE concept in the way I work.

2 Likes

I definitely spend a lot of time in DevTools checking source code. Always some odd things that get applied when you least expect.

At the very least, Cwicly is not as big an offender as some of the other alternatives out there.