Документация IPS4

Знакомство с CSS фреймворком

Для различия между CSS классами HTML элементами, составляющими часть фреймворка IPS4 и теми, которые находятся вне этого фреймворка, и для составления логически правильной для понимаю структуры, приняты следующие наименования.
Классы и элементы фреймворка
CSS фреймворк IPS4 делится на свободно определяемые 'модули'. Группы модулей вместе связываются в один стилевой файл, с целью сделать понимание более чётким, какие стили были применены к данному элементу, а также для более простого поиска этих стилей при редактировании CSS файлов.
Все классы и элементы фреймворка имею название в формате ipsМодуль, где Модуль это тип определяемого стиля. В рамках модуля, дополнительные классы могут быть определены в формате ipsМодуль_опция. Обратите внимание, что название модуля и опция используют стиль написания "ВерблюжийРегистр" (Wiki: стиль написания составных слов, при котором несколько слов пишутся слитно без пробелов, при этом каждое слово пишется с заглавной буквы. Стиль получил название CamelCase, поскольку заглавные буквы внутри слова напоминают горбы верблюда), с разделением названия модуля и опции знаком подчёркивания.
Как правило, элемент получает базовый класс модуля, а также некоторые опции. Бываю случаи, когда необходим только опция класса; смотрите документацию отдельного модуля.
В целом, фреймворк не должен быть использован с ID элемента, т.к. это ограничит его использование на одной странице. Исключение из этого правила является аспекты макета модуля, где структура страницы будет осуществлена только единожды.
Пример названий фреймворка:
.ipsMenu .ipsTabs_item #ipsLayout_mainArea .ipsComment_hasChildren Написание CSS для пользовательских тем
Как правило, вы не должны редактировать CSS код фреймворка напрямую. Это приведёт к проблемам при произведении последующих обновлений программного обеспечения, или, по крайней мере, сделает это более трудоёмким процессом.
Поэтому, все ваши изменения должны располагаться в специальном файле custom.css, расположенном в /core/front/custom/. Вы можете создать другие CSS файлы в данной директории, если хотите, они также будут включены автоматически. CSS файлы в директории custom не изменяются при обновлении IPS4, то есть ваши изменения будут безопасно храниться не зависимо от версии IPS4.
Определение элементов, использующих необходимые CSS классы
При редактировании темы, мы рекомендуем воспользоваться инструментами разработки, доступными в вашем браузере для инспектирования страницы и выяснения, какие CSS классы применяются к нужным элементам. Обратитесь к документации вашего браузера чтобы найти активацию этих инструментов. Это пример Web Inspector в Chrome:

Написание CSS для пользовательских приложений
CSS код для ваших пользовательских приложений располагается в директории <app>/dev/css/front/.
Макет: колонки

Модуль колонки, в отличие от модуля сеток, предоставляет классы, которые активируют макеты, позволяющие создавать как фиксированные, так и резиновые колонки. Этот макет часто используется для фиксированных боковых блоков с резиновыми областями контента, например. Дополнительные классы используются для сворачивания макета на устройствах с небольшим экраном.
Использование
Макет колонки состоит из элемента оболочки (wrapper), с элементами колонок, являющихся прямыми потомками оболочки. Никакие другие классы макета не должны быть применены непосредственно к элементам столбцов.
Пример макета столбца:
<div class='ipsColumns'> <div class='ipsColumn ipsColumn_medium'>Фиксированный колонка</div> <div class='ipsColumn ipsColumn_fluid'>Резиновая колонка</div> </div> Этот код будет выглядеть следующим образом: (для понимая добавлены фоновые цвета и отступы):
Фиксированная колонка Резиновая колонка Оболочка получает класс ipsColumns (примечание: множественное число), в то время как отдельные столбцы получают ipsColumn (примечание: единственное число).
Размер колонок
Для изменения размера колонок доступно некоторое количество классов. Один из этих классов должен быть применён к каждой колонке в дополнение к основному классу ipsColumn.
ipsColumn_veryNarrow - 50 пикселей в ширину; ipsColumn_narrow - 120 пикселей в ширину; ipsColumn_medium - 200 пикселей в ширину; ipsColumn_wide - 280 пикселей в ширину; ipsColumn_veryWide - 360 пикселей в ширину; ipsColumn_fluid - занимает оставшееся пространство; должен быть использован для всех резиновых колонок. Расстояние между границами (border-spacing)
По умолчанию между колонками не предусмотрено никакого расстояния (смотри пример выше). Расстояние может быть включено вокруг колонок с помощью одного из трёх следующих классов, применённых для основного ipsColumns элемента:
ipsColumns_verticalSpacing - 15 пикселей вертикального расстояния; ipsColumns_horizontalSpacing - 15 пикселей пикселей горизонтального расстояния; ipsColumns_bothSpacing - 15 пикселей расстояния со всех сторон. Расстояние может быть сокращено вдвое, указав в дополнение класс ipsColumns_halfSpacing.
<div class='ipsColumns ipsColumns_bothSpacing ipsColumns_halfSpacing'> <div class='ipsColumn ipsColumn_medium'>Фиксированная колонка</div> <div class='ipsColumn ipsColumn_fluid'>Резиновая колонка</div> </div> Фиксированная колонка Резиновая колонка Адаптивность
Для адаптивности макета на устройствах с небольшим экраном, добавьте класс ipsColumns_collapseTablet или ipsColumns_collapsePhone к элементу оболочки.
Макет: сетки

