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

Одним из важнейших элементов в стилизации выступает класс <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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2-0-0.pipui.ru/components/base.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.