# Show all css propertys directly

**URL:** https://forum.pinegrow.com/t/show-all-css-propertys-directly/224
**Category:** Feature Request
**Created:** [September 27, 2016, 2:55pm UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224 "2016-09-27T14:55:32Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![fishmi](https://avatars.discourse-cdn.com/v4/letter/f/c89c15/32.png) [@fishmi](https://forum.pinegrow.com/u/fishmi)
#### Post date: [September 27, 2016, 2:55pm UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/1 "2016-09-27T14:55:32Z")

</div>

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 😉

Look at Adobe InDesign, there it is already implemented.

---

<div class="post-metadata">

### Author: ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)
#### Post date: [September 28, 2016, 1:51am UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/2 "2016-09-28T01:51:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![fishmi](https://avatars.discourse-cdn.com/v4/letter/f/c89c15/32.png) [@fishmi](https://forum.pinegrow.com/u/fishmi)
#### Post date: [September 28, 2016, 6:37am UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/3 "2016-09-28T06:37:14Z")

</div>

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

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.

---

<div class="post-metadata">

### Author: ![Thomas](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/thomas/32/61_2.png) [@Thomas](https://forum.pinegrow.com/u/Thomas)
#### Post date: [September 28, 2016, 9:33am UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/4 "2016-09-28T09:33:49Z")

</div>

… 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

---

<div class="post-metadata">

### Author: ![fishmi](https://avatars.discourse-cdn.com/v4/letter/f/c89c15/32.png) [@fishmi](https://forum.pinegrow.com/u/fishmi)
#### Post date: [October 2, 2016, 2:25pm UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/5 "2016-10-02T14:25:18Z")

</div>

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

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/f67bf747a5c116218f5b77153ddb556e00f36da2.png)

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).

---

<div class="post-metadata">

### Author: ![fishmi](https://avatars.discourse-cdn.com/v4/letter/f/c89c15/32.png) [@fishmi](https://forum.pinegrow.com/u/fishmi)
#### Post date: [October 4, 2016, 9:10pm UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/6 "2016-10-04T21:10:29Z")

</div>

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

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/388a5e31e88f0a794fbb5c37f34569eacc348a9c.png)

---

<div class="post-metadata">

### Author: ![Pinegrow\_User](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/pinegrow_user/32/4919_2.png) [@Pinegrow\_User](https://forum.pinegrow.com/u/Pinegrow_User)
#### Post date: [October 5, 2016, 3:48am UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/7 "2016-10-05T03:48:33Z")

</div>

🤓 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_.

---

<div class="post-metadata">

### Author: ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [March 24, 2017, 9:30am UTC](https://forum.pinegrow.com/t/show-all-css-propertys-directly/224/8 "2017-03-24T09:30:59Z")

</div>

@fishmi, well done.  
That, basically, is how I expected it to work in the first place 🙂 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 🙂

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 🙂
