Importing a site renames css classes thus breaking JS scripts

[jonas]

Hi there,

Nice to meet you all!

We are faced with an issue that I would love some feedback on from people, more wise on Builderio than we still are

We have our platform here: hoodheroes.co. Unfortunately, our most scarce resource are developers, thus we want to move some of the workload from the developers to the designers, when it comes to remaking some(!) of our platform’s pages (our landing page and our for-company pages needs a makeover).

For our page design tool we are right now learning towards Webflow. It seems (not that we are experts) to have the most mature UX and feature-wise tools for designers to create pages without developer intervention. However, Webflow has one (giant) flaw, which coincidentally is also (in my opinion) the greatest strength of Builderio: It does not integrate with existing platforms. This gave us 4 options with Webflow:

1. Show the Webflow made- pages in an iframe on our existing platform: Not possible. Webflow technically disallows that their sites are shown in iframes.

2. Move everything to Webflow: Nope… Will take a ton of time, as we have a lot of custom code on our platform, and then we will probably just face other problems.

3. Host our platform on an app subdomain and have Webflow on hoodheroes root domain. Then they will see the Webflow landing page, and can be redirected to our platform, when they click something: Not optimal. Our separately hosted landingpage can then not have a stateful header showing e.g., whether a user is logged into our platform.

4. Export everything (HTML, CSS, Javascript) from Webflow and import it into our platform: Makes us lose the live CMS abilities sadly, but seems optimal.

And since #4 seems optimal, here Builderio comes into the picture. Since builder integrations with existing sites, we figured we would create all our new sites with builder, and then import the pages into our CMS here. However this gave two issues:

1. If we use the “Import Site” feature of Builderio, the import renames the CSS classes, thus breaking the Javascript code bound to the classnames (e.g. animations where blocks become visible, when users scroll enough down).
2. If we export our site from Webflow (a feature they have), then the index.html expects all CSS, JS and assets to be located at css/, js/ and images/ subfolders. I can add the index.html to a custom code block on the page in Builderio, but I do not believe I can setup these subfolders in Builderio? And fixing the URIs manually will require that the designers gets assistance from the developers.

So long story short:
Is there a way to either 1) have builder.io not rename CSS classes, or more optimally 2) create /js, /css and /images subfolders that our HTML refers too? We want to empower our designers to be able to create designs in Webflow and create new pages on our platform and move the generated HTML+CSS+JS over without developer intervention. Builderio seems like a good tool to avoid having developers create the new pages in NextJS for the designers and move their produced HTML+CSS+JS over for them.

[jonas]

Urgh this became long, sorry.

For testing purposes, if it helps the builderio team:
This is the demo-site from our Webflow project we wish to import: https://hoodheroes.webflow.io/.

Here is a link to our exported page files, we are trying to import: Dropbox - hoodheroes.webflow.zip - Simplify your life (cannot guarantee when link will be removed by me again)

[kara]

Thanks for reaching out and for taking the time to send such a detailed set of questions! For your first question, our “Import a block from the web” is currently a beta feature, and while we’re looking to improve it in the future, we currently don’t maintain css classes that are imported into Builder. That being said, you do have the option of re-adding those css-class in Builder which would be a simple solution for an instance or two. For your second question, we don’t currently support the uploading of folders into Builder.

We have an additional workflow that could work for this, though results may vary as we haven’t provided it to users before now. If you add a box to a page in Builder and right click on it, search for import from HTML. Instead of selecting that option, hover over it and click command, switching it to be Import from Liquid. Here you can pull in the HTML, preserving class names.

Then you could use Edit JS + CSS in the Data tab to add the custom JavaScript and CSS.