Модуль сетки предоставляет классы для построения макетов, основанных гибкой 12-ти колоночной сетке, с автоматическими полями и с дополнительными классами для корректного сворачивания макета на устройствах с небольшими экранами.
Использование
Сетка должна быть сделана из элемента оболочки с классом ipsGrid, и прямыми потомками с классами соответствующего размера (указаны ниже). Например:
<div class='ipsGrid'> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span3'>Span 3</div> <div class='ipsGrid_span4'>Span 4</div> <div class='ipsGrid_span2'>Span 2</div> </div> Будет визуализировано как:
Span 3 Span 3 Span 4 Span 2 Классы сетки ipsGrid_span1 по ipsGrid_span12 доступны для столбцов различных размеров.
Оборачивание элементов сетки
Элементы в сетке будут автоматически обёрнуты в новые строки, предоставляя каждому элементу в сетке использование span одинаковой ширины и высоты, без необходимости вручную создавать новую структуру. Например:
<div class='ipsGrid'> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> <div class='ipsGrid_span6'>Span 6</div> </div> Span 6 Span 6 Span 6 Span 6 Для сеток, у которых элементы могут иметь разную ширину или высоту, рассмотрите использование виджета ips.ui.grid widget.
Адаптивность
Чтобы адаптировать макет сетки на устройства с небольшими экранами, добавьте класс ipsGrid_collapseTablet или ipsGrid_collapsePhone к списку классов элемента оболочки, например так:
<div class='ipsGrid ipsGrid_collapsePhone'> ... </div>
Дополнительно
data-ipsGrid
<div class='ipsGrid' data-ipsGrid> ... </div> Такая запись позволяет задать одинаковую ширину дочерним ipsGrid_spanX, например, код
<div class='ipsGrid' data-ipsGrid> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span7'></div> </div> На самом деле будет вот такой:
<div class='ipsGrid' data-ipsGrid> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span5'></div> </div> То есть все дочерние ipsGrid_span будут такие же, как первый ipsGrid_span.
data-ipsGrid-equalHeights='row'
Выравнивает все дочерние ipsGrid_span по высоте.
<div class='ipsGrid' data-ipsGrid-equalHeights='row'> <div class='ipsGrid_span5'></div> <div class='ipsGrid_span7'></div> </div> Такая запись сделает все ipsGrid_span одинаковыми по высоте, не зависимо от их содержимого.
Списки данных

CSS модуль списка данных позволяет нам отображать сложные списки, а также перестраивать отображение в ситуациях, требующих этого, например на устройствах с небольшими экранами.
Использование
Списки данных состоят из оболочки и индивидуальных элементов списка. В большинстве случаев, список данных будет использовать один из HTML элементов списка (например, ul или ol) для семантических целей, хотя это не обязательное требование.
Базовая структура разметки выглядит следующим образом:
<ol class='ipsDataList' itemscope itemtype="http://schema.org/ItemList"> <meta itemprop="itemListOrder" content="Descending"> <li class='ipsDataItem ipsDataItem_unread' itemprop="itemListElement"> ... </li> <li class='ipsDataItem' itemprop="itemListElement"> ... </li> <li class='ipsDataItem' itemprop="itemListElement"> ... </li> </ol> Основной элемент должен быть обозначен классом ipsDataList. Индивидуальные элементы списка должны быть с классом ipsDataItem. Для обозначения непрочитанного статуса в строке, добавьте класс ipsDataItem_unread к элементу списка.
В ipsDataItem, множество других существующих элементов (на разрешении ПК), представляющих ячейки данных. На устройствах с небольшим экраном, эти элементы перекомпануются таким образом, чтобы получился наиболее подходящий для такого экрана макет. Эти элементы перечислены ниже.

