HTML/CSS Evangelist

Размышления на тему HTML верстки

Вчера получил от дизайнера psd-файл (вообще, мне часто приходится иметь дело с «псдшками» – я ведь с ними работаю). Но, вчера дело было не совсем обычным :) Нестандартность ситуации заключалась в приёме сжатия файла – в нем были отключены все слои.

Честно говоря, я впервые встретил именно такой способ уменьшения размера psd-фалов , хотя на Хабре он упоминался. Ранее мне были известны некоторые иные методики сжатия psd, о которых я и хочу рассказать Вам сегодня. Читать далее »

После некоторой паузы были внесены очередные обновления в m5 css framework. На этот раз основные изменения касаются форм.

По порядку:

• Обновилась версия jQuery – теперь автоматически подключается последняя версия из ветки 1.3
• изменились отступы для форм
• немного поработал с checkbox и radio
• Исходные коды теперь доступны и через Google Code
  
• Добавился новый класс m5formsNormalize применять надо для input[text,password], select, textarea. При использовании этого класса все формы становятся одинаковой ширины (саму ширину формам надо будет указать  предварительно через css, пока желательно в пикселях, в скором времени будут поддерживаться и проценты, точнее они поддерживаются, только не пересчитываются при изменении размера окна :-) ). Что б понять проблему с которой я боролся, прикреплю картинку, полностью ее описывающую.

Третье, и пожалуй, самое существенное обновление m5 css framework

1. Изменено поведение курсора при наведении на input
2. Для select в FF3 справа появился отступ, исправлено
3. Полностью пересмотрен reset.css, за основу взят ластик от Эрика Майера. Моя доработка заключается лишь в том, что все стили для тега font наследуются от родителя, соответственно работать структура вида <font size=»5″ color=»red»>TEXT</font> не будет – отучаем клиентов от вредных привычек :)
4. Полностью перестроен print.css – многое взято с Hartija

Не смотря на то, что переделано два модуля, обратная совместимость сохранена :)

p.s. Отдельное спасибо Вадиму Макееву за дельные советы и отличный доклад.

Я рад, что хоть кто-то читает это блог :)

Сегодня поступила вполне конструктивная критика, второго пакета обновлений m5 css fremework.

А именно, то, что страница с примером не валидна и имеет 6 ошибок, а так же использование атрибута align у картинок.

Почему я то сделал? Потому, что почти на каждом втором проекте, ко мне стучаться с жалобами на то, что картинки с атрибутом align отображаются некорректно – как правило нет рамок у картинок и нет отступов.

Что -же касается валидатора.

Я в никоем разе не настаиваю на том, что всегда, везде и при любых обстоятельствах использовался именно strict. Поэтому на Демо странице используются теги, которые не рекомендованы для использования в strict режиме. Присутствуют они для того, что-б показать, что они есть, про них не забыли и они имеют соответствующее оформление.

Повторюсь:

1. align – для друрацких визинг редакторов и менеджеров, использующих старый код
2. устаревшие теги, для того, что про них помнить и иметь обратную совместимость html4.01 и Transitional

Очередное обновление m5 css framework

1. Изменен способ вставки favicon.ico
2. Добавлена картинка favicon.ico
3. Добавлена рыба «Съешь же ещё этих мягких французских булок да выпей чаю. Brick quiz whangs jumpy veldt fox!»
4. Добавлен обработчик для картинок, с выравниванием left | right, заменяется соответственно на float:left|right + добавляются отступы слева|справа и снизу

1. изменен способ подключения CSS стилей, с @import на link
2. добавлена ссылка на favicon.ico
3. удалены региональный настройки
4. все CSS файлы теперь имеют кодировку utf-8
5. у ссылок убрано a { position: relative; padding: 0.3em 0 .1em 0; }
6. подключен jquery, берется из репозитария google, последняя версия линейки 1.2.х
7. подключен файл js/scripts.js, будет содержать скрипты
8. добавлена автоматическая очистка содержания для инпутов, содержащие класс .autoclear (действие срабатывает при клике на инпут)

Что это такое?

M5 CSS framework – это набор css правил, облегчающих разработку сайта. Основная польза от него – это вполне приемлемая типографика.

Я принципиально не хочу вносить в него стили для наброски макета, такие как – шапка, подвал, меню и тд и тп, оставляя полную свободу разработчику.

Последнюю версию можно посмотреть по адресу  banzalik.ru/loremipsum, или-же скачать с m5css.zip

M5 CSS основан на Tripoli, мною был переработан и дополнен под конкретные задачи.

Основные отличия от Tripoli:

• исправлен баг с password полями
• добавлен clearfix
• убрана локализация под разные языки (оформление цитат)
• у body по умолчанию белый цвет
• изменены некоторые базовые шрифты

p.s. M5 CSS framework использует компания media5 на своих проектах