Show all css propertys directly

I know, this is the golden border:
But if you can realize the requirements from this topic title, i’ll still buy a second license :wink:

Look at Adobe InDesign, there it is already implemented.

1 Like

I’m curious what version of InDesign are you using? I would point out that InDesign doesn’t have to deal with responsive layouts where the dimensions depends on the current width of the window it is being viewed in.

That’s true, if you have a fluid layout, the dimensions are not really important :slight_smile:

But you know, “Responsive” don’t mean that the dimensions of an object are completely irrelevant (or the margins and paddings). Most layouts that i have to implement as front-end programmer are not “fluid”.
And you always have elements whose size does not change dynamically (only at the break points)

With this feature request I just want to say that it would be extremely helpful if the propertys of an element (also font-familiy, font-sizie, colour etc) are all together directly visible. Currently you have to look all the classes individually, in order to gain an overview.
With a summary of all the properties that will be shown for example on mouseover, you would save time.

I have mentioned “Indesign” because here is the function perfectly implemented .
Also in Adobe Muse (used for responsive) or Axure or other prototyping tools.

… dimensions (or measurements) ARE important.

I often inspect elements in the browser just for figuring out its (native) pixel-width to prepare images the best I can.

So I’d like to second this as a handy tool having somewhere shown the “measurements” e.g 486px as a result of the set “dimension” e.g. 25% - similar a browser does btw.

Cheers

Thomas

Now I have ceated a mockup for the ideal CSS panel. In this way I would find this perfect, logical and intuitive

Logical and intuitive because:
You begin with the project and selecting a file from the project, then follows the selection in the DOM tree, then you want to view and proof the active (= relevant for design) CSS properties of the selected element and last but not least you start editing the css code by clicking directly on the code (editor mode will be shown).

Once you click the css code on the panel for editing, an already for editing opened selector must be first closed/saved (could also be realized by disabling the click on the code for the other selectors).
The pen opens the panel for editing propertys.

If the direct editing in the panel does not work, you can continue to open a new window.

The checkbox “Reverse order” shows the selectors in the reverse order (if you want to have the “last” selector on the top)
For a more compact view the code areas of the selectors code can be closed (“closed all”-Button, toggle with “open all”).
If you have a monitor with a smaller resolution, then you can close PRJ panel or you group all panels like now.

it will be fantastic/superb/magnificent if the mockup for css panel can be realized.

In the mockup I have not yet provided the display of dimensions, margins and paddings (on MouseOver).

I’ve updated the mockup:

  • better design for small buttons
  • add new function to rules in css panel = duplicate
    that makes it easy to add the duplicated rule via drag 'n drop to an other stylesheet an then to overwrite some propertys
    Oh, adding to an other stylesheet is also new, actual this doesn’t work

:nerd: I am just hoping and trusting that the UX and UI of Pinegrow, gets retooled and further polished overall in the coming Version 3. Plenty of areas in general can be refactored regarding those standpoints, to further increase the power and productivity of the app, allowing users to more easily harness its features and capabilities. The core app is wonderful, but those areas could use some genuine love.

@fishmi, well done.
That, basically, is how I expected it to work in the first place :slight_smile: which is maybe why I got so confused originally. it is the CSS pane/priorities and the way that if you click an active style sheet tick at the top, it then shows JUST that style sheets rules and UN ticks all the other style sheets -with no way to revert to show which style sheets - which I find the most confusing.

STill, exciting times ahead :slight_smile:

Yay! Looking forward to whatever they come up with, as @matjaz is kind of clever, so I’m pretty sure this will be worth the wait as they squeak the last stuff in and poke and prod and their Performance Valves :slight_smile: