The following principles serve as general guiding concepts throughout the whole Neos product.
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.
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-
andaloha-
- 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.