Расстояние между рядами - ipsDataList_reducedSpacing
По умолчанию, строки уже имеют комфортное расстояние между собой. Дополнительный класс ipsDataList_reducedSpacing доступен для уменьшения горизонтального отступа ячейки, где это необходимо.
Чередование цветов - ipsDataList_zebra
По умолчанию, чередование цветом (она же зебра, или альтернативные цвета фона) не включены в списки данных. для добавления зебры, добавьте класс ipsDataList_zebra к оболочке списка данных.
Основное содержание ячеек - ipsDataItem_main
Представляет собой основные данные в ячейке, обычно это строка заголовка и некоторые метаданные. Расширяясь, занимает всё пространство, оставшееся от остальных ячеек в строке. Пример:
<div class='ipsDataItem_main'> <h4 class='ipsDataItem_title'><a href='#'>Заголовок элемента</a></h4> <p class='ipsDataItem_meta'> От testadmin, вчера, 14:21 </p> </div> В данной ячейк, ipsDataItem_title определяет заголовок элемента, а ipsDataItem_meta некоторые неспецифические метаданные, связанные с заголовком.
В основной ячейке, подсписок может быть определён для данных, например подфорумов или подальбомов. Пример разметки:
<ul class='ipsDataItem_subList ipsList_inline'> <li><a href='#'>Подэлемент 1</a></li> <li class='ipsDataItem_unread'><a href='#'>Подэлемент 2</a></li> </ul> Ячейка статистики - ipsDataItem_stats
Этот класс применяется к элементу, который представляет статистику для данной строки, например количество ответов в теме, или количество загрузок файла. Пример использования:
<dl class='ipsDataItem_stats'> <dt class='ipsDataItem_stats_number'>14</dt> <dd class='ipsDataItem_stats_type'>Сообщений</dd> </dl> Данные в этом элементе размечены двумя дополнительными классами:
ipsDataItem_stats_number - представляет фактически значение статистики; ipsDataItem_stats_type - представляет ти данных. Дополнительный класс ipsDataItem_statsLarge может быть добавлен к элементу, где статистика является особо важной. Это значительно увеличит размер шрифта значения для его выделения.
Ячейка последнего ответа - ipsDataItem_lastPoster
Используется для отображения информации о последнем ответе, например в теме или другой записи. Пример использования:
<ul class='ipsDataItem_lastPoster ipsDataItem_withPhoto'> <li><img src='images/photo.jpeg'></li> <li><a href='#'>Имя пользователя</a></li> <li><time data-short='1 dy'>Время</time></li> </ul> В рамках этого элемента существует ещё два или три дополнительных элемента. Если используется класс ipsDataItem_withPhoto, первый элемент должен содержать фотографию пользователя, иначе первый элемент может быть пропущен. Второй элемент, как правило, будет содержать имя пользователя, а последний будет содержать информацию о времени.
Последний элемент содержит элемент времени с атрибутом хранения коротких данных. Этот атрибут должен содержать очень короткое обозначение дата/время, и используется на устройствах с небольшими экранами. PHP фреймворк генерирует это для вас.
Типовые ячейки
Для пользовательских типов данных доступны определённые размеры типовых ячеек. Ячейка должна содержать класс ipsDataItem_generic и один и следующих классов:
ipsDataItem_size1 - 50px ipsDataItem_size2 - 75px ipsDataItem_size3 - 100px ipsDataItem_size4 - 125px ipsDataItem_size5 - 150px ipsDataItem_size6 - 175px ipsDataItem_size7 - 200px ipsDataItem_size8 - 225px ipsDataItem_size9 - 250px Другие типы ячеек
В дополнение к основным типам ячеек, перечисленным выше, существуют дополнительные классы ячеек, которые вы также можете использовать.
ipsDataItem_icon - колонка, содержащая иконку статуса строки, например иконку форума; ipsDataItem_modCheck - Небольшая колонка, которая должна содержать чекбокс для модерирования строки. Окрашивание строк
Доступно четыре дополнительных класса для добавления цвета фону строки, чтобы обозначить её статус:
ipsDataItem_new - Новые элементы ipsDataItem_warning - Элементы в состоянии предупреждения ipsDataItem_warning - Элементы с ошибкой ipsDataItem_info - Информационное состояние Собираем всё вместе
<ol class='ipsDataList'> <li class="ipsDataItem ipsDataItem_responsivePhoto"> <div class="ipsDataItem_icon ipsDataItem_category"> <span class='ipsItemStatus ipsItemStatus_large cForumIcon_normal ipsItemStatus_read'> <i class="fa fa-comments"></i> </span> </div> <div class="ipsDataItem_main"> <h4 class="ipsDataItem_title ipsType_large ipsType_break"> <a href="#">Коммерческие вопросы</a> </h4> <div class="ipsType_reset ipsType_medium ipsType_light"><p>Вопросы коммерческого характера, связанные с покупкой наших продуктов</p></div> </div> <div class="ipsDataItem_stats ipsDataItem_statsLarge"> <dl> <dt class="ipsDataItem_stats_number">14</dt> <dd class="ipsDataItem_stats_type ipsType_light"> сообщений</dd> </dl> </div> <ul class="ipsDataItem_lastPoster ipsDataItem_withPhoto"> <li> <a href="#"> <img src=''> </a> </li> <li><a href="" class='ipsType_break ipsContained'>Измение публикации порядка…</a></li> <li class=''>invisionbyte</li> <li class="ipsType_light"><a href='' data-short='Март 16'>Март 16</a></li> </ul> </li> </ol>
Формы

