I have seen some examples of custom templates in Anvil and documentation on how to make custom HTML template.
However, it would be great if there’s a detailed step by step tutorial on the implementation of custom HTML template, giving emphasis on how to code it up. This will help those of us who don’t know HTML or have some basic knowledge.
Would be great if one of Anvil’s advocate can do this using the existing custom templates provided in Anvil as showcase. I know there are summary articles on these examples but what we will truly benefit from is a guided stepwise tutorial. Perhaps even a video tutorial will be great.
Yes, I agree that some tutorials on this subject would be nice. I know that they use some version of bootstrap for the css but sometimes it would be nice to start from scratch with custom css or use some other framework like tailwind or materialize. From what I can gather, changing css frameworks and doing serious customizations is quite hard and that’s probably why there isn’t much training on the topic.
The best combination in my humble opinion will be to convert a webflow website into custom Anvil template.
With webflow, you can export complete HTML and CSS codes if you have lite plan subscription and above. Then, if someone (Anvil developer advocate?) can show us how to convert and bring the website into the Anvil platform, that will be gold.
I would sign up for Anvil in a heartbeat if this was demonstrated. I suspect a lot of us sitting on the fence will make the jump too.
Well, I wouldn’t go that far to say that one specific framework should be supported. Every framework has a few problems and so eventually someone wouldn’t be happy with webflow. I would say that we just need some documentation on adding and using our own stylesheets or css frameworks so we can use whatever we want. The problem I see is that it always loads bootstrap and I’m not sure if implementing other css frameworks will cause issues with the base bootstrap if the class naming conventions are similar.
I’m very much in agreement. I just stumbled across anvil a few days ago and I’m really impressed.
However, I can’t stand material design. My absolute favourite UI components are Tailwind UI.
If I could understand how to re-create all the Tailwind UI components in anvil, and share / re-use across multiple projects I would be absolutely sold, more than happy to pay monthly for this type of capability. Indeed, I would be happy to pay for someone else to do this work too.
Hi all, just wanted to let you know that this is definitely on our list and is also a personal want of mine! Suggestions as to different or additional formats (e.g. a YouTube tutorial as @camstuartdev suggests) are also very very welcome
Please, please not a video tutorial. They can’t be searched, skimmed and, if you’re looking for the nugget you know to be in there somewhere, you have to watch the whole thing again. Awful things!
That probably has more to do with my poor design skills than the Material theme, but when I look at the beautiful components in Tailwind, I imagine my app could look much better.
Are there any blockers to using Tailwind UI components by copying HTML/CSS and creating roles?
I agree that a (written) tutorial would be great.
Could Tailwind or others be supplied by Anvil as alternative themes?
As for using them as anvil-roles, I’m not super great with CSS, so I don’t know if there’s a way to do that with things like CSS variables, etc., but a hack-y way would be the following:
Create a dummy anvil role and assign it to the components you want tailwind class(es) attached to
On Form initialization use Jquery to get all components with the class anvil-role-
Assign those components the class(es) from tailwind you want, also with Jquery
Also, as far as alternative themes, Anvil already comes prepackaged with bootstrap (if that fits your fancy, I don’t know if you’re set on Tailwind)
I added one of the CDN options and then added a Jquery function that takes 3 arguments:
The full anvil role name
The type of component (in HTML Terms, not Anvil)
All the Tailwind classes you want to add (in a space delimited string)
If you give None as the component argument, the tailwind CSS class will apply to the div that contains the anvil component rather than the actual component.
If you give an empty string, it will apply to all the children of that div (and any kind of component that has that role).
