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>

Если ссылка не должна иметь цвет ссылки по умолчанию, добавьте класс .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