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:
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
.svg){kind=logo}
Having to add styles into an embed on every page of every project to see what I want in the designer really does seem like an easy fix with inclusion of a custom code editor built into Designers Styles menu.
Sick of having to add pointer-events, calc, pseudos etc into embeds on every page while building then go through removing and adding to the settings custom code at publish every time or having other team members not do this and ending up with super messy CSS setup across our projects.
Less in the HTML embed would be perfect! For example, right now i am really missing the "lighten/darken" feature.
Calc() needs to happen, please. Mixing units like calc(100% + 50px) for height and width would be no less than amazing.
I'm struggling to bring in my own custom styling which is then available in the Designer.
Without this it's really painful building my own styles using the UI editor when I already have global color styles and text styles across our back-end application.
I'm using Webflow to move faster not to slow down.
It seems to be best practice to embed my custom styles in the 'Custom code' section but then this is not available in the style editor
Example:
@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 :)
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
styleelement should preferably be used in theheadof the document. The use ofstylein thebodyof 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.
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:
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!
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..