NTH-фреймворк
Главное назначение этого фреймворка – ускорение HTML/CSS верстки за счет минимизации работы над типографикой.
В подавляющем большинстве случаев блочную структуру html‑страницы нужно создавать вручную (получается проще, элегантнее и с меньшим по объему количеством кода в сравнении с «универсальными» вариантами), поэтому сократить время верстки можно только за счет минимизации работы с типографикой. При использовании nth‑фреймворка, эта работа сводится к небольшой правке оформления элементов (в «идеальном» варианте приходится править только размер и цвет шрифтов, да оформление ссылок).
Nth‑фреймворк объединяет все «правила хорошего тона» веб‑типографики, делая текст страницы идеальным для восприятия с монитора и содержит стили для печати.
Оглавление
- Особенности
- Принцип работы
- Файловая структура
- Как использовать
- Структура главного стилевого файла
- Типографика
- Лицензия
- Скачать (прямая ссылка: скачать nth‑фреймворк 1.2 83,3 Кб)
- Заключение
Особенности фреймворка:
- Валидный CSS (за исключением
ie6.css, в котором использован expression для реализации «резинового» html–макета с ограничением максимальной ширины). - Кроссбраузерность (насколько она возможна с учетом IE6)
- Использование относительных единиц измерения (em) для размеров и отступов
- Простота модификации (группировка, комментарии в файлах)
- Наличие стилей для печати
- Встроенный jQuery (c плагином Chili) и PNG Alpha Fix v2.0 Alpha (с Background Tiling Support)
Принцип работы
Nth‑фреймворк работает следующим образом:
- Сбрасываются CSS (подключается файл
reset.css). - Подключается свое оформление CSS (подключается файл
style.css). - Вводится коррекция для IE 6 и 7 версий.
- Подключается файл стилей для печати.
Стилевое оформление текста действует по всему документу, однако для некоторых свойств область действия ограничена блочным элементом с id=”wrap” (подробнее см. в разделе «Типографика» этого документа).
Файловая структура
Фреймворк имеет следующую структуру:
[css] | - ie6.css — коррекция проблем рендеринга IE6 | - ie7.css — коррекция проблем рендеринга IE7 | - print.css — css для печати | - reset.css — сброс стилей [img] | - blank.gif — нужен только для PNG Alpha Fix v2.0 Alpha [js] | - [chili] — файлы подсветки синтаксиса плагина Chili | - iepngfix.htc — PNG Alpha Fix v2.0 Alpha | - iepngfix_tilebg.js — PNG Alpha Fix: Background Tiling Support | - jquery.js — JS-фреймворк | - jquery.chili.js — плагин к jQuery | - nth.script.js — собственно, JS для сайта [pict] | - logo.png — PNG-картинка с прозрачностью index.html — макет, демонстрирующий работу фреймворка style.css — главный стилевой файл
Назначения каталогов не требуют пояснений, за исключением папок [img] и [pict] — в первой хранятся изображения, носящие чисто оформительские функции (обычно вводятся на страницу как фон блочных элементов), во второй находятся картинки, выполняющие информационную функцию — логотип, иллюстрации к контенту. (Для некоторых CMS не имеет смысла использовать папку [pict].)
blank.gif используется в PNG Alpha Fix v2.0 Alpha для корректного отображения PNG с прозрачностью в IE6.
Каталог [js] не содержит обязательных для работы фреймворка файлов, однако автор часто использует jQuery в своих проектах, поэтому она включена во фреймворк.
Файл index.html — несложный макет, иллюстрирующий типографику фреймворка.
style.css — главный стилевой файл (вынесен из папки [css] как адаптация к использованию фреймворка с WP).
Как использовать
Чтобы использовать nth‑фреймворк, нужно скопировать файлы фреймворка и прописать внутри тега <head> (возможно, скорректировав пути файлов) следующее:
<!-- Подключение стилевых файлов -->
<link href="css/reset.css" rel="stylesheet" type="text/css" media="all" />
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--[if lte IE 6]><link href=”css/ie6.css” rel=”stylesheet” type=”text/css” media=”all” /><! [endif]-->
<!--[if IE 7]><link href=”css/ie7.css” rel=”stylesheet” type=”text/css” media=”all” /><! [endif]-->
<link href=”css/print.css” rel=”stylesheet” type=”text/css” media=”print” />
<!-- Подключение JS-файлов -->
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javaScript” src=”js/jquery.chili.js”></script>
<script type=”text/javascript”> ChiliBook.recipeFolder = “js/chili/”; </script>
<script type=”text/javascript” src=”js/nth.script.js”></script>
<!--[if lte IE 6]><script type=”text/javascript” src=”js/iepngfix_tilebg.js”></script><! [endif]-->При этом подключать JS‑файлы не обязательно, если нет нужды в их функционале.
Контентная часть должна находиться в элементе с id=”wrap”, однако ничто не мешает, пройдясь по стилевым файлам, заменить wrap на любую другую структуру (к примеру, на content).
Предполагается, что главные блочные элементы создаваемого сайта имеют названия‑праобразы грядущего HTML5: общий оберточный блок имеет id=”wrap”, сайдбар — id=”aside” (подробнее — см. html-макет).
Структура главного стилевого файла
/* Верия, авторство, тип лицензии */
/* HELP */
Небольшая памятка веб‑мастеру – о необходимой последовательности шрифтов, об их размерах.
/* BLOCKS */
Все, что касается блочной структуры html‑макета. Типографические правила здесь отсутствуют.
/* MAIN TYPOGRAPHY */
Основная типографика. Обратите внимание, для <html> задано свойство font-size: 62.5% (это означает, что 1em = 10px), а для <body> — font-size: 1.4em (это означает, что для всего текста задан базовый размер в 14px)
/* #wrap only */
В этой секции вводятся правила, специфические для элемента с id=”wrap”, содержащего контентную часть сайта. Здесь задается нижний отступ для параграфов, списков, таблиц, форм и других элементов контентной части. Здесь же задан и верхний отрицательный отступ для некоторых следующих друг за другом элементов (это, к примеру, чуть «поджимает» список, следующий сразу после параграфа и, как правило, к этому параграфу относящийся).
/* LISTS */
Список стилевых правил для оформления списков – нумерованных, маркированных и списков определений. Поскольку списки часто используются для семантического представления навигации, для первых двух упомянутых типов стили прописаны только для потомков элемента с id=”wrap”.
/* FORMS */
Стили оформления элементов форм.
/* TABLES */
Оформление таблиц.
/* LINKS */
Оформление ссылок
/* TOOLBOX */
Небольшая секция часто используемых стилей.
Типографика
Это самая важная часть описания nth‑фреймворка. Автор собрал массу информации об оформлении текста вообще и для чтения с экрана – в частности. Типографика nth‑фреймворка создавалась как «идеальный вариант веб‑типографики».
Заголовки
Для заголовков первых трех уровней заданы нерубленые шрифты Cambria, «Times New Roman», Times (первый по умолчанию присутствует только в Windows Vista и выше), для 4‒6 уровней используется шрифт основного текста (рубленый). Отступы заголовков визуально акцентируют их, верхний отступ чуть более чем в 2 раза больше нижнего. Изменения цвета к более темному, от 1‑го до 6‑го уровня коррелирует с изменением плотности гарнитуры и шрифта. Заголовки разных уровней заметно разнятся размером и плотностью.
Основной текст
Для основного текста задан рубленый шрифт Arial, размер 1.4em (14 px) и межстрочный интервал 1.5em (21 px). Нижний отступ параграфа достаточен для визуального разделения параграфов без ощущения их разрыва (чуть больше высоты шрифта).
Элементы оформления текста
Оформление элементов сделано с учетом типичного. Для оформления содержимого комбинации тегов <pre><code> используется плагин (для jQuery) Chili (в атрибуте class тега <code> указывается тип кода для подсветки — см. исходный код html–макета).
Списки
Для нумерованных и маркированных списков стили оформления прописаны только для потомков элемента с id=”wrap”, что связано с частым использованием подобного типа списков для семантического обрамления навигации по сайту. Вне элемента с id=”wrap” нумерованные и маркированные списки не имеют отступов и маркеров (то есть, имеют свойства, прописанные в reset.css).
Несколько изменены маркеры у вложенных друг в друга маркированных списков. Не рекомендуется использовать более трех уровней вложения списков.
Если в html‑потоке списку предшествует параграф, список чуть прижимается к нему.
В случае вложенного 2‒3‑уровнего списка, списки 2‑го и 3‑го уровней вложенности имеют небольшой нижний отступ, улучшающий интуитивное структурирование списка.
У маркированного списка, вложенного в нумерованный, задан маркер, не сильно отличающийся по плотности от арабских цифр, используемых в нумерованном списке.
Левые отступы списков подобраны таким образом, чтобы при вложении создавать структуру примерно под углом 45 градусов.
Формы
Для оформления элементов форм (в том числе, для текста внутри <textarea>) использован рубленый шрифт. Оформление графических частей не подверглось изменению.
Элементы <input>, <select> и <textarea> меняют цвет рамки при наведении и обводятся синим цветом при получении фокуса (для IE — с ограничениями).
Таблицы
Возможность использовать таблицы для верстки блочной структуры ограничена. Отступы внутри ячеек таблицы комфортны для восприятия. Каждая вторая строка таблицы подсвечивается (реализовано средствами JS+CSS).
Ссылки
Ссылка в покое имеет синий цвет и подчеркивание, при наведении курсора цвет меняется на красный и подчеркивание убирается. Получившая фокус ссылка имеет черный цвет и подчеркивание; посещенные ссылки меняют цвет с синего на голубой.
Дополнительные стили
Секция /* TOOLBOX */ файла style.css содержит ряд дополнительных стилей:
.hide — скрывает элемент
.show — показывает элемент
img.alignright — для изображений, выравниваемых по правому краю (обтекание, отступы)
img.alignleft — для изображений, выравниваемых по левому краю (обтекание, отступы)
img.aligncenter — для изображений, выравниваемых по центру (отступы)
.relative — прижимает элемент к предыдущему элементу (к примеру, список к предшествующему параграфу)
p.more — прижимает соответствующий параграф к предыдущему элементу, выравнивает текст по правому краю (предназначен для ссылок «далее», добавляет ссылкам стрелочку справа)
Лицензия
Nth‑фреймворк выпускается по лицензии Creative Commons Attribution‑ShareAlike (by‑sa). Этот тип лицензии позволяет перерабатывать, исправлять и развивать произведение даже в коммерческих целях до тех пор, пока указывается авторство и все производные произведения лицензируются на аналогичных условиях. Подробнее на русском языке.
Скачать
Заключение
Nth‑фреймворк изначально базирвался на css‑фреймворке Tripoli. Автор убрал все лишнее (к примеру, смену маркеров ненумерованных списков, добавление кавычек для разных языков), исправил некоторые недоработки (касающиеся стилей элементов форм), сделал некоторые дополнения, чуть изменил тип работы фреймворка (Tripoli действует только на блок с class="content").
Автору будет весьма интересно узнать что думают его коллеги по «цеху» (верстальщики и веб‑мастера) о получившемся подукте. Приветствуются конструктивная критика, мнения и дополнения.
3 декабря 2008
Категория: Web–разработка
Комментировать ↓
Комментарии (уже 4)
Комментарии:
1) # - использование НЕ классов ВООБЩЕ запрещено при верстке, а не поделки, Потому что id создан для скриптов, а class создан для определение стилей.
2) Само собой создать благородный унифицированный шрифт это дело гуд, но вот незадача,нет смысла назначать шрифты по умолчательными, потому что в общем случае сайты с эксклюзивными дизайнами требуют настройки шрифтов.
3) При ошибках warning-php - на сайтах отображаться будет овно, это не всегда приятно сочетается с дизайном.
4) Есть кое какие не совместимости с браузерами, в том числе "LI".
На самом деле интересная идея я кое что подчерпнул, но сразу оценив что производительности это даст отсилы 5%.
Удачи в верстке, надеюсь чем мог подсобил.
Ответить
кем запрещено? кому? :D
да, это для скриптов создавалось. удобство иерархии и отсутствие запретов (по крайней мере мне запреты не известны) делает идентификаторы прекрасным инструментом верстки, используемым часто и обильно всеми (от начинающих фрилансеров до ведущих студий).
>>2) Само собой создать благородный унифицированный шрифт это дело гуд, но вот незадача,нет смысла назначать шрифты по умолчательными, потому что в общем случае сайты с эксклюзивными дизайнами требуют настройки шрифтов.
спасибо, что просветили! Вы так написраете на производство эксклюзивного дизайна в промышленных масштабах, что я прямо преклоняюсь перед Вашей гуруобразностью!
только вот незадача: «настройки шрифтов» — это вообше что? :)
есть некий спектр шрифтов более-менее распространенных на современных компьютерах, есть традиционные формы прописывания их в CSS, но вот настройки шрифтов... :)
изменение шрифтового оформления макета в моейм фреймворке делается сменой 1-2 правил в одном месте CSS файла. удобно и быстро.
>>3) При ошибках warning-php - на сайтах отображаться будет овно, это не всегда приятно сочетается с дизайном.
криворукость вообще плохо сочетается с чем-либо, кроме кривомозгости.
>>4) Есть кое какие не совместимости с браузерами, в том числе "LI".
не знаю такого браузера.
>>Удачи в верстке, надеюсь чем мог подсобил.
судя по тому, что Вы написали в комментах к статьям в этом блоге, в верстке Вы разбираетесь или ну ОЧЕНЬ хорошо или средне-плохо.
нет, ничем не подсобли.
Ответить
Ответить
незачто.
Ответить