cloudstack-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Erik Weber <terbol...@gmail.com>
Subject Re: UI adjustments and refactoring css code
Date Mon, 01 Jul 2019 21:50:15 GMT
I don’t recall their name, but there’s a company that works on an open
sourced alternative ui.

I’m not sure of the state, but last I looked it was promising. I’d be
tempted to suggest a total switch if the other ui is close enough to
feature alike.

Erik

man. 1. jul. 2019 kl. 16:47 skrev Maximilian Weber <M.Weber@ewerk.com>:

> 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
> <https://www.google.com/maps/search/Br%C3%BChl+24,+D-04109+Leipzig?entry=gmail&source=g>
> P +49 341 42649 - 99
> F +49 341 42649 - 98
> m.weber@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.
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message