General User Interface Principles

The following principles serve as general guiding concepts throughout the whole Neos product.

Overall User Interface Goals

We have set up the following goals to strive for UI-wise:

UI concepts should be evaluated against the above goals.

When implementing the user interface, we should follow these guidelines on a technical side:

Take the pragmatic approach
Augment the frontend website
No iFrame in the content module, generally no iFrames except for bigger modal dialogs
Browser support >= IE9; in the prototyping phase focus on Chrome / Firefox
No polling of data from the server!
A reload should always take you back to a safe state

Overall Goal:

Be pragmatic! We strive for solutions which work out-of-the-box in 95% of the cases; and tell the integrator how to solve the other 5%. Thus, the integrator has to care to make his CSS work with Neos; we do not use a sandbox.

Implementation notes:

All CSS selectors should be fully lowercase, with - as separator. Example: neos-menu, neos-inspector
We use the neos- prefix
The integrator is never allowed to override neos-, typo3- and aloha-
The main UI elements have an ID, and a partial reset is used to give us predictable behavior inside them.
We use sass. To install, use +gem install sass compass+. Then, before modifying CSS, go to css/ and run +sass –compass –watch style.scss:style.css+. This will update style.css at every modification of style.scss.
We use r.js for generating the Includes-built.css file. The command used by the built server is r.js -o cssIn=Includes.css out=Includes-built.css

The Neos UI uses Z-Indexes starting at 10000.

Warning

TODO: Formulate some more about the usage of z-indexes.