Utility

Коллекция дополнительных и полезных классов для стилизации вашего контента.

Container

Добавьте класс .uk-container к элементу блока, чтобы придать ему максимальную ширину (max-width) обернув основной контент вашего сайта.

Центрирование

Используйте класс .uk-container-center, чтобы правое и левое поля были одинаковыми.

Разметка

<div class="uk-container uk-container-center">
    ...
</div>

Примечание Для другого блочного элемента вам нужно дополнительно указать ширину.

Пример

Центрированный блочный элемент

Разметка

<div class="uk-width-medium-1-2 uk-container-center">
    ...
</div>

Float и Clear

Выравнивание элементов является "фундаментом" для создания всевозможных макетов. .uk-float-* определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его.

Следующие классы помогут вам настроить основные макеты.

Класс	Описание
`.uk-float-left`	Выравнивает элемент по левому краю.
`.uk-float-right`	Выравнивает элемент по правому краю.
`.uk-clearfix`	Добавьте класс `uk-clearfix` в родительский контейнер, чтобы очистить float.

Примеры

А я по правому краю

Я по левому краю

Разметка

<div class="uk-clearfix">
    <div class="uk-float-right">По правому краю</div>
    <div class="uk-float-left">По левому краю</div>
</div>

Новый блочный контекст форматирования

Вместо того, чтобы использовать класс .uk-clearfix , вы можете создать новый контекст форматирования блока для очистки выравнивания.
В зависимости от ситуации будет видно, какой метод больше подойдёт.

Класс	Описание
`.uk-nbfc`	Устанавливает `overflow: hidden;`.
`.uk-nbfc-alt`	Устанавливает display в table-cell, чтобы создать новый блочный контекст форматирования.

Выравнивание изображений и объектов

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

Класс	Описание
`.uk-align-left`	Перемещает элемент влево и устанавливает правый и нижний отступ ^*margin.
`.uk-align-right`	Выравнивает элемент вправо и создает левый и нижний отступ ^*margin.
`.uk-align-medium-left`	Влияет только на ширину устройства от 768px и выше.
`.uk-align-medium-right`	Влияет только на ширину устройства от 768px и выше.
`.uk-align-center`	Центрирует элемент и создает нижний отступ ^*margin.

Пример

Выравнивает картинку по правому краю Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в берлогу.

Разметка

<p class="uk-clearfix">
    <img class="uk-align-medium-right" src="" alt="">
    ...
</p>

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

Чтобы выровнять объекты по вертикали, необходимо создать родительский контейнер, в котором и будет выровнен сам объект.

Класс	Описание
`.uk-vertical-align`	Добавьте класс `uk-vertical-align` в родительский контейнер. *У контейнера должна быть указана высота.
`.uk-vertical-align-middle`	Добавьте класс `uk-vertical-align-middle` к дочернему элементу, чтобы центрировать контент вертикально.
`.uk-vertical-align-bottom`	Добавьте класс `uk-vertical-align-bottom` к дочернему элементу, чтобы выровнять контент по нижнему краю.
`.uk-height-1-1`	Дополнительный класс `uk-height-1-1` устанавливает высоту 100%.

Пример

Душа моя озарена неземной радостью, как эти чудесные весенние утра.

Разметка

<div class="uk-vertical-align">
    <div class="uk-vertical-align-middle uk-width-medium-8-10">
        ...
    </div>
</div>

Разметка

<div class="uk-vertical-align">
    <div class="uk-vertical-align-bottom uk-width-medium-2-3">
        ...
    </div>
</div>

Важно! Выравниваемый объект должен иметь ширину или максимальную ширину меньше его родительского контейнера.

Выравнивание страницы по центру

Класс .uk-height-1-1 пригодится, если вы хотите вытянуть <html> и <body> на всю высоту страницы. Это может быть очень полезно при создании одноэкранных страниц, страницы с 404-й ошибкой и др..

