Dear Webflow,

I would like to request tremendous improvement, that would speed up my workflow and maintenance of web sites.

Please consider a function of "Copy CSS (to clipboard)" on any class, as mocked up on attached screen shot.

 

User story:

As a web developer, I would like to alter the look of any element on any site using Webflow (as a element modelling tool), so I can save time on process of exporting project, locating single element in CSS file and copying the definition to current project. 

 

Use:

After clicking the element expander I am able to click on "Copy CSS", which copies style of selected element to clipboard in CSS formatting, for example following string is copied to clipboard:

.header {
height: 80%;
min-height: 0px;
padding: 20px;
}

:hover styles, transitions are also included in copied CSS.

 

Test case:

1.task: Create element with class, uniquely named 

1. expected: Element created and named correctly.

2.task: Add background color, set paddings for the element.

2.expected: Background color and paddings are set.

3.task: Copy element to clipboard using cmd+C

3.expected: Element copied

4.task: Past element on design canvas using cmd+V.

4.expected: Element is inserted.

5.task: Copy CSS to clipboard

5.expected: Toast message 'Successfully copied CSS of an element to clipboard' is showed. Disappears after standard time or after user clicks 'Got it'.

6.task: Paste CSS to text editor and check the output

6.result: CSS is correctly formatted and contains name of the element, background color setup and correct paddings.

7.task: Try pasting on design canvas using cmd+V.

7.result: Nothing happens, as clipboard does not contain object anymore.

8.task: Consider inviting Jaroslav to Webflow office

8.result: Jaroslav successfully invited.

 

Thank you and have a good day,

Jaroslav