UGgallery

Рекомендую обратить внимание на новинку в области HTML-CSS-шаблонов: “Техника Gordi” как ее сам автор называет.

• Страница с примерами;
• Статья с разъяснениями.

Самое интересное в этом шаблоне для меня:

• Единый набор HTML-элементов для разных вариантов колонок. Минимум экстра-разметки.
• Резина и фикс, на выбор. Резина 100%-й ширины или с ограничениями на max-min-width.
• Среди вариантов — шаблон в три колонки: центральная — резиновая, боковые — фиксированной ширины, с правильным расположением колонок в коде (content — first).

Последнее — задача, так и не нашедшая приличного решения у западных товарищей. Мы, похоже, решили ее. Я, надеюсь, имю право говорить “мы” :) (Вы поймете почему, прочитав статью с разъяснениями.)

Там нет кода готового к немедленному употреблению, как мне кажется. Это значит, что для практического использования шаблоны можно и нужно дорабатывать под свои нужды: дополнительная разметка, хаки, приемы по вкусу. По-моему, это хорошо. Начинающим будет непросто, но для опытных — чем заготовка дальше от конечного продукта, тем больше свободы.

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

Спасибо Gordi за проделанный немалый труд!

Никита Селецкий передал мне эстафету советов по вёрстке. Требуется дать 5 советов верстальщику по теме html-css. Идея мне нравится. Спасибо, Никита!

Вот мои советы:

1. Проверяйте качество верстки простым отключением CSS. Страница должна выглядеть простой, логичной и аккуратной. На ней не должно быть видно элементов оформления, но контент и навигация должны оставаться доступными, легко находиться и читаться.

   Далее »

Браузер IE пятой и шестой версий не поддерживает CSS-свойства “min-width” и “max-width”. Для замены, Neutrino посоветовал использовать expression. (Удачная оказалась мысль: латать дыры IE средствами самого IE.)

В комментариях возник ряд возражений и альтернативных решений. Далее »

Забавное наглядное пособие для тех, кто начинает изучать CSS сделал один бразильский товарищ: CSS Sandbox

Вверху окна блок текста, внизу — CSS-свойства. Щелкаем мышкой по разным свойствам, наблюдаем как они применяются к блоку текста. Красным отмечены текущие свойства.

Имеет один недостаток: полностью работает только в Опере. В IE 6 – частично (браузер, естественно, не все свойства отображает). В Firefox 1.5 и Safari 3, к сожалению, вообще не работает. В других не смотрел.

Агат инициировал обмен мнениями по вопросу именования стандартных блоков. Надеюсь народ не будет спать, тогда может получиться интересная дискуссия, полезная для всех. Далее »

Букмарклет Syncotype помогает выравнивать текст по сетке с единым вертикальным шагом. То, что я по-нашему, по-простецки, называю интерлиньяжной сеткой. Syncotype нарисует эту сетку вам на любой странице.

Перетащите ссылку на панель браузера:

Syncotype

Жмете на ссылку. Редактируете шаг и смещение сетки, если нужно. Жмете на “Syncotype It!” — и готово!

• Демо-страница Syncotype
• Запись в блоге автора (на англ.)

Поддерживаются браузеры:

• Safari 2, 3
• IE 7
• Firefox 1.5+
• Opera 8+

Для работы, букмарклет подгружает внешний скрипт. В офлайне, наверное, работать не будет.

Вспомнился скрипт Виталия Харисова для рисования сетки из вертикальных направляющих поверх страницы.

Для Оперы есть похожий инструмент: виджет easyGRID!. А во фреймворке Blueprint, например, для того же самого используется обычная графический файл, который, при изменении шага сетки, нужно переделывать в графическом редакторе.

Blueprint — модный фреймворк (он же — шаблон) с уклоном в типографику и минимализм.

Главная особенность — выравнивание элементов по сетке (или “сеткам?). Используется модульная сетка с вертикальными модулями, и сетка с шагом равным межстрочному расстоянию основного текста (т. е. “интерлиньяж абзацев”). Про себя, последнюю сетку я называю “интерлиньяжной”. Не знаю как это будет правильно. Пока не нашел в литературе никакого термина.

Собственно, достаточно посмотреть на демо-сайт Blueprint-a чтобы понять основы. Сетки оставлены видимыми.

Еще из модных фишек, бросившихся в глаза, реализована “висячая” пунктуация (кавычки).

Интересный фреймворк. Достоин изучения.

В блоге, где я увидел ссылку на этот фреймворк, в комментариях народ пенял на то, что мол размеры шрифтов заданы в пикселях. Так вот по моему это не баг, а фича. При использовании “интерлиньяжной” сетки, настраивать шрифты проще в пикселях — чтобы всегда попадать в сетку. А потом пиксели можно быстренько перевести в относительные единицы.

Интересная конструкция у главной страницы сайта Сontec-kg.de. Совмещение движения в двух осях с фиксированным элементом дизайна — колонкой с меню и логотипом. Когда прокручиваешь страницу, ощущения необычные :) Такое вижу в первый раз.

Спасибо отличному ресурсу CSSBlast за ссылку.

Вышел в свет проект CSS-framework. Думаю, мы скоро увидим не один подобный проект разных авторов.

CSS-Framework — это набор css-стилей, упрощающий создание нового сайта. Вам не придётся каждый раз придумывать и описывать то, что уже давно придумано и описано.

Фреймворки напоминают шаблоны, но только на новом витке эволюции. Шаблоны хорошо подходили для изучения приемов верстки, но применять их на практике без серьезной переработки было затруднительно. Возможно потому что шаблоны были результатом экспериментов отдельных разработчиков-энтузиастов.

Фреймворки же должны вмещать опыт практической реализации множества проектов выполненных в полевых, а не лабораторных условиях.

Чтобы гарантировать практичность затеи нужно привести различные фреймворки к единому знаменателю. Примерно так: стандарты оформления кода, стандарты именования элементов, типовые имена и структуры. Пригодится для будущей совместимости фреймворков.

Собрал свои любимые русскоязычные ссылки по CSS-верстке на одной странице. Назвал это “Учебник” по CSS-верстке (сборник статей). Оказывается, на русском уже есть материалы по всем основным темам. Хотя одна англоязычная все же затесалась, но только потому, что не смог быстро найти русский аналог, а он наверняка есть.

Часто приходится давать ссылки разным людям на статьи по CSS, семантической верстке и т.д. Люди разные, а ссылки одни и те же.

Есть сайты предлагающие материалы по CSS. Проблема в том что сайтов таких уже очень много, информации на них полно, она очень разного качества, зачастую не первой свежести. И информация эта как правила свалена в кучу, которую никто не перетряхивал. Начинающему трудно понять с чего собственно начинать. Что важно, что актуально? Что в каком порядке изучать?

Я попытался собрать относительно небольшой список статей, отвечающий на основные вопросы. Часто задаваемые вопросы. В идеале: собрать минимум материала, после освоения которого, человек смог бы верстать по стандартам простые сайты на профессиональном уровне.

Идеала я пока не достиг, так что прошу считать это “бета-версией” учебника. Тестовым пуском. Комментарии, поправки, ссылки — категорически приветствуются.

А еще спасибо авторам и переводчикам статей, вошедших в сборник. Их опыт не раз пригождался мне и еще очень многим.