Material UI for Web Portal

Frappe Framework App Development
1

I was trying out Material Design for bootstrap
reference : Bootstrap Material Design · The most popular HTML, CSS, and JS Material Design library in the world.

I just hacked in the css/js into web template and made it up and running.
webover/landing.html at develop · mntechnique/webover · GitHub [hard coded]
I copied the components demo mentioned above into the site1.local/landing.html

I’ll build it into assets and push update later.

login.png1366×768 66.9 KB

Dialog.png1325×744 28 KB

menu-navbar.png1325×744 23.2 KB

reset-pass.png1325×744 20.1 KB

edit-profile.png1325×744 34.4 KB

Suggestions and ideas welcome.
source: GitHub - mntechnique/webover

3 Likes
2

Personally, I am not a material fan!

1 Like
3

In this use case, neither am I. Material Design “wastes” a lot of space, and I personally feel that is currently one of the biggest weaknesses of the ERPNext UI presently.

1 Like
4

Feel free to propose an alternative!

5

I am completely agree with rmehta… ERP systems should be reliable systems

6

The alternative is “full width” everything, especially reports, doctype lists, and doctype pages. But that would require a top to bottom UI and UX review by people who are good at that, and then lots of development.

I’ve seen a few posts about this, but I don’t think anyone in the community (myself included) has the desire and resources to make this happen.

Also, don’t interpret “biggest weakness” as “bad” - ERPNext is still one of the best ERPs in the UI/UX area. I’m just pointing out that material design only exacerbates rather than improves what I construe to be a present weakness.

7

Thanks for this valuable contribution.
Is it available as an app that we can directly install on erpnext?
How did you made this?
I am new to erpnext, and think this can be an excellent learning resource.
How can we style the frontend (public website)?

8

@pee

Maybe check out these custom app examples

9

but which repostory in ‘revant’?
are there demo sites to view this?
Thanks,

10

Don’t be shy to connect the dots here…

11

I don’t understand the meaning of this?

12

@pee the only thing i can think is they work for the same company

13

ah okay @woakes070048, that makes sense, thanks!

14

Reference App:

get the app on local bench

bench get-app https://github.com/mntechnique/webover

Install it on your current site or make a new site and install app

bench new-site test_materialui
bench use test_materialui
bench install-app webover
2 Likes
15

thanks @revant_one! is there a demo site too?
this is for the backend site, but ow do you theme the public website?

16

This app does not theme the desk interface. It themes the public front end website as you need it.

By referring this app you can import any js library to web view

2 Likes