[TYPO3-core] RFC #13354: Reorganization of CSS stylesheets and icons within the Core.

[Fabien Udriot]

This is an SVN patch request.

Type: New feature

Branches: trunk

Bugtracker reference:
http://bugs.typo3.org/view.php?id=13354


Problem:
========
Currently, the situation is a bit messed-up regarding the CSS stylesheets and icons organization in 
the Backend. This is mostly due to historical inheritance. As a result, the maintenance of the CSS 
is a tough job. Consequently, the Backend remains difficult to skin.a

Solution:
=========
During the t3uxw, we started the task of re-organizing the whole CSS stylesheets. According to CSS 
good practices, we decided to split up CSS in 2 groups: "structure" and "visual" within two folders. 
All CSS definitions within the "structure" folder deal with the layout, positioning of elements and 
grid-like structure of a page. Every CSS file inside the "visual" directory basically deals with 
colors, background images and so on.

In parallel, we wanted to provide a better icons organization. The TYPO3 Backend uses more than 200 
icons. In order to sort them, TYPO3 took over the specification given by the freedesktop.org Icons 
Naming Specification which tends to group icons within categories. This led to the following 
organization:

images/
-> icons/
---> actions/
---> apps/
---> mimetypes/
---> places/
---> status/

To improve the way the icons are displayed, we implemented a class that will take in charge the 
merging of icons into sprites. Thus, it will reduce the amount of HTTP requests when loading the 
Backend. RFC for this purpose will come separately.

Notes:
======
Because this issue mainly deals with binary file (icons), the "patch" is released in the form of a 
ZIP. In addition of the ZIP, the current draft version of doc_core_css is ready for download. This 
can give a better understanding of the whole skinning mechanism that we would like to introduce in v 
4.4.

Download file here:
http://bugs.typo3.org/file_download.php?file_id=10022&type=bug (ZIP)
http://bugs.typo3.org/file_download.php?file_id=10023&type=bug (SXW)

Beware that installing the ZIP, will not bring a working BE since the sprite's patch will be needed. 
A RFC should be provided by Thomas Allmer soon.

Steps for installing the ZIP on a fresh trunk:

rm typo3/stylesheets.css
rm -rf typo3/sysext/t3skin
unzip refactored-skin.zip
mv refactored-skin/typo3/stylesheets typo3/
mv refactored-skin/typo3/images typo3/
mv refactored-skin/typo3/sysext/t3skin typo3/sysext/

A other way to have a glimpse of the code is to check out the t3uxw trunk:
svn co https://svn.typo3.org/TYPO3v4/CoreProjects/t3uxw/typo3_src typo3_src-uxw

Then, have a look in:
open typo3_src-uxw/typo3/stylesheets
open typo3_src-uxw/typo3/images
open typo3_src-uxw/typo3/sysext/t3skin

Greetings,

Fabien