Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Frameworks
04-10-2018, 10:01 AM,
#1
CSS Frameworks
webERP is well known for its broad range of features and robust back-end, but also for its dated user interface and styling.
I have been looking into ways to to modernise the webERP UI.

I started with a review of about 5 of the so-called 'lightweight' css only frameworks, including Mini CSS and Pure CSS, but found these to be overly basic and lacking in features.
I then stumbled across the Bulma css framework. Bulma showed a lot of promise, with a comprehensive set of features, but with a rather large file size. I tested Bulma on webERP, but gave-up when I struggled with horizontal form control layout.

I then turned to the popular Bootstrap framework, with file size and feature set comparable to Bulma, but requiring jQuery. I checked out the existing WEBootstrap theme, but found this didn't make particularly good use of the bootstrap features.
My attempt at applying bootstrap to webERP can be found here.
This experiment was proof of concept only, and was hacked about a bit - the menu functionality is a little broken.
I mainly focused on the login screen and menu styling within index.php.
In order to test the Bootstrap table and form functionality, I also applied styling to UserSettings.php and PcClaimExpensesFromTab.php.

Some highlights:
  • BootSwatch themes - a range of theme 'flavours' can be selected from UserSettings.php
  • Icons from Font Awesome
  • Responsive layouts - test on a mobile device or use your browser dev tools
  • Dissmissible notification boxes
  • Resposive tables (horizontal scrollbar on small screens)
  • Button loading spinners
The obvious downside to Bootstrap is the additional file size, although the component files are browser cached:
  • bootstrap.min.ccs - 142kb
  • bootstrap.min.js - 48.1kb
  • jquery-3.2.1.slim.min.js - 27.4kb
  • font awesome all.css - 294b

A full implementation would required the html in nearly all script to be revised. So no small task, but it could be phased.
The inclusion of jQuery would enable the use of AJAX and jQuery features.

Is this something that the development team would like to get behind?
Please feel free to share your views on the pros vs the cons.

Andy.
https://www.linkedin.com/in/andrewcouling
Reply
04-10-2018, 02:35 PM, (This post was last modified: 04-10-2018, 02:36 PM by phil.)
#2
RE: CSS Frameworks
Yes this would provide a significant face-lift and has always been a weak area for webERP and first impressions count for so much.

I notice the modules link doesn't currently work
I'd like to say we really should bite the bullet on this - but I won't be able to do any of the work and the worst thing that could happen would be to have it half done!!! So it would need developers who want to make this happen to dive right on in and commit to finishing it across all scripts - no mean undertaking!
Only under that scenario could we consider it.
Phil Daintree
webERP Admin
Logic Works Ltd
http://www.logicworks.co.nz
Reply
04-10-2018, 05:51 PM,
#3
RE: CSS Frameworks
My instinct is always to shy away from using these generalised libraries and frameworks. For instance as we only want AJAX functions to work for a specific type of call it is possible to create an AJAX function in very little code. The one I use is 1,042 bytes unminified 853 bytes minified. Jquery have to take into account all possible scenarios almost all of which won't ever apply to us so have to use a lot more code. We are in control of the environment so do not require all the generalisations that come with frameworks.

As an example I knocked up this as a demonstration https://testing.kwamoja.org/index.php of what could be done. Not everything works properly as it needs more work and it was only ever a demo. After you login there is no more screen refresh, everything is done with AJAX. However it uses less than 8Kb of un-minified extra JavaScript and only a little extra css. It requires no changes to the individual PHP scripts, the only changes are to the header and footer scripts.

I am not proposing this interface is adopted, it was just something I did for fun, but it does show what can be done with small amounts of JavaScript and css.

Tim
Reply
04-10-2018, 07:32 PM,
#4
RE: CSS Frameworks
Looks really good I think Tim! Nice :-)
Phil Daintree
webERP Admin
Logic Works Ltd
http://www.logicworks.co.nz
Reply
04-10-2018, 09:35 PM,
#5
RE: CSS Frameworks
(04-10-2018, 07:32 PM)phil Wrote: Looks really good I think Tim! Nice :-)

Now you've made me hurt my arm falling off my chair! Big Grin
Reply
04-12-2018, 07:13 AM,
#6
RE: CSS Frameworks
In my experience what holds back a new interface is not programming skills, but graphical skills, designing the interface, and coming up with graphical elements such as icons and other images under a creative commons license that we can use.

I am the first to admit that as a graphic designer I make a good accountant Big Grin

Tim
Reply
04-12-2018, 10:18 PM, (This post was last modified: 04-12-2018, 10:20 PM by VortecCPI.)
#7
RE: CSS Frameworks
100% agreed! I have a partner who does most all the UI stuff because she is an artist and knows how to get the Users what they need and want. With her UI on top of my app servers we end up with wonderful software.

We have done several jobs for DuPont and the last one blew them away. She took several different disconnected forms and tied them all together into one. This unified data entry and reduced keystrokes and, by nature of the same, reduced errors and omissions and time on the production floor.

I have another PHP/UI guru/artist partner who I am considering using to customize webERP. I will have to pay him but I feel it may be worth the expense.

I am the second to admit that as a graphic designer I make a good engineer...
https://www.linkedin.com/in/eclipsepaulbecker
Reply
04-12-2018, 10:45 PM,
#8
RE: CSS Frameworks
Years ago I met a guy in Africa who was setting up a site where graphic artists and UI designers who were interested in helping FLOSS projects could meet up with people running FLOSS projects and provide assistance. So for instance a project could say "I need an icon for XXX functionality" and somebody would design one.

Unfortunately in my overly busy life I forgot about this until today. I will see if I can hunt out his contact details and see if the site is still going.

Tim
Reply
04-13-2018, 12:46 AM,
#9
RE: CSS Frameworks
I would support the idea of getting some help from a UI design expert.
The question is how to fund it.
The Font Awesome project successfuly raised funds on the kickstarter platform.

Andy.
https://www.linkedin.com/in/andrewcouling
Reply
04-13-2018, 01:49 AM,
#10
RE: CSS Frameworks
(04-12-2018, 10:45 PM)falkoner Wrote: Years ago I met a guy in Africa who was setting up a site where graphic artists and UI designers who were interested in helping FLOSS projects could meet up with people running FLOSS projects and provide assistance. So for instance a project could say "I need an icon for XXX functionality" and somebody would design one.

Unfortunately in my overly busy life I forgot about this until today. I will see if I can hunt out his contact details and see if the site is still going.

Tim

The guy's name was Thomas Peterson and his site is http://www.weekendhacker.net which still appears to be going.

Tim
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)