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

Одним из важнейших элементов в стилизации выступает класс <mark style="color:orange;">`.container`</mark>, который служит контейнером для адаптивной верстки. Именно с него и стоит начинать свою верстку страницы.

## Брейкпоинты <a href="#breakpoints" id="breakpoints"></a>

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

{% code title="Responsive breakpoints" lineNumbers="true" %}

```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) { ... }
```

{% endcode %}

## Работа с текстом <a href="#text" id="text"></a>

<mark style="color:orange;">`.text-center`</mark> - Выравнивание текста по центру

<mark style="color:orange;">`.text-left`</mark> - Выравнивание текста по левому краю

<mark style="color:orange;">`.text-right`</mark> - Выравнивание текста по правому краю

<mark style="color:orange;">`.text-justify`</mark> - Выравнивание текста по обеим краям

<mark style="color:orange;">`.text-upper`</mark> - Переведет шрифт в верхний регистр

<mark style="color:orange;">`.text-lower`</mark> - Переведет шрифт в нижний регистр

<mark style="color:orange;">`.text-capitalize`</mark> - Переводит первую букву каждого слова в верхний регистр

<mark style="color:orange;">`.text-bold`</mark> - Жирное начертание шрифта

<mark style="color:orange;">`.text-italic`</mark> - Наклонный текст

<mark style="color:orange;">`.text-overflow`</mark> - Сокращенный текст. Текст будет сокращен до максимальной ширины блока, а вконце предложения будет добавлено троеточие.

<mark style="color:orange;">`.text-strike`</mark> - Зачёркнутый текст

<mark style="color:orange;">`.text-underline`</mark> - Подчеркнутый текст

<mark style="color:orange;">`.text-overline`</mark> - Линия над текстом

{% embed url="<https://codepen.io/pipui/pen/jOpwPJE>" %}

## Управление свойством display <a href="#display" id="display"></a>

Поддерживаемые стили display: <mark style="color:orange;">`.d-none`</mark> <mark style="color:orange;">`.d-block`</mark> <mark style="color:orange;">`.d-inline`</mark> <mark style="color:orange;">`.d-inline-block`</mark> <mark style="color:orange;">`.d-grid`</mark> <mark style="color:orange;">`.d-inline-grid`</mark> <mark style="color:orange;">`.d-flex`</mark> <mark style="color:orange;">`.d-inline-flex`</mark>

## Полоса прокрутки <a href="#overflow" id="overflow"></a>

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

<mark style="color:orange;">`.of-hidden`</mark> - перекрывающее содержимое будет скрыто без видимой полосы прокрутки

<mark style="color:orange;">`.of-visible`</mark> - всегда отображать полосу прокрутки и содержимое за пределами блока

<mark style="color:orange;">`.of-auto`</mark> - полоса прокрутки отображается по необходимости, если содержимое выходит за пределы блока

<mark style="color:orange;">`.of-auto`</mark> - полоса прокрутки отображается всегда

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

## Курсоры <a href="#cursor" id="cursor"></a>

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

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

<mark style="color:orange;">`.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`</mark>

{% embed url="<https://codepen.io/pipui/pen/gOdLyqP>" %}
Пример работы курсоров
{% endembed %}

## Вертикальное выравнивание <a href="#vertical-alignment" id="vertical-alignment"></a>

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

<mark style="color:orange;">`.v-align-top`</mark> - выравнивает **inline** элемент в блоке по верхнему краю

<mark style="color:orange;">`.v-align-bottom`</mark> - выравнивает **inline** элемент в блоке по нижнему краю

<mark style="color:orange;">`.v-align-center`</mark> - выравнивает **inline** элемент в блоке по центру

<mark style="color:orange;">`.v-align-baseline`</mark> - выравнивает базовую линию текущего элемента по базовой линии родителя

<mark style="color:orange;">`.v-align-sub`</mark> - выравнивает **inline** элемент в блоке под нижней линией

<mark style="color:orange;">`.v-align-super`</mark> - выравнивает **inline** элемент в блоке над верхней линией

<mark style="color:orange;">`.v-align-text-bottom`</mark> - нижняя граница элемента выравнивается по самому нижнему краю текущей строки

<mark style="color:orange;">`.v-align-text-top`</mark> - верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки

## Прозрачность элементов <a href="#opacity" id="opacity"></a>

В PipUI заготовлены классы и для прозрачности элементов от <mark style="color:orange;">`.opacity-0`</mark> до <mark style="color:orange;">`.opacity-10`</mark> с шагом 1. (В стилях это **0.1**, следовательно 10 - это 1 или же 100%)

## Позиционирование <a href="#position" id="position"></a>

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

<mark style="color:orange;">`.fixed`</mark> - фиксированное позиционирование, которое двигает элемент вместе с прокруткой страницы

<mark style="color:orange;">`.absolute`</mark> - абсолютное позиционирование выставляет элемент на странице не учитывая ее прокрутку

<mark style="color:orange;">`.relative`</mark> - относительное позиционирование. Блоки внутри данного, если им указано абсолютное позиционирование, будут выравниваться относительно его позиции

<mark style="color:orange;">`.static`</mark> - статичное позиционирование (по умолчанию)

Управлять позицией относительно верхнего, правого, нижнего, левого краев можно задать, воспользовавшись классами от <mark style="color:orange;">`.top-0`</mark> до <mark style="color:orange;">`.top-64`</mark>, от <mark style="color:orange;">`.right-0`</mark> до <mark style="color:orange;">`.right-64`</mark>, от <mark style="color:orange;">`.bottom-0`</mark> до <mark style="color:orange;">`.bottom-64`</mark>, от <mark style="color:orange;">`.left-0`</mark> до <mark style="color:orange;">`.left-64`</mark> соответственно. Данные классы можно использовать с шагом в 4, например <mark style="color:orange;">`.top-0`</mark> , <mark style="color:orange;">`.top-4`</mark> , <mark style="color:orange;">`.top-8`</mark> и т.д.

Помимо этого, Вы можете контролировать и позиционные индексы, относительно оси Z от <mark style="color:orange;">`.zid-0`</mark> до <mark style="color:orange;">`.zid-10`</mark>