Выкладываю фреймворк, написанный для себя.
Причина создания: надоело каждый раз при верстке нового сайта заниматься одним и тем же — переделывать мой любимый Tripoli (исправляя его баги, добавлять свойства разметки); добавлять JS-фреймворк jQuery, создавать типичную HTML-структуру. Решил объединить часто используемые мной элементы в единое универсальное целое.
Делал для себя, то есть — аккуратно и хорошо.

Файловая структура


[css]			папка с файлами стилей
  |- ie6.css		файл стилей для Internet Explorer 6
  |- ie7.css		файл стилей для Internet Explorer 7
  |- print.css		файл стилей для печатных устройств
  |- reset.css		файл, сбрасывающий стили браузеров
[img]			папка для декоративных изображений
  |- blank.gif		однопиксельный прозрачный GIF
[js]			папка для ява-скриптов
  |- jquery.js		JS-фреймворк jQuery
  |- script.js		файл скриптов
[pict]			папка для информативных изображений
iepngfix.htc		устранение проблем IE6 с PNG
index.html		html-макет
style.css		ОСНОВНОЙ файл стилей

Примечания и пояснения
  • Основной CSS-файл вынесен в корень (адаптация под работу с WordPress).
  • Добавлены отдельные файлы стилей для Internet Explorer версий 6 и 7.
  • Все изображения, используемые в верстке для декорирования, размещены в папке [img] (следует добавлять их на страницу в виде фонов блоков, но не тегами img).
  • Все изображения, используемые для отображения значимой информации, размещены в папке [pict] (добавлять их на страницу следует с помощью тега img).

HTML


HTML сверстан безтаблично, семантически и валидно (XHTML 1.0 Transitional).
Это фиксированный по ширине двухколоночный макет, у которого левая узкая колонка (.sidebar) в HTML-потоке следует за основной частью (.content).
Смотреть макет.
Файл index.html имеет следующую структуру:

#all-site
  #header
    .site-logo
    .site-description
  #navigation
  #wrapper
    .content
      .content-block
    .sidebar
      .sidebar-block .search
      .sidebar-block .login
      .sidebar-block .contact
      .sidebar-block .advert
  #footer

Теги div снабжены комментариями с классами (идентификаторами) закрывающегося div.
Как видно, блок .sidebar имеет несколько типичных вложенных блоков.

CSS


Основан на фреймворке Tripoli. Файлов стилей несколько, все они подверглись доработке.

Особенности и отличия от Tripoli
  • Добавлены стили оформления HTML-макета фиксированной ширины (980px — общая, 690px — контентный блок, 219px — сайдбар), выровненный горизонтально по центру окна браузера.
  • Основные блоки разделены серым бордюром.
  • Свойства, прописанные для основной типографики распространяются на #wrapper — то есть и на .content и на .sidebar (в оригинале Tripoli свойства применялись только к контентному блоку).
  • Устранена проблема с input[type='password'] (в Tripoli не прописаны некоторые свойства, в результате, input с этим параметром отличался от остальных; в IE проблема осталась).
  • Нумерованные и ненумерованные списки теперь чуть прижаты к предшествующим параграфам (p+ul и p+ol).
  • Добавлены сервисные классы .hide, .right, .left, .more. (Класс .more, если задан для параграфа, прижимает параграф к предыдущему элементу в потоке, к ссылке, находящейся внутри p.more добавляется символ “→”)
  • Для тегов sup и sub назначен рубленый шрифт.
  • Для тега big назначен увеличенный шрифт.
  • Исправлена проблема с многоуровневыми списками нумерованного, ненумерованного и смешанного типов.
  • Добавлено изменение цвета в ячейках thead, изменение цвета фона строки таблицы при наведении (не работает в IE, проблема решена с помощью JS).
  • В оформлении цитат использованы «елочки» (французские кавычки), мультиязычная поддержка кавычек убрана.
  • Для IE (6 и 7) принудительно скрыты маркеры списков в сайдбаре.
  • Для IE7 увеличены внутренние отступы textarea и input, изменены внутренние отступы кнопок.
  • Убрано свойство ссылок position: relative; padding: 0.3em 0 .1em 0;.
  • Множественные добавления и исправления в стилях для печати.
Структура style.css (основной файл стилей):

/* Название, данные о файле*/
/* Памятка верстальщику */
/* данные о цветах, используемых в макете */
/* BLOCKS */
[Описание блочной структуры]
/* TYPOGRAPHY */
[типографические правила]
  /* SIDEBAR ONLY */
  [типографические правила для .sidebar]
/* SERVICE */
[сервисные правила]
/* DESIGN ELEMENTS */
[элементы оформления добавочных блоков]

JavaScript


NTH-фреймворк имеет «на борту» jQuery 1.2.6.

Особенности
  • Добавлено выделение tr при наведении (для IE6; для нормальных браузеров дублировано через CSS).
  • Добавлено изменение параметра value для тега input поисковой формы при получении фокуса.

Лицензия


NTH-фреймворк распространяется по лицензии Creative Commons Attribution-ShareAlike (by-sa)
Этот тип лицензии позволяет перерабатывать, исправлять и развивать произведение даже в коммерческих целях до тех пор, пока указывается авторство и все производные произведения лицензируются на аналогичных условиях.

Скачать NTH-фреймворк


Скачать с моего блога.

Послесловие


Не исключены баги (и просто проблемы) верстки. Буду рад, если Вы обратите на них внимание. Собственно, создавая этот топик, я очень надеюсь, что коллеги укажут на проблемы и ошибки, возможные дополнения.

UPD: пост перенесен в блог «Web-разработка»