Bug Reference

https://issues.apache.org/jira/browse/CLOUDSTACK-4748https://issues.apache.org/jira/browse/CLOUDSTACK-4749

Branch

ui-restyle

Introduction

Need a visual 'makeover' of the UI, to promote better usability and a more fluid user experience in modern browsers.

Purpose

The current incarnation of the UI was developed over 2 years ago, and is falling behind with modern browser standards. While the UI workflow will remain the same, the visual look-and-feel will change:

-Header
-Navigation
-Common components: Buttons, text fields, dropdowns, tables
-Use CSS3 transitions instead of jQuery animations
-Use grid system for layout
-Use consistent color themes, matching other ASF CloudStack branding

Additionally, the CSS code needs a major refactor – with the UI becoming increasingly complex, there needs to be more reusability for UI styling for common widgets. This will be accomplished with SASS, the Bourbon helper/mixin library and associated 'Neat' grid system.

This first iteration will keep the same functional resolution of 1280x1024 but will later be converted to a responsive fluid-width system.

Screenshots

Screenshots showing concept for new UI (also viewable in git branch):

References

http://sass-lang.com/ – SASS library, using the SCSS variant

http://bourbon.io/ – Bourbon SCSS mixin library

http://neat.bourbon.io/ – Semantic SCSS grid layout system

http://daneden.me/animate/ – CSS3 animation library

Architecture and Design description

(Place new SASS organization scheme here)

UI flow

  • Overall UI flow should stay the same for now, but if there are changes list them here.

IP Clearance

  • Adding the following SCSS/CSS libraries:

SASS - MIT - http://sass-lang.com/docs/yardoc/file.MIT-LICENSE.html
Bourbon - MIT - https://github.com/thoughtbot/bourbon/blob/master/LICENSE
Bourbon Neat - MIT - https://github.com/thoughtbot/neat/blob/master/LICENSE
animate.css - MIT - https://github.com/daneden/animate.css (see License section)

  • No labels