Streaming live at 10am (PST)

Coming Soon: update to how classes work


#1

Hey Webflow peeps! I'm writing to let everyone know that soon we'll be releasing an update to how styling works in the Style Panel.

Currently you have to create a class in order to reveal the styles for that element. Although this workflow may make perfect sense to someone used to writing CSS by hand, this name-first and style-second workflow can be unfamiliar and unintuitive to those new to the web design. As we know, coming up with good class names is hard. It’s even harder when you’re not exactly sure of the structure or design of the thing you’re building. With the update you'll be able to add styles immediately and worry about naming later.

How it works

When you add an element to the canvas, all your styling options in the Style Panel will be available immediately. At this point you can decide whether to create a new class and then add styles like you currently do, or you can add a style and we'll generate a class for you based on the element type.

Showing these controls up-front will help in a lot of ways...

  • Reduces the confusion many first-time users experience when attempting to style an element
  • Gives all user a new workflow to build layouts and experiments faster and save class naming for later (our recent class renaming improvements make class renaming a lot faster and easier)
  • Opens up new doors for the Designer to utilize on-canvas controls instead of having all styling happen in the right panels

If you’re comfortable with your existing workflow, you can carry on as usual by either creating or selecting an existing class. Automatic class generation simply opens up a third option that allows you to immediately style an element.

Default selected state

Class created automatically
Notification appears for the first time


Class disapearing or temporarily changing?
#2

This does make a lot of sense. It alleviates the commitment part of naming, which like you said- it's hard to name things until you know exactly what it is you are building.


#3

It is brilliant idea!


#4

It gives them a class name so you could rename later or add a combo class if desired.


#5

It will be nice not traversing combos to change the parent class all because I made a design change half way :slight_smile:


#6

Great feature here folks, I feel like this will make prototyping much easier. I've really enjoyed the recent string of new releases, keep it up!


#7

@thesergie
I love you


#8

Great to see you guys using the 'announcements' category on the forum again, excited to see what 2017 brings for Webflow (off to a good start).


#9

I love this idea. I was only 20 minutes into webflow'ing and it already annoyed me :slight_smile:


#10

Excellent - the more we can view the underlying css the better. I would vote for a complete reveal with the ability to edit directly. Then, I could paste defaults I have stored elsewhere ...


#11

Yeah, great step forward.

Btw. I would like to place some feature requests for classes here.

  • Sorting of classes should be alphabetical. How are they sorted actual, by last edited, or last created? This could be a sorting option
  • Easier editing of classes, especially while having combo classes. At the moment it is necessary to remove the combo class, to get the chance to edit the main class of an element
  • And last but not least, better overview of classes. While trying to clean up all classes of a project from time to time and especially before launch can get hard to find all elements, which are not longer needed. Why not adding a possiblity to get a list of all elements, linked to a class and jumping to the related page and position of this element.

#12

YESSSSSSS this is amazing! The slowest part of using Webflow for me is having to stop and think about how I want to name all the classes... Much prefer to get about building, and go back and name after the fact. I've wanted this FOREVER

+1x10^6 :100::tada::rocket:


#14

You don't need to remove the combo class. Just click the icon in line with the class field and select the option from the drop down that doesn't include the combo class.


#15

Thank you. Always a pleasure to learn more about Webflow :slight_smile:


#16

This is now live. Thanks for all the feedback! Have fun with it :slight_smile:


#18

Already saving me so much time :slight_smile: Thanks for the update!


#19

This is awesome. Great work.


#20

This does not seem to work inside of a Rich Text Component @thesergie @brjohnson is this maybe a bug or we can expect that in future?


#22

This is why I webflow. Love this!!


#23

Yeah we knew there would be this limitation. Ideally editing an element inside rich text would automatically create a class on the Rich Text parent and then nest the selected tag selector in it. That's something we hope to build out in a separate enhancement. Thanks for the feedback Tim!