Allow custom CSS/LESS, visible in Designer

I really like the Webflow Designer for composing pages and setting some basic properties like fonts, padding, etc, in combination with break points.

However, as a coder I sometimes really miss the refined control full CSS gives. A few examples:

  • ::first-child (for removing left padding, or adding a top border)
  • nth-child (for alternating background colors in sections)
  • parent child relationships (for adjusting the text properties inside an active over hovered nav link block)
  • adding breakpoints
  • using calc()
  • custom ::before or ::after implementations (to add custom underlines, or a dot above an active menu item)
  • -webkit-font-smoothing
  • more advanced selectors (example `a[href^="tel:"]:hover`)
  • custom bullets in an unordered list

Of course, you can add your styles in the 'custom code' editor. The downside of this, is that it is not executed when viewing your site in the Designer, or even previewing the site. So, when you start using this, the process of building a site suddenly becomes a lot more clunky with you having to publish, switch, refresh, and then switch back to the designer again all the time.

A feature that I really liked in Squarespace, was the custom CSS/LESS box. You can use all the power of LESS (variables, nesting, etc) — or just plain CSS, and the changes to the style are immediately visible in the editor. Like Webflow, they don't execute custom code in the editor (for obvious reasons), but they do apply your custom styles.

I think this is a relatively simple to add, backwards compatible feature (<style> blocks in the custom code will of course still work), that will make the Webflow platform so much more powerful. As a first implementation, it can simply be put next to the Custom Code box. But even better would be integrating it in the Designer: this way, you don't have to switch back and forth all the time, and can see the effect of your changes without having to publish. You retain the ease of use of the Designer, while not putting coders at a disadvantage.

This will also help with a number of items on the wishlist, like these:

1. https://wishlist.webflow.com/ideas/WEBFLOW-I-893
2. https://wishlist.webflow.com/ideas/DESIGNER-I-5
3. https://wishlist.webflow.com/ideas/WEBFLOW-I-133
4. https://wishlist.webflow.com/ideas/WEBFLOW-I-6
5. https://wishlist.webflow.com/ideas/WEBFLOW-I-1433


I hope you will consider it, and let me know what you think. Thanks!

  • Rijk van Wel
  • Sep 11 2018
  • Matthew Sanderson commented
    September 21, 2018 07:58

    Hi Rijk, did you know if you put a HTML embed element on your page then add <style> tags and your CSS, the sales will render in the designer.

    No SASS etc and a little clunky having to use navigator to find and edit the HTML embed but seeing custom CSS in the designer was a game changer for me..

  • Rijk van Wel commented
    October 5, 2018 13:05

    Thanks Matthew, that is really helpful. Indeed pretty close to what I am describing here! I am using this technique everywhere now; usually I have one "Global styles" embed which I tend to put in the Footer symbol so it's automatically included on every page, and then I have one "Page styles" where applicable. Only downsides are:

    1. you can't use LESS (it is so nice once you've used it)
    2. it is a hassle to edit the styles (especially the global styles, first double click to go into the symbol -> than go the Embed block -> then go to settings -> then open code editor)
    3. while editing you have the white Symbol overlay on top of the things you are actually editing

    So, having a custom styles panel on the left or something would still be nice. Give code savvy people the tools they are used to!

  • Chris Wood commented
    October 16, 2018 02:36

    It's worth noting that placing <style> blocks inside the <body> tag may slow down the rendering of the page by triggering repainting:

    https://www.w3.org/TR/html52/document-metadata.html#the-style-element

    "Note: A style element should preferably be used in the head of the document. The use of style in the bodyof the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care."

    Because of this, I'd be hesitant to put custom styles inside Webflow's Embed element.

  • Rijk van Wel commented
    November 8, 2018 10:48

    @Chris, I think best is to put it at the top of the body; this should keep repaints to a minimum. Setup I have now is one embed block with class "styles" at the top of the page, which I then give the following CSS:

    ```

    html.wf-design-mode .w-embed.styles {
      position: fixed;
      left: 20px;
      bottom: 20px;
      background: black;
      color: green;
      padding: 10px;
      border-radius: 6px;
      z-index: 100;
    }
    html.wf-design-mode .w-embed.styles::before {
      content: "</>";
    }

    ```

     

    This gives you an easily accessible 'edit styles button' at the bottom left corner of your page (only visible while in the designer). Double click to edit styles, see changes in Designer immediately. Only thing missing now is LESS support :)