Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.
Однако как быть с сайтом, для которого надо сверстать пару-тройку типичных страниц? Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов. Что делать?
Чтобы решить эту высосанную из пальца нетривиальную задачу я написал простейший шаблон для верстки, который сильно облегчил мне работу над проектами. Шаблон примитивен и прост (потому так и зовется), на звание фреймворка ни в коем случае не претендует (минус в карму тому, кто обзовет его фреймворком! ;) ). Он несет в себе заранее объявленные CSS-классы для работы с меню, списками, формами, ресеты основных тегов (вроде сброса отступов у форм и правильных отступов у
) и еще кое-какие полезные для меня вкусности.
Для самых нетерпеливых я дам ссылку на проект в 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-файл. Для дальнейшего [дописыванияk - однопиксельного gif-а images/common/x.gif
Файл пригождается в особо редких случаях
Скачать шаблон можно отсюда в архиве или заэсвэнить свежую версию (архив и версия в SVN идентичны).
Я очень надеюсь, что эта статья сподвигнет других пользователей если и не воспользоваться своими наработками, то хотя бы заставит их написать что-то свое и рассказать об этом в комментариях ;).