Модуль формы предоставляет классы для стилизации абсолютно всех форм на сайте, с набором опций, доступных для изменения внешнего вида и данных в них.
Использование
Форма должна иметь основной класс ipsForm. В большинстве случаев он должен применяться непосредственно к элементу <form>, но, на самом деле, он может быть применим к любому элементу, содержащему элементы форм. Рекомендуемая базовая структура DOM для формы выглядит следующим образом:
<form class='ipsForm'> <ul> <li class='ipsFieldRow'> ... </li> <li class='ipsFieldRow'> ... </li> </ul> </form> В данной структуре каждая строка поля в форме представляет собой элемент <li> с классом ipsFieldRow.
Макеты форм
Существует всего два варианта отображения форм: вертикальный и горизонтальный. В вертикальной форме, её название отображается выше элемента поля. Макет отображения можно контролировать с помощью класса ipsForm_vertical или ipsForm_horizontal, добавив его к основному элементу формы, соответственно.
Пример обоих типов:
Вертикальная форма Горизонтальная форма Примечание: на устройствах с небольшими экранами и с включённой адаптивным CSS, формы с горизонтальным макетом будут автоматически свёрнуты в вертикальный макет.
Строки полей
Каждая строка поля в форме имеет ряд доступных настроек, зависящих от типа поля. Основная структура строки поля следующая:
<li class='ipsFieldRow'> <label for='example' class='ipsFieldRow_label'> Поле для примера </label> <div class='ipsFieldRow_content'> <input type='text' id='example' value=''> </div> </li> Строка получает базовый класс ipsFieldRow. В этом элементе располагаются элемент названия и элемент контента. Название поля получает класс ipsFieldRow_label, а элемент контента класс ipsFieldRow_content. Элемент контента теоретически может содержать всё что угодно, хоть и простым для лучшего удобства использования.
Существует несколько дополнительных классов, которые могут быть применены к строкам полей.
ipsFieldRow_primary
Увеличенная основная строка, отображающая поле ввода. ipsFieldRow_fullWidth
Заставляет форму занять всё доступное пространство по горизонтали ipsFieldRow_noLabel
Удаляет название формы. Обязательные для заполнения поля
Чтобы добавить индикатор обязательного для заполнения поля, элемент с классом ipsFieldRow_required может быть добавлен в элемент названия, например:
<label for='elExample' class='ipsFieldRow_label'> Название поля <span class='ipsFieldRow_required'>Обязательно</span> </label> На формах с горизонтальным макетом, текст индикатора элемента 'обязательно' заменяется на звёздочку, для экономии места.
Описание поля
Описание поля может быть добавлено сразу после формы, внутрь элемента поля контента, с помощью добавления класса ipsFieldRow_desc. Например:
<div class='ipsFieldRow_content'> <input type='text' size='30'><br> <span class='ipsFieldRow_desc'>Это описание поля</span> </div> Чекбоксы/Радиокнопки
Разметка и классы для чекбоксов и радиокнопок являются по сути немного другими от описанных выше классов, т.к., как правило, элемент будет расположен слева от названия и отображается с ним строчно.
Это пример разметки, используемой для чекбоксов или радикнопок (обратите внимание, что хотя класс ссылается на радиокнопку, он может быть использован для обоих типов полей):
<li class='ipsFieldRow ipsFieldRow_checkbox'> <span class='ipsCustomInput'> <input type='checkbox' id='elExampleCheckbox'> <span></span> </span> <div class='ipsFieldRow_content'> <label for='elExampleCheckbox'>Запомнить меня</label> </div> </li> Здесь есть несколько отличий. Во-первых, класс ipsFieldRow_checkbox был добавлен к строке поля для обозначения того, что эта строка должна обрабатываться по-другому. Во-вторых, чекбокс теперь является прямым потомком элемента строки, в то время, как название перемещается в элемент контента. И, наконец, сам чекбокс завёрнут в элемент с классом ipsCustomInput, который позволяет нам стилизовать чекбоксы и радиокнопки с помощью CSS.
Запомнить меня Горизонтально-сгруппированные чекбоксы
Другой распространённый способ отображения чекбоксов/радиокнопок является горизонтальный список вариантов. Это можно сделать с помощью следующей разметки:
<li class='ipsFieldRow'> <span class='ipsFieldRow_label'>Выберите вариант</span> <ul class='ipsFieldRow_content ipsList_reset'> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='radio' id='checkbox1'> <span></span> </span> <label for='checkbox1'>Вариант 1</label> </li> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='radio' id='checkbox2'> <span></span> </span> <label for='checkbox2'>Вариант 2</label> </li> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='radio' id='checkbox3'> <span></span> </span> <label for='checkbox3'>Вариант 3</label> </li> </ul> </li> Здесь мы строим элемент контента, а строка поля представлена в виде списка (мы используем класс ipsList_reset для удаления отступов и и полей), каждый элемент списка получает класс ipsFieldRow_inlineCheckbox для горизонтального выравнивания.
Приведенный выше пример производит следующий результат:
Выберите вариант Вариант 1 Вариант 2 Вариант 3 Вертикально-сгруппированные чекбоксы
Вы также можете сгруппировать чекбоксы и радионопки в вертикальный список. Разметка в этом случае будет такая:
<li class='ipsFieldRow'> <span class='ipsFieldRow_label'>Выберите вариант</span> <ul class='ipsFieldRow_content ipsField_fieldList'> <li> <span class='ipsCustomInput'> <input type='checkbox' id='option1'> <span></span> </span> <div class='ipsField_fieldList_content'> <label for='option1'>Вариант 1</label><br> <span class='ipsFieldRow_desc'>Описание варианта 1</span> </div> </li> <li> <span class='ipsCustomInput'> <input type='checkbox' id='option2'> <span></span> </span> <div class='ipsField_fieldList_content'> <label for='option1'>Вариант 2</label><br> <span class='ipsFieldRow_desc'>Описание варианта 2</span> </div> </li> </ul> </li> Будет отображено как:
Выберите вариант Вариант 1
Описание варианта 1 Вариант 2
Описание варианта 2
Статус загрузки поля
Формы ввода текста (текстовые поля, поля дат, области ввода и т.д.) могут быть показаны в состоянии загрузки путём добавления класса ipsField_loading (обычно с помощью Javascript). Это приводит к отображению индикатора загрузки поля.
Пример загрузки Примечание: данный эффект достигается путём использования фонового изображения. Если вы указали собственные стили для формы полей, определяющих фоновое изображение, эффект загрузки может загружаться не корректно.
Группировка строк полей
Добавление заголовков разделов
Вы можете добавить заголовок раздела в форму путём добавления элемента заголовка с классом ipsFieldRow_section, например так:
<li> <h2 class='ipsFieldRow_section'>Заголовок раздела</h2> </li> Набор полей
Поля могут быть сгруппированы в соответствующий набор с помощью класса ipsForm_group. Разметка для такой структуры выглядит следующим образом:
<div class='ipsForm ipsForm_horizontal'> <fieldset class='ipsForm_group'> <legend class='ipsForm_groupTitle'>Первая группа</legend> <ul class='ipsForm_groupContent'> <li class='ipsFieldRow'>  </li> <li class='ipsFieldRow'>  </li> </ul> </fieldset> <fieldset class='ipsForm_group'> <legend class='ipsForm_groupTitle'>Вторая группа</legend> <ul class='ipsForm_groupContent'> <li class='ipsFieldRow'>  </li> <li class='ipsFieldRow'>  </li> </ul> </fieldset> </div>
Это будет выглядеть так (с добавленным контентом строк полей):
Первая группа Заголовок поля Заголовок поля Вторая группа Заголовок поля Заголовок поля
Класс ipsForm_group добавлен в элемент контейнера - обычно это fieldset. Внутри этого элемента будет элемент заголовка с классом ipsForm_groupTitle. Это также может быть любой элемент. Наконец, есть элемент с классом ipsForm_groupContent, который обрамляет все строки полей в группе.
Комплексный пример формы
Ниже приведён полный пример формы, которая может быть переключена из вертикального слоя в горизонтальный для демонстрационных целей. Разметка для этого примера будет ниже.
Имя Обязательно E-mail адрес Обязательно
Конфиденцально Пожалуйста, отправьте мне Обновления Предложения Я согласен с Условиями использования Отправить
<ul class='ipsForm ipsForm_horizontal' id='form_example'> <li class='ipsFieldRow ipsFieldRow_primary ipsFieldRow_fullWidth'> <label class='ipsFieldRow_label'>Имя <span class='ipsFieldRow_required'>Обязательно</span></label> <div class='ipsFieldRow_content'> <input type='text' size='30' placeholder='Ваше имя'> </div> </li> <li class='ipsFieldRow'> <label class='ipsFieldRow_label'>E-mail адрес <span class='ipsFieldRow_required'>Обязательно</span></label> <div class='ipsFieldRow_content'> <input type='text' size='30' placeholder='example@me.com'><br> <span class='ipsFieldRow_desc'>Конфиденциально</span> </div> </li> <li class='ipsFieldRow'> <span class='ipsFieldRow_label'>Пожалуйста, отправьте мне</span> <ul class='ipsFieldRow_content ipsList_reset'> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='checkbox'> <span></span> </span> <label>Обновления</label> </li> <li class='ipsFieldRow_inlineCheckbox'> <span class='ipsCustomInput'> <input type='checkbox'> <span></span> </span> <label>Предложения</label> </li> </ul> </li> <li class='ipsFieldRow ipsFieldRow_checkbox'> <span class='ipsCustomInput'> <input type='checkbox'> <span></span> </span> <div class='ipsFieldRow_content'> <label class='ipsFieldRow_label'><strong>Я согласен с Условиями использования</strong></label> </div> </li> <li class='ipsFieldRow'> <div class='ipsFieldRow_content'> <button type='submit' class='ipsButton ipsButton_medium ipsButton_primary'>Отправить</button> </div> </li> </ul>
Иконки

