Add box specifically for custom CSS/LESS, and apply styles 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..