Утилита

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

Контейнер

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

Разметки

<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 rounded Border 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