Базовый набор

Набор скриптов и стилей отвечающих за работу основных функций фреймворка и его компонентов

Одним из важнейших элементов в стилизации выступает класс .container, который служит контейнером для адаптивной верстки. Именно с него и стоит начинать свою верстку страницы.

Брейкпоинты

Точки изменения адаптивной верстки представлены ниже

Responsive breakpoints

@media (min-width: 320px) { ... }
@media (min-width: 480px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 900px) { ... }
@media (min-width: 1200px) { ... }
@media (min-width: 1400px) { ... }

Работа с текстом

.text-center - Выравнивание текста по центру

.text-left - Выравнивание текста по левому краю

.text-right - Выравнивание текста по правому краю

.text-justify - Выравнивание текста по обеим краям

.text-upper - Переведет шрифт в верхний регистр

.text-lower - Переведет шрифт в нижний регистр

.text-capitalize - Переводит первую букву каждого слова в верхний регистр

.text-bold - Жирное начертание шрифта

.text-italic - Наклонный текст

.text-overflow - Сокращенный текст. Текст будет сокращен до максимальной ширины блока, а вконце предложения будет добавлено троеточие.

.text-strike - Зачёркнутый текст

.text-underline - Подчеркнутый текст

.text-overline - Линия над текстом

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

Поддерживаемые стили display: .d-none .d-block .d-inline .d-inline-block .d-grid .d-inline-grid .d-flex .d-inline-flex

Полоса прокрутки

Управление полосой прокрутки с помощью заготовленных классов

.of-hidden - перекрывающее содержимое будет скрыто без видимой полосы прокрутки

.of-visible - всегда отображать полосу прокрутки и содержимое за пределами блока

.of-auto - полоса прокрутки отображается по необходимости, если содержимое выходит за пределы блока

.of-auto - полоса прокрутки отображается всегда

Все заготовленные классы выше, можно использовать с префиксами .of-x- и .of-y- для полос прокрутки по осям X и Y соответственно, например .of-x-auto

Курсоры

PipUI дает возможность менять курсор элемента используя заготовленные классы.

Ниже представлены примеры работы таких классов и их список

.cursor-none .cursor-auto .cursor-default .cursor-pointer .cursor-progress .cursor-help .cursor-move .cursor-text .cursor-cell .cursor-crosshair .cursor-alias .cursor-vertical-text .cursor-no-drop .cursor-copy .cursor-all-scroll .cursor-col-resize .cursor-row-resize .cursor-nesw-resize .cursor-nwse-resize .cursor-n-resize .cursor-e-resize .cursor-nw-resize .cursor-grab .cursor-grabbing .cursor-zoom-in .cursor-zoom-out

Пример работы курсоров

Вертикальное выравнивание

Вертикальное выравнивание позволяет изменить положение элементов по вертикали

.v-align-top - выравнивает inline элемент в блоке по верхнему краю

.v-align-bottom - выравнивает inline элемент в блоке по нижнему краю

.v-align-center - выравнивает inline элемент в блоке по центру

.v-align-baseline - выравнивает базовую линию текущего элемента по базовой линии родителя

.v-align-sub - выравнивает inline элемент в блоке под нижней линией

.v-align-super - выравнивает inline элемент в блоке над верхней линией

.v-align-text-bottom - нижняя граница элемента выравнивается по самому нижнему краю текущей строки

.v-align-text-top - верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки

Прозрачность элементов

В PipUI заготовлены классы и для прозрачности элементов от .opacity-0 до .opacity-10 с шагом 1. (В стилях это 0.1, следовательно 10 - это 1 или же 100%)

Позиционирование

Позиционировать элементы можно используя классы:

.fixed - фиксированное позиционирование, которое двигает элемент вместе с прокруткой страницы

.absolute - абсолютное позиционирование выставляет элемент на странице не учитывая ее прокрутку

.relative - относительное позиционирование. Блоки внутри данного, если им указано абсолютное позиционирование, будут выравниваться относительно его позиции

.static - статичное позиционирование (по умолчанию)

Управлять позицией относительно верхнего, правого, нижнего, левого краев можно задать, воспользовавшись классами от .top-0 до .top-64, от .right-0 до .right-64, от .bottom-0 до .bottom-64, от .left-0 до .left-64 соответственно. Данные классы можно использовать с шагом в 4, например .top-0 , .top-4 , .top-8 и т.д.

Помимо этого, Вы можете контролировать и позиционные индексы, относительно оси Z от .zid-0 до .zid-10