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

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

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

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

CSS

@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-bold - Жирное начертание шрифта

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

.text-overflow - Сокращенный текст

Большинство компонентов можно использовать с суффиксом -i, что означает важность и приоритет стиля. Пример: .text-center-i - произведет выравнивание по центру независимо от других выставленных стилей

Управление свойством 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

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

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

.align-items-start - выравнивает элементы в Grid блоке по верхнему краю

.align-items-end - выравнивает элементы в Grid блоке по нижнему краю

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

.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)

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

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

.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