Установка

Где скачать коллекцию UIkit 3 и как скомпилировать исходники. Файловая структура. Скомпилировать проект с GitHub.

Скачать 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 также размещаются на

jsdelivr.com

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

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

cdnjs.com

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

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.18.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.18.3/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.18.3/css/uikit-core.min.css" integrity="sha256-k1YHVp1MRDX9zbB5Mqfcad7oC7Z0uUGgR/uFqSLlLHg=" crossorigin="anonymous" />

<!-- Пример использования тега `script` с атрибутом `integrity` SRI: -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.18.3/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