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:

  • Reliable editing
  • Predictable UI Behavior
  • Immediate feedback for the user
  • Built with the web - for the web

UI concepts should be evaluated against the above goals.

Technical guidelines / 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

CSS Guidelines

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.


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