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
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.
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.
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.
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
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ā¦
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