Базовый набор
Набор скриптов и стилей отвечающих за работу основных функций фреймворка и его компонентов
Одним из важнейших элементов в стилизации выступает класс .container, который служит контейнером для адаптивной верстки. Именно с него и стоит начинать свою верстку страницы.
Брейкпоинты
Точки изменения адаптивной верстки представлены ниже
@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
Вертикальное выравнивание
Вертикальное выравнивание позволяет изменить положение элементов по вертикали
.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 или же 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
Last updated