TYPO3 Core

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.

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 attached. This can give a better understanding of the whole skinning mechanism that we would like to introduce in v 4.4.

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
(issue imported from #M13354)