Разметка

<html class="uk-height-1-1" lang="ru-RU">
    <meta charset="utf-8">
    ...
    <body class="uk-height-1-1">
        <div class="uk-vertical-align">
            <div class="uk-vertical-align-middle">...</div>
        </div>
    </body>
</html>

Горизонтальное центрирование

Добавьте класс .uk-text-center, чтобы центрировать содержимое по горизонтали, выровнять контент по центру.

Viewport height

Чтобы создать контейнер, который заполняет всю высоту окна просмотра, например, для полноэкранного изображения или видео-тизеров, просто добавьте класс .uk-height-viewport.

Позиционирование элементов

UIkit 2 предоставляет ряд классов для позиционирования вашего контента без необходимости добавления собственного CSS.

Класс	Описание
`.uk-position-top`	Элемент с абсолютным позиционированием перемещается вверх.
`.uk-position-top-left`	Элемент с абсолютным позиционированием будет расположен в левом верхнем углу.
`.uk-position-top-right`	Элемент с абсолютным позиционированием будет расположен в правом верхнем углу.
`.uk-position-bottom`	Установлено абсолютное позиционирование. Расположение элемента внизу.
`.uk-position-bottom-left`	Установлено абсолютное позиционирование. Расположение элемента внизу слева.
`.uk-position-bottom-right`	Установлено абсолютное позиционирование. Расположение элемента внизу справа.
`.uk-position-cover`	Добавляет абсолютное позиционирование к элементу, распологает его так, чтобы охватить весь родительский элемент.
`.uk-position-relative`	Положение элемента устанавливается относительно его исходного места.
`.uk-position-z-index`	Добавляет z-index: 1 к элементу.

Отзывчивые объекты

Изображения в UIkit 2 по умолчанию адаптируются к ширине родительского контейнера. Если вы хотите применить адаптивное поведение к медиа-элементам, таким как видеообъект, просто добавьте один из следующих классов.

Класс	Описание
`.uk-responsive-width`	Регулирует ширину объекта в соответствии с шириной его родителя, сохраняет исходное соотношение сторон.
`.uk-responsive-height`	Регулирует высоту объекта в соответствии с высотой его родителя, сохраняет исходное соотношение сторон.

Примечание Класс .uk-responsive-width можно применять и к <iframe> при условии, что установлены его атрибуты width и height.

Пример Responsive width

Разметка

<video controls class="uk-responsive-width">
    <source src="video.mp4" type="video/mp4">
</video>

Пример Responsive height

Responsive height

Разметка

<div class="" style="height: 160px;">
    <img class="uk-responsive-height" src="" alt="">
</div>

Встроенный SVG

SVG или Scaleable Vector Graphics (масштабируемая векторная графика) очень удобны, например, для отображения логотипа, который остается четким при его масштабировании. Чтобы иметь возможность управлять SVG через CSS, добавьте к тегу <img> атрибут data-uk-svg. Это преобразует ваше изображение во встроенный SVG, включая все атрибуты, такие как идентификаторы, классы, ширину и высоту, которые можно легко настроить с помощью CSS.

Разметка

<img src="/image.svg" data-uk-svg>

Margin

Добавьте один из следующих классов, чтобы добавить margin - внешнюю величину отступа к элементам блока.

Класс	Описание
`.uk-margin`	Добавляет `margin` от верхнего и нижнего края.
`.uk-margin-top`	Добавляет отступ сверху `margin-top`.
`.uk-margin-bottom`	Добавляет отступ снизу `margin-bottom`.
`.uk-margin-left`	Добавляет отступ слева `margin-left`.
`.uk-margin-right`	Добавляет отступ справа `margin-right`.

Margin large

Добавьте один из следующих классов, чтобы добавить большое пространство от границы текущего элемента до границы соседнего.

