Утилита

Набор полезных вспомогательных классов, для улучшения стиля вашего Контента.

Контейнер

Добавить .uk-container класс для блочного элемента, чтобы дать ему максимум ширины и оберните основного Контента вашего сайта. На большие экраны он применяет разные Макс-Ширина.


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

В центре контейнера, используйте .uk-container-center класс. Для любого другого блочного элемента, дополнительно необходимо применять ширину.

Пример

Centered block element

Разметки

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

Очистка и выравнивание

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

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

Разметки

<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 Выравнивания элемента слева и справа и снизу создается отступ.
.uk-align-right Выравнивания элемента справа и слева и снизу создается отступ.
.uk-align-medium-left Влияет только на устройства Ширин 768px и выше.
.uk-align-medium-right Влияет только на устройства Ширин 768px и выше.
.uk-align-center Центры элемент и создает Нижний отступ.

Пример

Image aligned to the rightLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Разметки

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

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

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

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

Пример

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Разметки

<div class="uk-vertical-align">
    <div class="uk-vertical-align-middle">
    ...
    </div>
</div>
<div class="uk-vertical-align">
    <div class="uk-vertical-align-bottom">
    ...
    </div>
</div>

Примечание объект вы совместите должен иметь ширину или Max-width, который меньше, чем его родительского контейнера.

Центр всей страницы

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

Разметки

<html class="uk-height-1-1">
    ...
    <body class="uk-height-1-1">
        <div class="uk-vertical-align">
            <div class="uk-vertical-align-middle">...</div>
        </div>
    </body>
</html>

Центр по горизонтали

Для центрирования содержимого по горизонтали, а добавить .uk-text-center класс для родительской и .uk-container-center класс для дочернего элемента. Это необходимо из-за aдаптивного поведения.


Высота вьюпорта

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


Положение элементов

UIkit обеспечивает ряд классов позиционировать ваш контент без необходимости добавлять свои собственные 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 адаптироваться к ширине родительского контейнера по умолчанию. Если вы хотите применить aдаптивный поведения на медиа-элементы, такие как видео объект, просто добавьте один из следующих классов.

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

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

Пример Ширина

Пример высота

Разметки

<video controls class="uk-responsive-width"></video>

<img class="uk-responsive-height" src="" alt="">

Встроенный SVG

SVGs или Масштабируемая векторная графика очень удобна, например, для отображения логотипа, который остается четким при масштабировании или анимированные. Чтобы иметь возможность контролировать свой SVG через CSS, просто добавьте data-uk-svg атрибута в теге изображения. Это превратит ваши изображения в встроенный SVG включая все атрибуты, такие как идентификаторы, классы, ширину и высоту которых теперь можно легко ориентироваться с помощью CSS.

Разметки

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

Oтступ

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

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

Больший отступ

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

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

Меньше отступ

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

Класс Описание
.uk-margin-small Добавляет небольшие сверху и снизу отступ.
.uk-margin-small-top Добавляет небольшой отступ.
.uk-margin-small-bottom Добавляет мелкие донные отступ.
.uk-margin-small-left Добавляет небольшой осталось отступ.
.uk-margin-small-right Добавляет небольшой правый отступ.

Удалить отступ

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

Класс Описание
.uk-margin-remove Удаляет все отступы.
.uk-margin-top-remove Удаляет верхний отступ.
.uk-margin-bottom-remove Удаляет Нижний отступ.

Авто отступ

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

Пример

Разметки

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

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


Обивка

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

Класс Описание
.uk-padding-remove Удаляет все внутренний отступ.
.uk-padding-top-remove Удаляет верхний внутренний отступ.
.uk-padding-bottom-remove Удаляет Нижний внутренний отступ.
.uk-padding-vertical-remove Удаляет верхний и нижний внутренний отступ.

Радиус границы

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

Пример

Border roundedBorder circle

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

Заголовок большой

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

Пример

Заголовок

Разметки

<h1 class="uk-heading-large">...<h1>

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

Пример

Разметки

<a class="uk-link-muted">...<a>

<h1 class="uk-link-muted"><a>...<a><h1>

<ul class="uk-link-muted">
    <li><a>...<a></li>
    <li><a>...<a></li>
    <li><a>...<a></li>
</ul>

Прокручивать предварительно отформатированный текст

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

Пример

<!-- This is sample code to demonstrate preformatted text with a scrollbar. -->

<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box uk-text-left">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box 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-text-center">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box 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-text-break">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel uk-panel-box"><p class="uk-margin-remove uk-text-truncate">...</p></div>
    </div>
</div>

Прокручивать окно

Добавить .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>

Переполнения контейнера

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

Пример

Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы Заголовок Таблицы
Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer Table Footer
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data

Разметки

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

Дисплей утилиты

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

Класс Описание
.uk-display-block Заставляет элемент вести себя как блочный элемент.
.uk-display-inline Заставляет элемент вести себя как строчный элемент.
.uk-display-inline-block Заставляет элемент вести себя как инлайн-блочный элемент.

Видимость коммунальные услуги

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

Пример

Hover me...
Bazinga!

Разметки

<div class="uk-visible-hover">
    <div class="uk-hidden">...</div>
</div>

Адаптивный видимости

Вы можете показать или скрыть контент на конкретную область просмотра шириной. Точки останова устанавливаются с помощью переменных и могут быть легко изменены. Поскольку грань между различными устройства размеры держит размытость, имена классов хранятся общие и не относятся к конкретным устройствам.

Класс Маленький
(Телефоны)
до 767
Средний
(Планшеты)
768 до 959
Большие
(Настольных компьютеров)
960 и больше
.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