UGgallery

UPD: Генератор шаблонов теперь находится по адресу Сsstemplater.com

Обновился интересный генератор HTML+CSS шаблонов CSStool.ru. Забыл о нем написать когда он появился. Обратите внимание, вдруг пригодится.

На сайте CSStool.ru, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера.

Список нововведений на сайте создателя сервиса. Полезный апгрейд получился, на мой взгляд.

На просторах рунета появился ресурс Fixed.name посвященный внешне довольно мелкой, но внутренне довольно необъятной теме — вёрстке блоками, фиксированным относительно окна браузера при помщи CSS-свойства position:absolute. Далее »

Собранные Энди Кларком имена классов для обозначения элементов шаблона страницы. С сайтов известных блогеров веб-разработчиков. Чисто “любопытно посмотреть”.

В дополнение к “5-ти советам верстальщику” (совет № 4) и обсуждению, развернувшемуся в комментах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Из всех видов IR на сегодня мне больше всего нравится метод с использованием CSS-свойства content с псевдо-классом :before. Этот метод работает в современных браузерах, примерно у 20% пользователей. По-моему, достаточно для начала. Что делать с остальными восьмидесятью — ниже.

В самой минимальном варианте CSS выглядит так:

h1 {
    overflow: hidden; 
    width: 300px;
    height: 30px; 
    }
h1:before {
    content: url(example.png);
    }

Далее »

Есть несколько способов визуализации блоков при на начальных этапах верстки. Когда есть пустой, или полупустой, блок, и нам хочется увидеть четкие его границы. Чтобы задать нужные размеры и правильно позиционировать его.

С такой задачей неплохо справляется Firefox с расширением Web Developer. Но это решение не подходит, если нужно увидеть блоки в нескольких браузерах сразу: Firefox, Opera, IE 5-6.

Далее »