Ways to built professional web apps with anvil

Anvil Q&A
#1

Anvil’s drag and drop builder is good but we can’t do lots of coustumisation with that to built a professional website.I know it can be done with css roles,but I can’t find many documentation on that topic .So can anyone pls explain how to add css role to a component with an example?

#2

When you say build a professional website - are you talking about building a web app or a traditional website?

#3

A web app

Not a basic or a classic web app but a good looking or professional looking web app…

#4

Sounds like maybe you’ve seen this part of the docs already? Anvil Docs | Themes and Styling

Here’s an example I did a while back, based on a CSS trick I found online somewhere (and should have cited, in retrospect): Hangouts-like Chat Design

You can also find other examples in the Forum or in the templates and example builds here: Anvil | Examples

2 Likes
#5

Your question sounds too open, it’s unlikely that you will get a satisfying answer. Do you already have a working app that doesn’t look professional?

If yes, then try asking a question like “that’s what I have in my working app and that’s what I would like to change”.

If no, then it’s way too early to ask about how to make an app look professional.

#6

@jack it can be done.
here is an example of a design set I did for a client.

I can’t share a clone link unfortunately. Not fair towards someone that paid for it.

#7

Well, there is nothing you can’t do with anvil. Anvil’s drag and drop builder is easy enough for beginners who have no knowledge about css or html.

However, if you know css and html, who is there to stop you from implementing them in your app? You can apply CSS roles to your components or build an entirely new component using Custom html.

PS: neither am I an anvil staff nor do I have any personal interaction with them. Just defending Anvil here because it has impressed me.

2 Likes
#8

Can u explain how to add css role to a component?

#9

This doc will explain everything.

Basically suppose you want to make a button more beautiful. So you go to your theme.css and add this

.anvil-role-beautifulbutton {
border-radius: 25px;

(whatever other css you want to add here) 
}

Then you go to your roles and add a role called beautifulbutton. 

Then you can select this role for your component from the DropDown and the CSS will get applied to the button.
1 Like
#10

Thanks for the support…

1 Like