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


Messages In This Thread
CSS Frameworks - by afcouling - 04-10-2018, 10:01 AM
RE: CSS Frameworks - by phil - 04-10-2018, 02:35 PM
RE: CSS Frameworks - by TimSchofield - 04-10-2018, 05:51 PM
RE: CSS Frameworks - by phil - 04-10-2018, 07:32 PM
RE: CSS Frameworks - by TimSchofield - 04-10-2018, 09:35 PM
RE: CSS Frameworks - by TimSchofield - 04-12-2018, 07:13 AM
RE: CSS Frameworks - by VortecCPI - 04-12-2018, 10:18 PM
RE: CSS Frameworks - by TimSchofield - 04-12-2018, 10:45 PM
RE: CSS Frameworks - by TimSchofield - 04-13-2018, 01:49 AM
RE: CSS Frameworks - by afcouling - 04-13-2018, 12:46 AM
RE: CSS Frameworks - by TimSchofield - 06-10-2018, 06:55 PM
RE: CSS Frameworks - by TurboPT - 06-10-2018, 10:28 PM
RE: CSS Frameworks - by TimSchofield - 06-10-2018, 10:53 PM

Forum Jump:


Users browsing this thread: 1 Guest(s)