Streaming live at 10am (PST)

CSS documentation/handoff – collaboration with frontend guys


#1

Hey dear community of Webflowers!

I love designing directly within Webflow. Some projects become real websites if the customer’s OK with the Webflow CMS – others stay prototypes for some other frontend guy to code it properly in any other CMS, if the customer need things like more flexibility or permission management for the editors.

So I’ve been looking quite some while for a practical way to document/define CSS properties of certain elements to get a proper handoff to the coder. This page for example:

So of course I started with copying them from Google Chrome’s inspector panel, which gives me sth. like this:

But once you copy-paste it, it becomes this. It copies inherited styles (which seems unnecessary) and overwritten ones too. Confusing, so sad!

element.style {
}
a {
    color: #39f;
}
.w-nav-brand, .w-nav-link, .w-tab-link, a {
    text-decoration: none;
}
a {
    background-color: transparent;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
.pre-header-links {
    margin-right: 1vw;
    padding-top: 0;
    padding-bottom: 0;
    float: left;
    font-size: .85vw;
    font-weight: 400;
}
.icon, .pre-header-links {
    margin-bottom: 0;
    text-indent: 0;
}
p {
    clear: none;
    text-align: left;
}
body {
    height: 100%;
    font-family: 'Open Sans',sans-serif;
    color: #5e6a71;
    font-size: 1.33vw;
    line-height: 2.39vw;
    font-weight: 400;
    letter-spacing: .02vw;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    height: 100%;
}

Also this is – in my opinion – just too much information, considering that I only altered a few things here:

So, long story short:

  1. Is there or do you know any tool or extensions, that does this whole process in an easy and convenient way with the right (amount of) information?
  2. What is the right (amount of) information?
  3. Can I maybe configure/customize the Google Chrome inspector to do what I need here?

very kind regards to all you out there
Tobi