Streaming live at 10am (PST)

Help with Exported Code and Webflow Classes

If I export a site and need to make some modifications afterwords and can’t easily re-export due to many code changes made, where can I find out more info on all the Webflow responsive framework classes? So I see things like <div class="w-col w-col-6 w-col-stack"> and let’s say I want to add another container and row with 4 columns under it. Where can I find this documentation other than reading through the exported CSS file? Do these classes exist somewhere in a document?

Not an answer per se, but just a tidbit i’ve learned while exporting code to deliver to clients, the w- prefix for class names exist on the ‘unedited’ generated classes. For example, if you add in a Container from the ADD panel on the left, it will automatically get the w-container class. If you add a class name to this element, it will become newClassNameOfYours w-container. In this case, you should create a basic group of Column elements on a Style Guide page, if you will, with the various amounts, including your desired 4 columns, 6, etc. When exported (as long as your pages include the elements as you’d like, say, on a unlinked Style Guide page, for example, those additional CSS rules will be included in the export and you’ll be able to add in a new group of elements and alter that to use the amount of columns you desire. It’s almost as if you’re creating your own webflow version of the Boilerplate CSS (if you look at it a certain way). This is how I understand the process to work, but I’m not an employee, so you’ll have to experiment with your export process to meet your own needs.

I figured there must be a Webflow style guide or something floating around with the class names. I also noticed the custom ones do not have w- on them. This would be a great asset for sites that need to be exported. Maybe I will inquire with the team or open a Wishlist item.

The components.css files has most of them, but I am just wondering if a cheat sheet exists anywhere for quick and easy reference.

if you are using VS Code the IntelliSense for CSS class names in HTML extension will pick up the classes like you see here, but a list would be very helpful.