Список элементов, стилей и блоков, которые должны входить в GUI List:
- Базовый цвет фона, цвет текста, размер шрифта (в px), высота строки (line-height)
- Жирный и курсивный текст (strong, em)
- Ссылки (normal, hover, active, visited) + ajax-ссылки (normal, hover, active, visited)
- Заголовки (h1-h6)
- Списки (ul, ol)
- Таблицы (table) с обычными и заголовочными ячейками (td и th)
Для всех нестандартных шрифтов, используемых в проекте, должна быть указана такая информация:
- Название и начертание (Light, Bold, Italic и т.д.) шрифта
- Значение font-weight (300, 400, 700 и т.д.), соответствующее каждому начертанию
- Стандартные аналоги для составления шрифтового набора (font stack)
Все шрифты без подобной информации будут заменены на стандартные во время верстки
- Ширина фиксированной области веб-сайта
- Количество столбцов в сетке
- Размеры отступов сетки
- Ярлыки полей форм (label)
- Цвет текста-заглушки (placeholder)
- Сообщение об ошибке заполнения поля
- Текстовое поле (input)
- Список опций (select)
- Флажки (checkbox)
- Радиокнопки (radio)
- Текстовая область (textarea)
Все типы полей должны быть изображены в таких состояниях:
- Нормальное состояние
- Фокус на поле
- Поле отключено
- Состояния валидации для полей формы: ok, error (с сообщением об ошибке), progress (валидация в процессе)
- Обычная кнопка (normal, hover, active, disabled)
- Основная кнопка (выполняющая основное действие) в аналогичных обычной кнопке состояниях
- Строчное размещение кнопок (горизонтально)
- Блочное размещение кнопок (вертикально, каждая кнопка занимает всю строку)
Для каждого проекта для создания необходимого набора иконок требуется подготовить следующие материалы:
- Квадратное изображение иконки размером 260х260
- Белая полупрозрачная иконка размером 260х260 (для Windows 8)
- Цвет фона для плитки на Windows 8
Все размеры и форматы иконок будут создаваться на основе этих материалов спомощью сервиса Real Favicon Generator
- Иллюстрация с подписью (figure, figcaption) + выравнивание, если ширина картинки меньше ширины контейнера
- Цитата (blockquote) и подпись к цитате (автор или источник)
- Шапка сайта (header)
- Навигационное меню со всеми состояниями ссылок
- Подложка сайта (footer)
Следующие элементы необязательны и применяются в зависимости от проекта:
- Элементы с monospace шрифтом (строчный code, блочный pre)
- Мелкий текст, верхний и нижний индексы (small, sup, sub)
- Стиль аббревиатуры (abbr)
- Цвет текста и фона выделенной области
- "Зебра" для таблиц: цвета чередования рядов таблиц
- Горизонтальное размещение флажков (checkbox) и радиокнопок (radio)
- Список опций (select) с возможностью выбора нескольких опций (multiple)
- Визуальная группа элементов формы (fieldset) и подпись к ней (legend)
- Состояние hover для полей формы
- Выпадающее меню для навигационного меню (normal, hover, active)
- Хлебные крошки (breadcrumbs) и отступы для них
- Ссылки постраничной разбивки (состояния normal, hover, active, visited)
- Полосы состояния (progress bar)
- Модальные окошки, с кнопкой закрытия, цветом подложки (backdrop)
- Вкладки (tabs) с состояниями (normal, hover, active)
- Всплывающие подсказки (tooltip)
- Типовый слайдер иллюстраций со стрелочками (normal, hover, active) и буллетами слайдов (normal, hover, active)
Для каждого из этих оступов нужно показать размеры:
- Маргины для параграфов (p)
- Маргины для заголовков (h1-h6)
- Маргины для списков (ul, ol, li)
- Маргины для таблиц (table), паддинги для элементов td и th
- Маргины для формы (form) и между разными ее полями (.form-group)
- Отступы между соседними флажками и радиокнопками (checkbox, radio)
- Отступы между кнопками в строчном и блочном вариантах размещения
- Отступы для иллюстрации и ее подписи (figure, figcaption)
- Отступы от шапки, навигационного меню и подложки сайта
- Маргины и отступы для блока цитаты (blockquote)
- Паддинги для пунктов меню