We want to contribute our work on a new iconset and styles for the existing UI. The User Interface of Cloudstack has (relatively to web technology and design history of the past years) a pretty outdated state. Thus it’s necessary to scrutinize if several techniques and styles are still state of the art and replace them step by step. Now out target of UI works is to do optical UI improvements will perhaps help to increase the number of audience of Cloudstack community users as well and of cause improves the user experience for general. In addition UI enhancements we should refactoring css-code until it’s easier to maintain, read, organize, extend, simplify and automatize.
Here you can find a list of general UI enhancements: * improve or unify icons and vectorize them as well * replace hard gradients and hard drop shadows with more flat designs (hard means very obvious visible, which was on no time best practice) * unify and modernize some hover effects and transitions, as well as colors and paddings etc. For the initial step we already made a screenshot of the improved Cloudstack UI frame (header and navigation). Open this screenshot to see it ––––––––– https://ibb.co/F3LT7jL ––––––––––––––– We adjusted the menu icons, the sizes of the header and made the design more flat. And we will allocate the Illustrator file next to the new svg icons to provide the possibility of a file versioning via GIT and to make it possible for the community to do icon changes faster. In future we could advance this Illustrator file with all icons used on Cloudstack. Let’s face the css-code quality now. Writing css may appear more complex than expected for most developer, especially if the main css-file is over 10000 lines large. It’s almost impossible to prevent redundancies or outdated css-hacks and prefixes as well as importance, specificity and source order of css rules in such a huge file! Therefor we need a tool that automate most of this tasks. A technology stack of Node, Gulp and SCSS will do it here. Node package manager NPM can provide powerful packages that are executable in Gulp task and SCSS allows us to use features like variables and linters and organize our rules more professional. Here you can find a list of general refactoring enhancements * split 10000+ lines css-file into many modular scss files and organize them inside folders. * remove outdated css rules or rules that are no longer supported by almost all modern browser * create a possibility to minify final transpiled css file * add a linter-tool that warns the developer from doing bad practices * add a autofix-tool that unifies some parts css-code automatically We are happy to contribute this enhancements to the community. Max __ Maximilian Weber Frontend Developer EWERK IT GmbH Brühl 24, D-04109 Leipzig P +49 341 42649 - 99 F +49 341 42649 - 98 m.we...@ewerk.com www.ewerk.com Geschäftsführer: Dr. Erik Wende, Hendrik Schubert, Frank Richter Registergericht: Leipzig HRB 9065 Zertifiziert nach: ISO/IEC 27001:2013 DIN EN ISO 9001:2015 EWERK-Blog<https://blog.ewerk.com/> | LinkedIn<https://www.linkedin.com/company/ewerk-group> | Xing<https://www.xing.com/company/ewerk> | Twitter<https://twitter.com/EWERK_Group> | Facebook<https://de-de.facebook.com/EWERK.IT/> Auskünfte und Angebote per Mail sind freibleibend und unverbindlich. Disclaimer Privacy: Der Inhalt dieser E-Mail (einschließlich etwaiger beigefügter Dateien) ist vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung, Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie die E-Mail (einschließlich etwaiger beigefügter Dateien) von Ihrem System. Vielen Dank. The contents of this e-mail (including any attachments) are confidential and may be legally privileged. If you are not the intended recipient of this e-mail, any disclosure, copying, distribution or use of its contents is strictly prohibited, and you should please notify the sender immediately and then delete it (including any attachments) from your system. Thank you.
