I have a project coming up where I need to use my own theme and I’m hoping to be able to leverage Anvil. The designer is already finished and she did everything in Bootstrap 4.
I recall seeing on the forum that Anvil uses Bootstrap 3 (at least at the time). Is this still the case, or has it been upgraded? If not, will there be problems integrating my Bootstrap 4 theme into the system?
It’s first worth noting that this is an advanced feature in anvil and follows the approach of - there’s always an escape hatch - creating a custom theme is one of those escape hatches:
One reason there’s not too many show and tell posts about custom themes is because they are not easy to create.
I would certainly check out some of the approaches in @bridget’s ticketing app which is a fully customized anvil theme…
It’s unlikely that you’ll experience problems between bootstrap 4 and 3.
The stumbling blocks will be…
taking the html for you custom theme and turning that into a page template
https://anvil.works/docs/client/themes-and-styling/custom-html-templates
As well as converting custom css classes to anvil-roles
It depends how the designer has written the css for you… but i’d say there’s no easy way to take a theme that’s written with traditional css/html/javascript and turn it into an anvil theme without some (serious) work on your part.
e.g. let’s say your designer has
.btn-primary {
color: coral;
}
In anvil you can’t just do <button class=btn-primary>
you have to add a role (btn-primary) for Button components and then change the css from the designer to be .anvil-role-btn-primary
Now instead let’s say you have a basic html skeleton template from your designer.
You can’t just swap this template for the standard-page.html and expect to be able to drag components onto that template using the anvil design editor.
You have to create slots in the template so that you can drag components onto those slots…
The standard template from anvil has 4 slots… tilte, left-nav, nav-right, default
the documentation for this feature is not easy to digest but essential if your aim is to create a custom template that works seamlessly with the anvil design editor…
that said - anvil does utilize many of the base bootstrap classes - the classic theme really has very minimal css overriding the base bootstrap css… and so you may find certain css works out of the box…
e.g. overriding .btn/.btn-default will work just fine…