Класс	Описание
`.uk-margin-large`	Устанавливает большой отступ от верхнего и нижнего края.
`.uk-margin-large-top`	Устанавливает большой отступ от верхнего края.
`.uk-margin-large-bottom`	Устанавливает большой отступ от нижнего края.
`.uk-margin-large-left`	Устанавливает большой отступ от левого края.
`.uk-margin-large-right`	Устанавливает большой отступ от правого края.

Margin small

Добавьте один из следующих классов, чтобы задать небольшую величину отступа к элементам блока.

Класс	Описание
`.uk-margin-small`	Задаёт маленькую величину отступа от верхнего и нижнего края.
`.uk-margin-small-top`	Задаёт маленькую величину отступа от верхнего края.
`.uk-margin-small-bottom`	Задаёт маленькую величину отступа от нижнего края.
`.uk-margin-small-left`	Задаёт маленькую величину отступа от левого края.
`.uk-margin-small-right`	Задаёт маленькую величину отступа от правого края.

Margin remove

Добавьте один из следующих классов, чтобы удалить пространство от границы текущего элемента.

Класс	Описание
`.uk-margin-remove`	Удаляет отступы от каждого края элемента.
`.uk-margin-top-remove`	Удаляет отступ от верхнего края.
`.uk-margin-bottom-remove`	Удаляет отступ от нижнего края.

Auto margin

Чтобы добавить внешнее расстояние к элементам текущего элемента, например, встроенным элементам, которые перестраиваются на меньшие viewport'ы, добавьте атрибут data-uk-margin в их родительский контейнер. Это автоматически добавит .uk-margin-small-top к нижнему элементу.

Пример

Разметка

<p data-uk-margin>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
    <button class="uk-button">...</button>
</p>

Примечание По умолчанию data-атрибут добавляет в элементы класс .uk-margin-small-top.
Чтобы применить отступ больше, добавьте опцию {cls:'uk-margin-top'} или {cls:'uk-margin-large-top'}.

data-uk-margin="{cls:'uk-margin-top'}"

data-uk-margin="{cls:'uk-margin-large-top'}"

Примеры Auto margin

Padding

Чтобы удалить padding из элемента блока, добавьте один из следующих классов.

Класс	Описание
`.uk-padding-remove`	Удаление полей вокруг содержимого элемента со всех сторон.
`.uk-padding-top-remove`	Удаляет внутренние отступы элемента сверху.
`.uk-padding-bottom-remove`	Удаляет внутренние отступы элемента снизу.
`.uk-padding-vertical-remove`	Удаляются поля сверху и снизу.

Border radius

Чтобы добавить закругленные углы к элементу, например к изображению, добавьте класс .uk-border-rounded. Чтобы создать круглую форму, добавьте класс .uk-border-circle.

Примеры

Border rounded Border circle

Разметка

<img class="uk-border-rounded" src="" alt="">
<img class="uk-border-circle" src="" alt="">

Heading large

Чтобы увеличить размер шрифта ваших заголовков на планшетах и больших экранах, просто добавьте класс .uk-heading-large.

Пример

Большой заголовок

Разметка

<h1 class="uk-heading-large">Большой заголовок<h1>

Link muted

Если ссылка не должна иметь цвет ссылки по умолчанию, добавьте класс .uk-link-muted к её тегу.

Примечание При необходимости можно добавить класс .uk-link-muted к родительскому элементу.

Примеры

Ссылка

Ссылка в заголовке

Разметка

<a class="uk-link-muted">Ссылка</a>

<h1 class="uk-link-muted"><a href="">Ссылка в заголовке</a><h1>

<ul class="uk-link-muted">
    <li><a>Ссылка</a></li>
    <li><a>Ссылка</a></li>
</ul>

Scrollable preformatted text

Добавьте класс .uk-scrollable-text, чтобы установить максимальную высоту и обеспечить вертикальную полосу прокрутки. Это бывает очень полезно для предварительно отформатированного текста, если вы не хотите, чтобы ваши блоки кода занимали слишком много места.

