Jump to content
  1. Знакомство с 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/. 
     
  2. Макет: колонки

    Модуль колонки, в отличие от модуля сеток, предоставляет классы, которые активируют макеты, позволяющие создавать как фиксированные, так и резиновые колонки. Этот макет часто используется для фиксированных боковых блоков с резиновыми областями контента, например. Дополнительные классы используются для сворачивания макета на устройствах с небольшим экраном.
    Использование
    Макет колонки состоит из элемента оболочки (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 к элементу оболочки.
     
  3. Макет: сетки

    Модуль сетки предоставляет классы для построения макетов, основанных гибкой 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 одинаковыми по высоте, не зависимо от их содержимого. 
  4. Списки данных

    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>  
  5. Формы

    Модуль формы предоставляет классы для стилизации абсолютно всех форм на сайте, с набором опций, доступных для изменения внешнего вида и данных в них.
    Использование
    Форма должна иметь основной класс 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>  
  6. Иконки

    В 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  
  7. Выпадающие меню

    Выпадающие меню позволяют пользователям выбрать один из нескольких пунктов меню. Разметка такого меню предназначена для работы совместно с Яваскрипт модулем 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  
  8. Сообщения

    Модуль сообщений предоставляет способ стилизации информационных сообщений, чтобы заострить внимание пользователей на чём-либо. Чтобы создать сообщение, просто добавьте класс 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 Это сообщение об ошибке  
  9. Кнопки

    Классы кнопок, описанные в этой инструкции, могут быть применены к элементам, например как 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  
  10. Типографика (шрифты)

    Модуль типографии предлагает широкий спектр классов для стилизации текста в рамках всего сайта. 
    Заголовки
    Предусмотрен ряд стилей для заголовков, цель которых структурирование информации на странице. Вы можете использовать стили для любых тегов <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
    При применении к элементу, содержащему ссылки или элементу, ссылающемуся на самого себя, ссылки будут наследовать стили окружающего их текста.
     
  11. Другие стили

    Здесь перечислены другие основные классы, которые вы можете использовать для достижения необходимых результатов. Сюда входят классы, которые, так или иначе, не были перечислены в других документах 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
    Устанавливает курсор в состояние по умолчанию (пример)
     
  12. Бейджи

    Бейджи являются удобным способом показать некоторую дополнительную информацию об элементе, например его статус.
    Стандартные бейджи
    Стандартные бейджи получают основной класс 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
    Статус бейджа 'прочитанное', который может исчезать при определённых условиях.
     
  13. Адаптивность

    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> Эти дополнительные классы обычно не используются для классов скрытия элементов.
     

Messenger

    ×
    ×
    • Create New...

    Important Information

    By using our site you agree to our Privacy Policy