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