Hi,
I’ve yet to really build anything tangible with Anvil just yet. However, I’ve just been experimenting with some idea’s. The other day, I was wondering how much effort it would be to bring in a custom Bulma CSS framework template into Anvil . I think for the look at things it should work pretty smoothly if you follow the below. The exception is that the Anvil button does not skin as expected, I suspect that is bleed over from the Anvil CSS. I’d like to have a feature that you could set roles and have it override the existing Anvil CSS.
So after scouring the forum for a few tricks with Anvil and roles, I think I have my answer. I fully expect it not to work perfectly with all Anvil components but I think it should be straight forward enough to fix most minor issues.
The goal was to just import Bulma 0.9.1 css as an asset and reference it via Anvil roles e.g. prefix all the Bulma classes with ‘anvil-role-’. This works but only if you prefix the Bulma css class names. I found a github repo that had some script to perform that task for me, I just had to make some minor adjustments to the script so that it worked on more recent version of Node build tools.
The resulting css files needs to be placed in the themes.css file under Assets.
The last part was how to specify multiple roles on an component. This was a trick, I found in the forum offered by Anvil support.
self.text_area_1.role = [‘textarea’, ‘is-primary’, ‘is-large’] # Bulma CSS class names
After that most of them function as expected. This was all done using the Anvil custom HTML page form.
A sample project can be cloned below.
https://anvil.works/build#clone:F3HMX4TAVDNYGS57=QFDHZ23NXB35HH43APFKH4Q2