Микрообновление Thick As Brick

Дней десять назад я опубликовал на Хабрахабре статью о том шаблоне, который я использую для небольших проектов. Статья вызвала живейший отклик и я просто не могу не исправить некоторые найденные в Thick As Brick недочеты.

Вот короткий список, не заслуживающий даже того, чтобы убрать его под кат:

1. Исправлена явная ошибка в именах метатегов (раньше вместо name было написано http-equiv, которую я исправлял при деплойменте проектов)
2. Все 0px (под давлением хабраобщественности ;) ) заменены на обычный ноль.
3. Число значений в margin сокращено (10px 20px 10px 20px -> 10px 20px)
4. Исправлен недочет в margin у заголовков и hr (пиксели преобразованы в em)

Проект по прежнему находится вот тут: http://code.google.com/p/thick-as-brick/

Читать дальше →

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

Я почему вредный был?
Потому что у меня велосипеда не было!

Мультфильм “Трое из Простоквашино”

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

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

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

Читать дальше →

Стандарт правильной верстки: часть вторая

Ну вот наконец-то я добрался и до второй части “стандартов”. Прошел месяц, а может быть даже и больше, блог я существенно проапгрейдил, так что писать в него теперь не стыдно (об этом в другой статье). Сейчас же я продолжу старую песню о правильной верстке. Ready? Steady? Go!

Читать дальше →

CSS filter и CSS expression Vs Internet Explorer 6

Мыши плакали, кололись,
но продолжали жрать кактус
Бородатый афоризм

IE6 не поддерживает PNG. Это знают все. Еще в нем не работают альфа-прозрачность, min-width, min-height, он криво отображает половину сайтов. По этим причинам и еще по сотне-другой других причин 99% верстальщиков желают ему скорейшей и мучительнейшей смерти. Увы, сайты под него делают: слишком он популярен среди пользователей.

Панацеей от многих глюков Internet Explorer-а незаслуженно считаются CSS filter и CSS expression. Однако панацеи не существует, даже в случае с IE.

Читать дальше →

Верстка форм: подпись в input

Лень делает всякое дело трудным
Бенджамин Франклин

Признаюсь честно, я чертовски не люблю верстать формы: это утомительный и не быстрый процесс, да и дизайнеры порой пренебрегают рисованием формочек (или наоборот, придумывают слишком красивые поля для ввода), поэтому и с дизайном приходится повозиться. Возможно, по этой причине я начинаю мини-цикл статей на тему правильной верстки форм. Сегодня я расскажу про label-ы и про их позиционирование прямо в input.

Читать дальше →

Семантическая верстка: имена, комментарии и оформление

Твой код слабее моего
Unreal Tournament 3

Эта статья – продолжение моих предыдущих рассуждений на тему семантической (или все-таки семантичной? :) ) верстки. За запоздалое ее появление прошу прощения: давно лежала в черновиках и я буквально недавно про нее вспомнил. Итак…

“Кривые” и абсолютно не запоминающиеся имена переменных / классов / функций / файлов (нужное подчеркнуть) – ошибка любого начинающего компьютерного специалиста. Спустя пару-тройку лет этот специалист, конечно, перейдет на правильное именование, а еще через столько же времени его код станет действительно хорошим.

Я не претендую на звание идеального верстальщика, однако я попробую рассказать вам про то, как давать правильные имена и писать правильные комментарии в верстке.

Читать дальше →

Семантическая верстка: теги

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

Б. Кригер

Вам доводилось когда-нибудь разбираться в чужой верстке? На 90% веб-страниц черт сломит ногу (а еще на 9% страниц свернет шею): понять нагромождения таблиц и буквосочетаний вроде <tr сlass=”t xl y”> просто нереально. Дело тут даже не в качестве страницы (правильности ее отображения, красоте и т. п.), а в подходе работника к своей задаче. Многим проще сделать и забыть, чем “заморачиваться” на какие-то комментарии, оформление, правильное именование. Увы, порой приходится возвращаться к проекту, сделанному пару-тройку лет назад (еще хуже, если проект был сделан не тобой) и тогда код кажется просто чудовищным: смысл теряется в каше из тегов и текста.

Надеюсь эта серия статей немного прояснит ситуацию: я хочу поговорить о непонятной для многих красоте HTML и семантичной верстке. В этой статье речь пройдет о тегах, а в следующей – об именах и идентификаторах в HTML, об оформлении кода и комментариях.

Читать дальше →