Синтаксис

<pre class="uk-scrollable-text"><code>...</code></pre>

Пример

<!-- Это демонстрационный пример кода предварительно отформатированного текста с полосой прокрутки. -->

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-left">Не следует забывать, что чистый разум не скован границами</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-right">Не следует забывать, что чистый разум не скован границами</div>
    </div>
</div>
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-center">Не следует забывать, что чистый разум не скован границами</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-justify">Не следует забывать, что чистый разум не скован границами</div>
    </div>
</div>

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-panel-box-primary uk-text-break">Не следует забывать, что чистый разум не скован границами</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">
            <p class="uk-margin-remove uk-text-truncate">Не следует забывать, что чистый разум не скован границами</p>
        </div>
    </div>
</div>

Scrollable box

Добавьте класс .uk-scrollable-box, чтобы создать универсальный блок в виде панели, которая имеет максимальную высоту и обеспечивает вертикальную полосу прокрутки. Может содержать в себе любой контент.

Пример

Разметка

<div class="uk-scrollable-box">
    <ul class="uk-list">
        <li><label><input type="checkbox">...</label></li>
        <li><label><input type="checkbox">...</label></li>
    </ul>
</div>

Overflow container

Чтобы создать контейнер, обеспечивающий горизонтальную полосу прокрутки всякий раз, когда элементы внутри него шире самого контейнера, просто добавьте класс .uk-overflow-container к тегу <div>. Это полезно, когда приходится работать с таблицами на адаптивном веб-сайте, который в какой-то момент может стать слишком большим.

Пример

Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы	Заголовок таблицы
Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул	Нижний колонтитул
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы
Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы	Данные таблицы

Разметка

<div class="uk-overflow-container">
    ...
</div>

Display utilities

Добавьте один из этих классов, чтобы изменить значение свойства отображемого элемента.

Класс	Описание
`.uk-display-block`	Элемент отображается как блочный.
`.uk-display-inline`	Элемент отображается как встроенный.
`.uk-display-inline-block`	Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу.

Visibility utilities

Класс	Описание
`.uk-hidden`	Скрывает элемент на любом устройстве.
`.uk-hidden-touch`	Скрывает элемент на сенсорных устройствах.
`.uk-hidden-notouch`	Скрывает элемент на не сенсорных устройствах.
`.uk-invisible`	Скрывает элемент, не удаляя его. Элемент становится невидимым, прозрачным.
`.uk-visible-hover`	Отображает скрытый контент при наведении курсора как `display: block`. Добавьте этот класс к родительскому элементу.
`.uk-visible-hover-inline`	Отображает скрытый контент при наведении курсора как `display: inline-block`. Добавьте этот класс к родительскому элементу.

Примеры

Наведите на меня...

Радость-то какая!

Наведите на меня...

Радость-то какая!

Разметка

<div class="uk-visible-hover-inline">
    Наведите на меня... 
    <div class="uk-hidden">Радость-то какая!</div>
</div>

<div class="uk-visible-hover">
    Наведите на меня...
    <div class="uk-hidden">Радость-то какая!</div>
</div>

Responsive visibility

Вы можете показать или скрыть содержимое на определенной ширине области просмотра ^{* viewport widths}. Точки останова ^{* Breakpoints} устанавливаются через переменные и при необходимости могут быть изменены.

Класс	Small (Phones) up to 767	Medium (Tablets) 768 to 959	Large (Desktops) 960 and larger
`.uk-visible-small`	Visible	Hidden	Hidden
`.uk-visible-medium`	Hidden	Visible	Hidden
`.uk-visible-large`	Hidden	Hidden	Visible
`.uk-hidden-small`	Hidden	Visible	Visible
`.uk-hidden-medium`	Visible	Hidden	Visible
`.uk-hidden-large`	Visible	Visible	Hidden