Forumlar / National / Russian / Скины и дизайн / Скины: делаем грамотно

Предлагаю начать здесь, потом переместить выжимку в Идеас.

Я давно задумываюсь над тем, что нужно изменить в скин-подсистеме движка.

Первое, что бросается в глаза - это то, что у нас в core движка иконки из img/system выводятся явно как img , поэтому для того, чтобы их поменять под свой дизайн, надо редактировать gif-файлы напрямую. Понятно, что никто этого не делает, поэтому мы на большинстве seditio-сайтов видим это серое убожество.

Я (пока не в svn, а у себя) в core заменил все эти вызовы на конструкцию <span> с background image. Т.е.

<img src="skins/$skin/img/system/arrow-up.gif" />

заменил на

<span class="arrow-up">&nbsp;</span>

а в css прописал:

.arrow-up { background: url(img/system/up.png) no-repeat; padding-left: 16px; text-decoration: none; }

Теперь стрелку вверх можно рисовать любой иконкой, какой нравится.
Минус - так как IE не понимает пустой <span> , пришлось вставить в него неразрывной пробел, поэтому ширина конструкции увеличилась - они теперь не 16 пикселей, а где-то 18. Впрочем, решение есть - надо заменить padding-left на padding-right и 16 на 14, но в таком случае мы лишаемся возможности в этом <span> писать текст, чтобы он был рядом с иконкой. В общем, все решается индивидуально для каждой иконки.

Прошелся поиском по ядру, заменил все что увидел, вроде бы все работает. Результат можно посмотреть здесь: http://exampler.net/cotnewskin. Там же можно видеть базовый скин, который я начал рисовать.
Сначала попробовал взять за основу css-фреймворки, но после нескольких дней экспериментов понял, что это будет все-таки не очень универсальное решение.

На сайте пока промежуточный вариант, просто захотелось выложить его для обратной связи, вдруг я что-то не то делаю.