В IPS4 используется иконочный шрифт, называемый FontAwesome. Он позволяет отображать доступные иконки, не требующие дополнительного HTTP запроса и которые можно стилизовать с помощью CSS (и наследуют стили автоматически), а также их можно масштабировать без потери качества.
Использование
Иконка может быть включена в разметку с помощью использования следующего кода:
<i class='fa fa-название_иконка'></i> Список доступных иконок с их названиями доступен на сайте http://fontawesome.io/icons/. Обратите внимание, что эти названия не начинаются с префикса ips, как и другие классы фреймворка; они используются с оригинальными названиями, как на сайте FontAwesome.
Иконки могут быть использованы везде, где можно использовать HTML код. Например, в тексте, на кнопке, в меню и так далее.
Иконка на кнопке Значок каретки указывает на выпадающее меню Да, я так думаю Нет, я не согласен Здесь другая каретка
Постоянность иконок
Важно понимать, что иконка используется постоянно на всё сайте. Это относится и к основным разработчикам, а также к разработчикам приложений. Если различные иконки используются для одинаковых целей (что ещё хуже - иконка используется для других целей, чем должна), пользователи будут путаться программным обеспечением.
Для упрощения понимая, есть список иконок, которые предназначены для выполнения определённых действий в системе. Проверьте этот список на наличие иконки, которую вы хотели выбрать для себя, и, если она уже есть, выберите другую иконку. Названия иконок FontAwesome упоминается в оригинале, то есть без префикса fa-
Добавить
plus-circle plus Удалить
times-circle trash-o Изменить
pencil Вернуть
undo Перейти куда-либо
arrow-right Открыть внешнюю ссылку
external-link Подтвердить Да/Нет
check times Разрешения
lock unlock Авторизация/Войти
key Копировать
copy Настройки
cog Отметка ВКЛ/ВЫКЛ
flag flag-o Рейтинг Активный/Неактивный
star star-o Разработчик/Приложение
cogs Помощь
question-circle Объединить
level-up Код/PHP/HTML
code Сообщение/Написать письмо
envelope-o Поиск
search Просмотр
search Перезагрузить/Обновить
refresh Выполнить/Начать
play-circle Визуальный редактор/Простой режим
magic
Выпадающие меню

Выпадающие меню позволяют пользователям выбрать один из нескольких пунктов меню. Разметка такого меню предназначена для работы совместно с Яваскрипт модулем ips.ui.menu.
Использование
Меню состоит из инициирующего элемента, и самого элемента меню:
 <a href='#elMyMenu_menu' id='elMyMenu'>Открыть меню</a>  <ul id='elMyMenu_menu' class='ipsMenu'> ... </ul> ID меню должен быть таким же, как ID элемента инициализатора, с суффиксом _menu. Если элемент инициализатора является ссылкой, её href должен быть якорем на ID элемента меню. Это делает меню доступным, даже если Javascript отключён в вашем браузере.
