How to recreate HTML elements in webflow?

[theraseus]

Hi Guys, this is more of a general / technical question

I have been learning using several tutorials that use HTML and CSS and then applying them to webflow, the hardest part is usually recreating the HTML using Webflow.

I get confused with elements that have classes with a space in their name and that is making it hard for me to implement my codepen on the sites I am creating in weblfow.

 

 

For example if the div is: div class=“Column Special”

 

I am not sure if I need to create a div with the class “column special” or a div with the class “column” and then add a second (combo?) class with the name “special”?

What is the way to go to ensure any custom CSS and JS is applied correctly?

Thanks!

[mvaneijgen]

Classes are space separated. So a class of class=“Column Special” would be two classes .Column and .Special, note that classes are case sensitive and it is usually not conventional that classes start with a capital. 

 

In you CSS you an also only target elements that have .Column and .Special by combining them in your css (without any spaces .Column.Special {... Your CSS ... }

 

Hope it helps and happy tweening! 

[Rodrigo]

Hi,

 

I'm not sure if you're talking about embedding custom HTML/CSS from a Codepen demo to a Webflow project. If that is the case you can use the Code Embed element as shown in this article:

https://help.webflow.com/hc/en-us/articles/33961332238611-Custom-code-embed

 

Is worth mentioning that the styles might not be visible in the editor and/or preview until and you'll be able to see them only on the published site.

 

Finally for adding two different classes, after selecting the element(s) you want to apply the classes to, you can go to the toolbar in the right and add the classes there:

https://i.imgur.com/m99njOA.mp4

 

Hopefully this helps

Happy Tweening!

[theraseus]

Hi @mvaneijgen and @Rodrigo thanks for answering, but that wasn't exactly my issue  I found the solution: and I will try to explain it for anybody else who has this problem and lands on this post.  feel free to help or correct any terminology or anything that might sound wrong.
 

 

The way web flow handles classes differs from normal HTML"

for example a class name: "mainclass subclass" that in normal HTML would create two classes that can be targetted in CSS and GSAP (.mainclass and .subclass) in webflow it would replace the space with a "-" making just one class named ".mainclass-subclass" in the HTML. and that can mess up any JS or GSAP applied.

 

In webflow we also have combo classes: meaning we can create the first class "mainclass" in this case, and then apply the combo class "subclass", intuition might tell us that is the solution but that wouldn't work.

 

What we want to do is create a div (or any other element) apply the first class, in his case "mainclass", then create a second div just to create the second class "subclass" to that div.

 

Using this workaround when we start adding the combo class to the div with the first class, it gives us the option to apply a "global combo class" instead of a new combo class and that would emulate the normal HTML behaviour (or at least to apply anything we create using codepen).

 

An important note is that we need to create the classes in the right order (we can't apply the subclass combo class to the mainclass if we created the main class afterwards)

 

Hope that helps anyone with the same issue :), here is an image showing the difference when adding the second class