Now finished, this is a fresh, fully responsive theme for anvil apps built in Anvil’s very own colour scheme (grabbed from the web), made up of two styles of custom HTML and a custom CSS (which was a right pain to do, not going to lie).
Anywho, here it is:
If there’s general interest, I’m happy to share this with the anvil guys so they can give it a once over and work out if I’ve got anything wrong before I make it clone-able for the community.
Quite a lot of learning here, so I think we can look forward to pretty spectacular UIs as a collective.
Once I got over the first couple of humps it smoothed out. I hope, if nothing else, that writing a tutorial on this and releasing a theme for the community might make it less traumatic for the next person, and then the person after that…you get the idea! I’m going to keep working through this until we can have something which positively meets WCAG 2.2, opening up a world of possibilities for use cases.
Looks nice. Thanks for sharing.
It seems there is no way around it. If I want to enthuse people about anvil.works I really got to dive into html and css. Their slogan really should be changed to ‘’… nothing but python (and html and css)!"
Yes & no. It’s never really boasted of being a website design tool, and I think you can get a goodish looking webapp with the built in themes. If you have no ability or desire to do css/html then you don’t have to, but you will be kinda limited to the designs you’re given.
For me, that’s a good trade off. Each to their own I guess.
And if you want your own theme, you only have to crack open the html and css in one big go and then tiny bites as needed rather than it being an ever present reality. I think that’s a really fantastic option!
Developers who choose to use Anvil tend to be enthused by it’s productivity benefits in building web ‘applications’. There are plenty of examples of parallax scrolling, video backgrounds, and custom design candy in Anvil, but no one wants to see that stuff in a hospital billing application. For the sorts of software I work on, users tend to be 100% satisfied with stock Material Design layouts (maybe with some CSS used for grid resizing, for example) - what’s needed in those environments is a natural, common and easily understood interface specification that doesn’t get in the way of work. Web ‘site’ developers have different goals in mind, trying to make advertising pop and catch attention (i.e., they’re not so interested in manipulating data, as building eye catching layouts). You can build interface design, and additionally useful functionality with any custom HTML/CSS/JS you want in Anvil (for example, the Mermaid diagrams I posted a few week ago, or the integrations I’ve done with JS 3D game and VR libraries - Anvil didn’t limit that at all, and made the integration with Python easy) - doing graphic design just tends to not be the bread an butter of most developers who use Anvil to productively manipulate data with a web framework. We are enthused that we can build and manage applications so productively. Anvil makes a world of difference in the speed and joy with which most commonly required application functionalities can be provided to clients who have typical business needs. Clearly, Anvil isn’t a replacement for tools such as Figma, but I’m not enthused by Figma nearly as much as I am by Anvil, for the work I do.
Wang any HTML you like in and then just drop the anvil slots. Take anything, even from Figma. There’ll be a little bit of mucking around - but that’s most because of responsive behaviours, and it’s done.
I’m glad I’m over the hump now because it’s going to make a huge difference - basically allowing the power of anvil to flex in an out of other design systems. Anvil will change the way web apps are designed. Couple of years in, there’s nothing like it.
I’m already wondering what Python 3.13 and JIT will change.
