Установка

Скачать UIkit

У вас есть следующие варианты получить коллекцию UIkit 3:

Загрузить уже готовую последнюю версию файлов JavaScript и CSS.
Установить с помощью pnpm, чтобы получить готовые исходные файлы JavaScript, CSS и Less, дополнительно включая тестовые файлы HTML. Этот вариант рекомендуется для типичного веб-проекта при использовании UIkit:
pnpm add uikit.
Клонировать репозиторий, чтобы получить все исходные файлы, включая сценарии сборки:
git clone git://github.com/uikit/uikit.git.
Скачать UIkit 3 с сайта.

Скомпилированные файлы версий UIkit также размещаются на

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3/dist/css/uikit.min.css">

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3/dist/js/uikit-icons.min.js"></script>

cdnjs.com

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/css/uikit.min.css">

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/js/uikit-icons.min.js"></script>

Примечание Последние хэши Subresource Integrity (SRI) можно получить здесь - jsDelivr.

<!-- Пример использования элемента `link` с атрибутом `integrity` SRI: -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/css/uikit-core.min.css" 
    integrity="sha256-k1YHVp1MRDX9zbB5Mqfcad7oC7Z0uUGgR/uFqSLlLHg=" crossorigin="anonymous" />

<!-- Пример использования тега `script` с атрибутом `integrity` SRI: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.5/js/components/lightbox.min.js" 
    integrity="sha256-RNSv6oBpfbUO4ZDVal6d1T5Oa1bNMfHJM9Bywoq9FOc=" crossorigin="anonymous"></script>

Если вы используете шаблон Joomla или тему WordPress вместе с мощным конструктором страниц YOOtheme Pro, то фреймворк UIkit уже включён в пакет.
Widgetkit - мощный плагин WordPress и расширение для Joomla, содержит отличную коллекцию виджетов.

Файловая структура

Проект Github содержит все исходные файлы, которые расположены в папке dist.

Папка	Описание
`/src`	Содержит источники всех Less, SCSS, JavaScript и изображений.
`/dist`	Содержит скомпилированные CSS и JS, обновляемые.
`/tests`	Содержит тестовые файлы HTML всех компонентов.

Скомпилировать проект с GitHub

Чтобы скомпилировать UIkit 3 самостоятельно, вы можете использовать прилагаемые скрипты сборки.

# Запустите один раз, чтобы установить все зависимости
pnpm install

# Скомпилируйте все исходные файлы
pnpm compile

# Режим просмотра. Отслеживание изменений. 
# Процесс, который автоматически компилирует, каждый раз, когда файл изменяется.
pnpm watch

Скомпилированная папка dist в данном варианте содержит дополнительные файлы, которые не включены по умолчанию. Задача сборки создать еще больше дополнительных файлов, если вы создаёте пользовательскую тему UIkit.

/dist/css

    <!-- UIkit CSS -->
    uikit.css
    uikit.min.css

    <!-- Основные стили UIkit -->
    uikit-core.css
    uikit-core.min.css

    <!-- CSS UIkit в версии RTL (сайт справа налево) -->
    uikit.rtl.css
    uikit.rtl.min.css


/dist/js

    <!-- UIkit JavaScript -->
    uikit.js
    uikit.min.js

    <!-- Урезанный JavaScript. Основные функции без дополнительных компонентов -->
    uikit-core.js
    uikit-core.min.js

    <!-- Библиотека иконок -->
    uikit-icons.js
    uikit-icons.min.js

    <!-- Дополнительные компоненты (например, Lightbox), требуется включение uikit-core.js -->
    /components

ИТОГО:

Чтобы использовать CSS и JavaScript UIkit 3, подключите файлы в свой HTML, а затем создайте разметку с использованием любого из компонентов перечисленных в этой документации.

Чтобы автоматически компилировать UIkit 3, при каждом изменении LESS или JavaScript, вы можете использовать прилагаемые сценарии сборки.

pnpm watch