Hey there,
at first a big thanks and congratulations for the launch of Version 2.0. Its a great improvement…
I played a bit with the new Tools and the Inspect-Tab, to tell our Devs about it.
It would be nice, if there could be a button in the Info-Panel to copy all the listed CSS Attributes for a Selected Object.
(Thought there was something like this in 1.19, but im not sure)
For example, if i select a Headline and want to copy all at “Info”-listed CSS-Properties at once (font, size, color etc.), there is only the option to copy all attributes individually or search the block in the Code-CSS tab. (But there are more CSS Classes then needed and the attributes are spread between different classes)
Maybe, a “copy all-CSS” button for the specific attributes of a selected Element is possible.
For example:
}
.headline
font-family: ‘sourcesanspro’;
font-style: normal;
font-weight: bold;
font-size: 75px;
font-size: 0;
line-height: 1.2;
text-decoration: none;
letter-spacing: 0px;
text-transform: none;
}
Hi @72dpigraphics , you can copy the css code of a select element at the code tab (in the image you’ve shared the selected tab is for info / properties), where you’ll find a “copy all code button”.
I hope this helps!
Hi, thanks for your reply.
I know the “copy all code button”, but in the CSS Tab are also Global Classes like Body, Html etc.
So its needed to select the specific parts manually in the CSS Tab, relevant for the selected Element.
If i use the “copy all code button”, i have to manually remove the body, html, font-face classes etc.
Also the attributes for a Headline / Text are spread across 3-4 different CSS Classes…
In Figma there is the option to right click an element → copy as → copy as code → CSS. Then only the relevant attributes for this specific Element are copied, and i can paste them into my own CSS, in a new Class for example.
In Penpot I have to copy all attributes manually from 3 different Classes. (For example the line-height is in a different class then the font-size.)
I know the CSS is for the whole Layout, but if someone build his own CSS and just want to copy the Attributes for a specifiy Element, then its only possible to copy them one by one, or manually from the different classes in the CSS-Code-Tab.
I thought in Penpot 1.19 was a option to copy all the propertie-values for a selected Element at once. (Like in Figma, without body, html classes or different subclasses relevant for the whole layout)
But I could be wrong. Maybe its an possible option for the future.
Thx
