Поиск сообщества

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