Базовые элементы

Стили по умолчанию для всех элементов HTML.

Начальный набор стилей UIkit устанавливает базовый внешний вид страницы, типографию, устанавливает цвета по умолчанию, поля, шрифт и многое другое, для каждого HTML элемента. В данном разделе вы можете ознакомиться с кратким руководством, о том, как использовать основные элементы HTML вместе с UIKit 2.

В основе коллекции UIkit используется знаменитый normalize.css, при помощи которого браузеры начинают отображать все элементы в соответствии с современными стандартами. Добавлены самые необходимые его части. Большая часть связанная с нормализацией CSS располагается в компонентах Form, Button и Table.

Заголовки

Для обозначения наиболее важных заголовков применяйте теги <h1> — <h6>.

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5

Заголовок h6

Вы можете добавить класс .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 или .uk-h6 для изменения размера, стиля. Например, заголовок h1 может выглядеть как h3.

Разметка

<!-- Заголовок h1 будет отображаться как h3 -->
<h1 class="uk-h3">Заголовок</h1>
  
<!-- Заголовок h4 как h2 -->
<h4 class="uk-h2">Заголовок</h4>

Текстовый абзац

Глобальный размер шрифта, высота строки и отступы между элементами задаются через переменные, которые могут быть настроены.

Синтаксис

<p>Какой-то интересный текст</p>

Семантические элементы, тэги

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

Тег Описание
<a> Преобразует текст в гипертекст используя гиперссылку.
<em> Акцентируем внимание на слово или фразу с помощью тега em.
<strong> Укажем на важность помеченного текста, отображаем текст жирным начертанием.
<code> Для отображения встроенных фрагментов кода, используется тег code.
<del> Изменим слова в тексте на перечеркнутые, покажем их как удаленный текст.
<ins> Данное форматирование укажет на то, какие изменения в тексте документа были сделаны.
<mark> Выделим тегом текст без семантического значения, для изменения внешнего вида.
<q> Укажем встроенную цитату внутри отображаемого текста.
<abbr> Данная последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка.
<dfn> Выделим новый термин курсивом с использованием подсказки, при первом появлении в тексте.
<small> Уменьшим размер шрифта по сравнению с обычным текстом, текст получается маленьким.

Горизонтальная линия

Вставим разделительную горизонтальную линию с помощью тега <hr>.

Пример

Цитаты

Развернутая цитата внутри документа. Для цитирования нескольких строк контента, содержащихся в материале, используем тег <blockquote>.

Пример

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

Автор Авторович

Разметка

<blockquote>
    <p>Взобравшись на первую вершину...</p>
    <small>Автор выражения</small>
</blockquote>

Блоки с кодом

Для нескольких строк кода, используйте тег <pre>, который определяет предварительно отформатированный текст. Создается текстовый блок, который сохраняет пробелы, символы табуляции и переносы (разрывы) строк. Для отображения одной или нескольких строк текста вложите тег <code> внутрь блока, который представляет собой программный код.

Обязательно, для правильного отображения, помещая значения, угловые скобки должны быть экранированы по правилам.

Разметка

<pre>
    <code>...</code>
</pre>
Заметка При необходимости можно добавить класс .uk-scrollable-text из компонента Utility, который установит максимальную высоту в 300px и создаст полосу прокрутки для оси Y.

Пример кода. Демо с применением .uk-scrollable-text

<!-- Демо. Форматированный текст с полосой прокрутки. -->

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

Разметка

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

Списки

Создаём маркированный или нумерованный список с помощью тегов <ul> или <ol>.

Тег <li> определяет отдельный элемент списка.

Пример

  • Маркированный список
  • Маркированный список
    • Мальвина
    • Мальвина
      • Пьеро
      • Пьеро
  • Арлеккино
  • Арлеккино
  1. Нумерованный список
  2. Нумерованный список
    1. Арлеккино
    2. Арлеккино
      1. Буратино
      2. Буратино
  3. Пьеро
  4. Пьеро

Синтаксис

<ul>
    <li>Маркированный список...</li>
    <li>Маркированный список...
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>

Синтаксис

<ol>
    <li>Нумерованный список...</li>
    <li>Нумерованный список...
        <ol>
            <li>...</li>
        </ol>
    </li>
</ol>

Список определений

Создаем список определений. Каждый такой список начинается с контейнера <dl>, где <dt> создаёт термин, а тег <dd> задаёт определение этого термина.

Пример

Это термин 1
Это описание термина 1.
Это термин 2
Это определение термина 2.
Это термин 3
Это определение термина 3.

Разметка. Список определений

<dl>
    <dt>Термин</dt>
    <dd>Определение термина</dd>
</dl>

Адаптивные изображения

Все изображения в UIKit адаптивные по умолчанию. Если макет сужается, изображение подстраивается под ширину блока в которое оно помещено и сохраняет пропорции.

Пример

Измените размеры окна браузера, чтобы увидеть адаптивное поведение изображения.

Адаптивные изображения

Заметка Чтобы избежать адаптивного поведения и сохранить исходные размеры изображения, нужно добавить к изображению класс .uk-img-preserve. Если нужно применить правило к нескольким изображениям, то можно добавить класс родительскому контейнеру.
* Это не фурыкает с Google Картами.