Основное меню
Основное меню может иметь следующую разметку:
<ul class='ipsMenu ipsHide'> <li class='ipsMenu_item'><a href='#'>Пункт 1</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 2</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 3</a></li> <li class='ipsMenu_sep'><hr></li> <li class='ipsMenu_item'><a href='#'>Пункт 4</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 5</a></li> </ul> Это будет отображаться следующим образом: пример.
Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 ipsMenu это основной класс для элемента меню. Пункты в меню должны иметь класс ipsMenu_item, с элементом ссылки в нём. Разделитель пункта может быть добавлен путём указания пункта с классом ipsMenu_sep, содержащий элемент <hr>.
Обратите внимание, что позиционирование и стрелка добавляются автоматически, с помощью Яваскрипт модуля меню; они не должны быть указаны вручную. Стрелка может быть удалена, если это необходимо, путём добавления класса ipsMenu_noStem к элементу меню.
Отключение пунктов меню
Отдельные пункты меню могут быть отключены путём добавления класса ipsMenu_itemDisabled к элементу списка: например.
Пункт 1 Отключённый пункт 2 Пункт 3 Обратите внимание: отключение пункта меню не полностью работоспособно; в браузерах, не поддерживающих CSS стили поведения курсора, клик по отключённом пункту в меню будет по-прежнему действителен. Убедитесь, что ваш Яваскрипт правильно взаимодействует с кликами по отключённым пунктам меню.
Размер меню
По умолчанию, меню будет иметь стандартную ширину. Дополнительный класс может быть указан в элементе меню для определения ширины меню.
ipsMenu_auto - меню будет отображено с такой шириной, какая необходима, при этом выдерживая минимальную ширину в 200px и максимальную ширину в 500px; ipsMenu_narrow - 200 пикселей в ширину; ipsMenu_normal - 300 пикселей в ширину; ipsMenu_wide - 450 пикселей в ширину; Селективные меню
Селективное меню позволяет пользователю переключаться между пунктами меню, полезно для включения/отключения настроек. Для функционирования этой возможности, должен быть использован Яваскрипт модуль.
Меню может быть селективным путём добавления класса ipsMenu_selectable. Пункт меню может быть отображён как выбранный, с помощью добавления класса ipsMenu_itemChecked к элементу списка.
Разметка для селективного меню может выглядеть следующим образом:
<ul id='elMenu2_menu' class='ipsMenu ipsMenu_normal ipsMenu_selectable ipsHide'> <li class='ipsMenu_item'><a href='#'>Пункт 1</a></li> <li class='ipsMenu_item ipsMenu_itemChecked'><a href='#'>Пункт 2</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 3</a></li> </ul> Это будет отображаться следующим образом: пример.
Пункт 1 Пункт 2 Пункт 3 Подменю
Подменю создаются путём встраивания меню друг в друга. Для этого пропишите класс ipsMenu_subItems к пункту, который должен содержать подменю, и само подменю внутри элемента. Например:
<ul id='elMenu3_menu' class='ipsMenu ipsMenu_normal ipsHide'> <li class='ipsMenu_item'> <a href='#'>Пункт 1</a> </li> <li class='ipsMenu_item ipsMenu_subItems'> <a href='#'>Пункт 2 (с подменю)</a> <ul class='ipsMenu ipsMenu_wide ipsHide'> <li class='ipsMenu_item'><a href='#'>Подпункт 1</a></li> <li class='ipsMenu_item'><a href='#'>Подпункт 2</a></li> <li class='ipsMenu_item'><a href='#'>Подпунктm 3</a></li> </ul> </li> </ul> Это будет отображаться следующим образом: пример.
Пункт 1 Пункт 2 (с подменю) Подпункт 1 Подпункт 2 Подпункт 3
Сообщения

