Streaming live at 10am (PST)

Some features that prevent me from going on Webflow

Hi,

I finally decided that I was going to remake my website using webflow by copying what I hand-coded. But it looks like I will not be able to use Webflow :frowning:

Why?

Because, some useful CSS features are not available.

  • No * selector;
  • No box-sizing possibility which make blocks easier to work with;
  • No text-rendering;
  • No pseudo-element which I use a lot on my website;
  • Can’t use external font with a link only which make impossible to use Fontawesome and other fonts
  • Can’t use external CSS or Javascript files.

My current website use a lot of external code for plugin and other features not available in Webflow. I need custom Javascript to make my navigation bar and pseudo-element like ::after, ::first-child for my design layout.

So sad… I’m tired of hand-coding my website and was looking for a nice CMS other than Wordpress.

1 Like

Hey there!

It’s true, things would be easier if we had those things “out of the box”. You still can use all of your missing features with custom code as a element wherever you want and inside pages either before the </head> or </body> tag though.

2 Likes

Hi,

Would it be a good idea to use custom code uploaded in the cloud? I was thinking it could be a solution, but I feel like having a personal cloud storage being very busy wouldn’t be good.

You can embed JS directly into the page. A custom code block is nothing more than a div that allows you to place whatever you want inside of it. So you can also import files and place inline scripts there.

Webflow does not allow users to place files into the directory of the project. You can work around this by uploading .txt files to the assets and grabbing it’s URL to use as an import.

Of cause you can also host files somewhere else and import those too.

The only true limitation is, when you need to work with files that can’t be cross-domain (like CSP or CORS related things) and server-side stuff.

The assets you upload to webflow will be hosted on a cdn that also is a different domain.

2 Likes

I just don’t like the fact of writing JS inside an HTML document. For me it’s the wrong way to do it.
Adding files via a CDN in the header could be the way to go, but do you know a good CDN you can use without creating an account?

I also find it weird you can’t use CSS inheritance feature. For example, I want all link inside XYZ div to be white.

Normally, I do something like that :
.div{color: white;}
.div a{color: inherit;}

Why I need to change all my link inside my div separately now?

If you come from a more traditional background of compartmentalisation and destructuring, then I can see why you would dislike mixing languages. In modern environments and frameworks like vue or svelte, mixing those is part of the design. Render blocking wise you can make both options optimized…

Im not sure about accounts but github can host files easily.

You can also set those css rules inside WF, put them in a custom code block or in the head and this will work too! You don’t have to specify each like individually if you reuse those classes. Maybe use the tags as selectors then…

That could work, but I was looking at the Rich Text Element for CMS blog post.
Some things are missing there too. Like the possibility to add classes to different things you add or just a simple “add a gallery” into the page other than having a different CMS element that only show you the gallery at the bottom of the page.

When getting into fine details like those, your creativity will find solutions!
For example, you could add the gallery between two rich-texts and call them “sections”. This could yield better spacing control for you (as the designer/dev) and have the editors worry less. If the gallery is let empty, simply hide the empty-state!

The limitations of WF can be frustrating, however - restrictions can also lead to more creative approaches.

WF might not be for enterprise grade websites, but it doesn’t claim to be. For me the only valid criticism lays with not being able to upload JS files “inhouse” and that assets are served cross-domain regardless of whitelisting or not!

(I’m not sure if this is due to custom domains being connected via dns records, not an expert on this!)

I already thought about that solution, but my galleries will not always be at the same place depending of the subject I’m writing about. A bit like it is done on exposure.co

Edit: I found out I could use custom code with the code embed feature https://university.webflow.com/article/rich-text however, how can I get the link for my images I need to use?

You could always revert to implementing your own logic with JS. Off the top of my head, you could give the collection number fields as predetermined positions inside the blog and hide them. Gallery can be wherever, for example at the bottom. Tge editor can set another number field to where the gallery should move. On the live page you could cut the gallery node and its children and paste it at any number field, as instructed by the editor…

In comparison to any server side rendering framework, you would have to implement a comparable logic…

I’m not sure, WF has an API that may have that functionality, never used it.
They do not really maintain tge github repo though

You can get specific items of a collection
https://developers.webflow.com/#get-all-items-for-a-collection
You need the id however, not sure where you can get it from the live site.

I don’t really understand this code. Can’t it allow me to add new « gallery » item to Rich text Elements?

Rich text elements don’t support galleries.
I’ve got another idea, you could just paste the images inside the RTE and on the live site convert them to the syntax of the native webflow gallery with all your classes etc.
Much better than fiddling with the api