Thick As Brick – простейший html шаблон для верстки

Я почему вредный был?
Потому что у меня велосипеда не было!
Мультфильм “Трое из Простоквашино”

Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.

Однако как быть с сайтом, для которого надо сверстать пару-тройку типичных страниц? Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов. Что делать?

Чтобы решить эту высосанную из пальца нетривиальную задачу я написал простейший шаблон для верстки, который сильно облегчил мне работу над проектами. Шаблон примитивен и прост (потому так и зовется), на звание фреймворка ни в коем случае не претендует (минус в карму тому, кто обзовет его фреймворком! ;) ). Он несет в себе заранее объявленные CSS-классы для работы с меню, списками, формами, ресеты основных тегов (вроде сброса отступов у форм и правильных отступов у <p>) и еще кое-какие полезные для меня вкусности.

Для самых нетерпеливых я дам ссылку на проект в Google Code, а самым любопытным, я расскажу, что Thick As Brick состоит из:

• html-файла index.htm
  Этот файл содержит в себе ссылки на стили и яваскрипты, пустые метатеги и проверку наличия/отстутствия яваскрипта (более подробно о последнем пункте можно почитать в блоге у Виталия Харисова);
• css-файла css/common.css
  Файл содержит минимальный набор ресетов (для body,  a img, form, p и заголовков) и базовый набор классов (.no-margin, .no-float, .pseudo-link, ul.news, ul.menu, ul.tiles, table.reset, ul.reset и т. д.). Предполагается, что верстальщик не будет менять этот файл, а будет редактировать css/custom.css, речь о котором пойдет ниже
• css-файла css/common-ie6.css
  Файл отвечает за совместимость самых общих классов с нашим любимым IE6
• css-файла css/custom.css
  Файл несет в себе те стили, что можно менять в процессе работы над конкретным проектом (исходный custom.css пуст и содержит только комментарии ;) ).
• css-файла css/custom-ie6.css
  Этот стилевой файл также обеспечивает совместимость css/custom.css с  IE6.
• js-файла js/script.js
  Пустой js-файл. Для дальнейшего “дописывания”
• однопиксельного gif-а images/common/x.gif
  Файл пригождается в особо редких случаях

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

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

• Оставить комментарий (2)
• Теги: CSS, HTML, О верстке, семантическая верстка, семантичная верстка