Модуль сообщений предоставляет способ стилизации информационных сообщений, чтобы заострить внимание пользователей на чём-либо. Чтобы создать сообщение, просто добавьте класс ipsMessage к элементу контейнера (например div или span, наряду с одним из стилей сообщения внизу. Класс стиля сообщения автоматически добавит соответствующую иконку в блок сообщения.
Стили сообщений
Ошибка - ipsMessage_error
Сообщение об ошибке Успех - ipsMessage_success
Это сообщение указывает на то, что что-то прошло успешно Предупреждение - ipsMessage_warning
Это сообщение предупреждает пользователя о чем-то нехорошем Информация - ipsMessage_info
Это сообщение содержит общую информацию Коды сообщений
Если вам нужно добавить код в ваше сообщение, например номер ошибки, вы можете для этого использовать класс ipsMessage_code:
<div class='ipsMessage ipsMessage_error'> <span class='ipsMessage_code'>12345</span> Это сообщение об ошибке </div> 12345 Это сообщение об ошибке
Кнопки

Классы кнопок, описанные в этой инструкции, могут быть применены к элементам, например как input[type="submit"] или кнопки, таким образом, чтобы пользователь мог взаимодействовать в этим.
Как минимум, кнопка должна получить базовый класс ipsButton, а также класс размера и класс стиля (описание ниже).
Стили кнопок
ipsButton_normal
Нормальная кнопка ipsButton_primary
Основная кнопка ipsButton_alternate
Альтернативная кнопка ipsButton_important
Важная кнопка ipsButton_light
Светлая кнопка ipsButton_veryLight
Очень светлая кнопка ipsButton_overlaid
Наложенная кнопка ipsButton_link
Кнопка ссылка Размеры кнопок
ipsButton_medium
Средняя кнопка ipsButton_verySmall
Очень маленькая кнопка ipsButton_small
Маленькая кнопка ipsButton_large
Большая кнопка ipsButton_veryLarge
Очень большая кнопка ipsButton_fullWidth
Может быть объединена с другими размерами, указанными выше.
Кнопка во всю ширину

Отключённые кнопки
Кнопки могут быть визуально неактивными, либо путём добавления класса ipsButton_disabled, либо указания свойства disabled к элементу ввода input. Например:
<a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Неактивная кнопка (ссылка)</a> <input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Неактивная кнопка (input)'> Это будет выглядеть примерно так:
Неактивная кнопка (ссылка)
Совместные кнопки
Совместные кнопки позволяют вам легко создавать панели инструментов, указав список кнопок, которые отображаются совместно друг с другом.
Они создаются с помощью специального класса ipsButton_split в элементе обложки, содержащем две или более кнопки. Элемент обложки может быть тегом <ul>, или любым другим по смыслу тегом.
Все кнопки в группе совместных кнопок должны быть одинакового размера, в противном случае результаты отображения будут непредсказуемы. К каждой кнопке могут быть применены различные стили.
<ul class='ipsButton_split'> <li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Кнопка 1</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 2</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 3</a></li> </ul> Кнопка 1 Кнопка 2 Кнопка 3
Типографика (шрифты)

Модуль типографии предлагает широкий спектр классов для стилизации текста в рамках всего сайта.
Заголовки
Предусмотрен ряд стилей для заголовков, цель которых структурирование информации на странице. Вы можете использовать стили для любых тегов <h*> (или любых других тегов) - выберите наиболее семантический элемент в каждом конкретном использовании.
ipsType_pageTitle
Наиболее применим в качестве основного заголовка на странице. Более крупная версия доступна с добавлением дополнительно класса ipsType_largeTitle.
Основной заголовок страницы
ipsType_sectionTitle
Заглавие раздела на странице.
Заглавие раздела
ipsType_sectionHead
Заголовок раздела.
Заголовок раздела
ipsType_minorHeading
Небольшой, менее важный заголовок.
Небольшой заголовок

Выравнивание
ipsType_left
Выравнивание текста по левому краю.
ipsType_right
Выравнивание текста по правому краю.
ipsType_center
Центрированный текст.

Цвета
ipsType_light
Светлый текст
ipsType_warning или psType_negative
Текст предупреждения
ipsType_success
Текст успешного статуса
ipsType_issue
Текст ошибочного статуса
ipsType_neutral
Нейтральный текст

Размеры
ipsType_small
Небольшой текст
ipsType_medium
Средний текст
ipsType_normal
Нормальный размер текста
ipsType_large
Крупный текст
ipsType_veryLarge
Очень крупный текст
ipsType_huge (Используется для иконок)

Созданный пользователь текст/контент из редактора CKEditor
Когда речь заходит о работе с контентом, который был создан пользователем (как правило из редактора CKEditor), существует три класса, которые должны быть использованы для корректного отображения этого контента. Как правило, необходимо использовать все три класса, но бывают ситуации, когда необходимо использовать другую обработку. Вы также можете применить классы к различным элементам - например, если у вас есть повторяющиеся блоки контента пользователя, класс ipsContained может быть применим к обёртке всего контента, вместо применения к каждому отдельному блоку. При работе с пользовательским контентом, не исключайте нестандартных ситуаций.
ipsType_richText
Это основной класс для пользовательского контента, и активирует стили как, например, адаптивные изображения и корректные поля.
ipsType_break
Обеспечивает корректный перенос слов в пользовательском контенте.
ipsType_contained
Это защитный тего, обеспечивающий то, что контент не будет выходить за пределы из своего существующего контейнера.
Укороченный текст
Текст может быть укорочен в одну строку с помощью добавления к элементу двух классов: ipsTruncate ipsTruncate_line. В браузерах, которые это поддерживают, это приводит к скрытию излишней части текста, вместо которой отображается знак троеточия.
Этот метод предназначен для работы на небольших одностроковых фрагментах текста, например тексте на кнопке. Он не будет корректно работать с многостроковыми данными; для этих случаев, вы должны использовать основанный на Яваскрипте виджет ips.ui.truncate. Он также устанавливает элементу ширину в 100% для корректной работы; вам нужно будет вручную установить ширину, чтобы перезаписать это значение.
Это длинная строка, которая не совсем подходит к этой кнопке Другие стили типографики
ipsType_noBreak
Предотвращает обёртывание текста.
ipsType_reset
Удаляет отступ от края (margin) (наиболее полезен для использования на элементах <h*> и <p>).
ipsType_unbold
Удаляет стиль жирности (bold) у текста.
ipsType_uppercase
Переводит текст в верхний регистр.
ipsType_blendLinks
При применении к элементу, содержащему ссылки или элементу, ссылающемуся на самого себя, ссылки будут наследовать стили окружающего их текста.
Другие стили

Здесь перечислены другие основные классы, которые вы можете использовать для достижения необходимых результатов. Сюда входят классы, которые, так или иначе, не были перечислены в других документах CSS фреймворка.
Внутренние поля (Padding)
ipsPad
15px отступа на ПК
ipsPad_half
7px отступа на ПК
ipsPad_double
30px отступа на ПК
Данные классы внутреннего отступа масштабируются соответствующим образом на мобильных устройствах.
Расстояние
ipsSpacer_top
15px отступа сверху (margin)
ipsSpacer_bottom
15px отступа снизу (margin)
ipsSpacer_both
15px отступа сверху и снизу (margin)
ipsSpacer_half
В сочетании с один из вышеперечисленных классов, уменьшает расстояние в два раза
ipsSpacer_double
В сочетании с один из вышеперечисленных классов, удваивает расстояние
Отмена обтекания (clear)
ipsClear
Отменяет обтекания предшествующего элемента, к которому применён этот класс.
ipsClearfix
Популярная техника 'clearfix', которая приводит к обёртыванию элемента, к которому применяется данный класс, а также элементов внутри него, даже если они плавающие. Данный класс должен быть применим ко всем элементам, где потомственные элементы могут быть плавающими.
Позиционирование
Для текстового позиционирования, смотрите Типографика (шрифты).
ipsPos_left
Выравнивает элемент по левому краю
ipsPos_right
Выравнивает элемент по правому краю
ipsPos_center
Устанавливает автоматические поля (margin) к элементу для его центрирования. Блочные элементы требуют указания ширины чтобы применился данный класс, иначе они будут отображены естественным образом с шириной в 100%.
Горизонтальная линия
Горизонтальные линии могут быть стилизованы путём добавления класса ipsHr к обычному элементу <hr>.
Счётчики уведомлений
Класс ipsNotificationCount предназначен для плавающего 'пузыря', который может означать количество уведомлений для чего-либо. Родительский элемент должен иметь не статическое положение для корректной работы данного класса. По умолчанию, 'пузырь' уведомления будет смещён вправо вверх, но это может быть изменено путём добавления дополнительных специфичных стилей, если это необходимо. Использование:
<a href='#' class='ipsButton ipsButton_primary ipsButton_medium' style='position:relative'> Кнопка с уведомлением <span class='<strong>ipsNotificationCount</strong>'>33</span> </a> Будет отображено:
Кнопка с уведомлением12 Статус В сети/Не в сети
Предоставляет простую стилизацию для обозначения статуса чего-либо (например пользователя) - в сети или не в сети. ipsOnlineStatus это основной класс; добавьте ipsOnlineStatus_online или ipsOnlineStatus_offline для обозначения актуального состояния.
<strong class='ipsOnlineStatus ipsOnlineStatus_online'><i class='fa fa-circle'></i> В сети</strong><br> <strong class='ipsOnlineStatus ipsOnlineStatus_offline'><i class='fa fa-circle'></i> Не в сети</strong> В сети
Не в сети
Курсоры
Несколько классов, предназначенных для изменения курсора мыши на определённых элементах.
ipsCursor_locked
Курсор "Нет разрешения" (пример)
ipsCursor_drag
Показывает элемент, который может быть перемещён (пример)
ipsCursor_pointer
Показывает элемент, на который можно кликнуть (пример)
ipsCursor_help
Показывает элемент, предназначенный для помощи (пример)
ipsCursor_default
Устанавливает курсор в состояние по умолчанию (пример)
Бейджи

Бейджи являются удобным способом показать некоторую дополнительную информацию об элементе, например его статус.
Стандартные бейджи
Стандартные бейджи получают основной класс ipsBadge, и один из некоторых тегов, показанных ниже.
Стили бейджей
ipsBadge_new
Бейдж
ipsBadge_style2
Бейдж
ipsBadge_warning
Бейдж
ipsBadge_positive
Бейдж
ipsBadge_negative
Бейдж
ipsBadge_neutral
Бейдж
ipsBadge_intermediary
Бейдж
Размеры бейджей
ipsBadge_normal (стандартный)
Бейдж
ipsBadge_medium
Бейдж
ipsBadge_large
Бейдж
Иконки бейджей
Любой из вышеперечисленных классов может быть использован для создания бейджей с иконкой путём добавления класса ipsBadge_icon, и использования иконки FontAwesome в качестве контента элемента. Например:
Бейджи статуса
"Бейджи статуса" это термин, использующийся для обозначения иконок, отображающихся в списках данных, таблице записей и т.д., которые указывают на статус прочитанное/непрочитанное для пользователя. Они разделены на бейджи, описанные выше и не используют одни и те же классы.
Основной класс для бейджа статуса - ipsItemStatus, с дополнительными тегами, представленным ниже.
ipsItemStatus_tiny
Отображает крошечный индикатор статуса. Включая иконку (обычно fa-circle) как контент элемента.
ipsItemStatus_small
Отображает небольшой индикатор статуса. Включая иконку (обычно fa-circle) как контент элемента.
ipsItemStatus_large
Отображает полноразмерный индикатор статуса. Индикатор может быть кастомизирован с помощью включения иконки как контента элемента:
<span class='ipsItemStatus ipsItemStatus_large'> <i class='fa fa-comments'></i> </span>
ipsItemStatus_read
Статус бейджа 'прочитанное', который может исчезать при определённых условиях.
Адаптивность

CSS фреймворк IPS4 является адаптивным, то есть элементы адаптируются в зависимости от размера экрана пользователя. В большинстве случаев, описанные в этом документе классы выполняют роль адаптивности для вас; например, меню автоматически регулируется в зависимости от размера экрана, и на мобильных телефонах вкладки меню автоматически перестраиваются в выпадающее меню.
Могут возникнуть ситуации, когда вам нужно контролировать отображение каких-либо элементов в зависимости от размера экрана устройства. Например, если вы добавили собственный элемент в футер, вы можете захотеть скрыть его на планшетах и телефонах.
Классы адаптивности, которые есть в IPS4, позволяют вам контролировать подобное поведение элементов.
Адаптивные размеры, используемые в IPS4
В рамках медиа-запросов, контролирующих адаптивность, существуют следующие размеры экранов:
Телефоны - до 767 пикселей в ширину. Планшеты - между 768 пикселей и 979 пикселей в ширину. Настольные компьютеры - 980 пикселей и шире. Основной функционал показать/скрыть
CSS фреймворк включает в себя две группы по три класса в каждой, которые скрывают или отображают элементы на настольных компьютерах, планшетах и мобильных телефонах соответственно. Классы действуют исключительным способом; то есть, если вы используете класс для отображения, любые устройства, которые не соответствуют этому классу, не будут отображать элемент. И наоборот, если вы используете класс скрытия, элемент не будет отображаться, но на других устройствах, не попадающих под действие данного класса, элемент будет отображён.
Эти классы:
ipsResponsive_hidePhone ipsResponsive_hideTablet ipsResponsive_hideDesktop ipsResponsive_showPhone ipsResponsive_showTablet ipsResponsive_showDesktop Вы можете комбинировать их, если хотите. Например:
<div class='ipsResponsive_hidePhone ipsResponsive_hideTablet'> Данный элемент *не будет* отображаться на телефонах или планшетах, но *будет* на настольных компьютерах </div> Дополнительные классы для управления отображением элементов
При использовании классов отображения, описанных выше, вы, как правило, должны включать дополнительный класс, контролирующий как будет отображаться элемент. Это может быть один из следующих классов:
ipsResponsive_block ipsResponsive_inlineBlock ipsResponsive_inline <div class='ipsResponsive_showDesktop ipsResponsive_block'> Этот элемент будет отображаться *только* на размерах экрана настольного компьютера, и будет отображаться как блочный элемент. </div> Эти дополнительные классы обычно не используются для классов скрытия элементов.

Войти

Новое сообщество

Лицензия

Системные требования

Установка

Обновление

Перенос с других платформ

Приложения

Форумы

Страницы

Галерея

Загрузки

Блоги

Календарь

Коммерция

Продвижение

Продвижение в социальных сетях

Общее использование

Знакомство

Общие настройки

Контент

Пользователи

Модерация

Авторизация через сайты

СЕО оптимизация

Управление файлами

Индивидуализация

Темы и дизайн

Языки и переводы

Редактор сообщений

Синтаксис шаблонов

CSS фреймворк

Javascript

Советы и трюки

Расширение возможностей

Конфигурация

Управление сервером

IPS Connect

Разработка

Приложения

Плагины

Сторонние приложения

Automation Rules

Важная информация