Установка UIkit 3

Где скачать и как скомпилировать исходники UIkit 3.

Скачать UIkit 3

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

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

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

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

<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit-icons.min.js"></script>
Примечание Последние хэши Subresource Integrity (SRI) можно получить здесь - CDNJS.
<!-- Пример использования элемента `link` с атрибутом `integrity` SRI: -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.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.1.5/js/components/lightbox.min.js" integrity="sha256-RNSv6oBpfbUO4ZDVal6d1T5Oa1bNMfHJM9Bywoq9FOc=" crossorigin="anonymous"></script>

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

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

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

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

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

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

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

# Режим просмотра. Отслеживание изменений. 
# Процесс, который автоматически компилирует, каждый раз, когда файл изменяется.
yarn watch
Примечание Используйте Node.js версии 8.2.0 или выше.

Скомпилированная папка 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, вы можете использовать прилагаемые сценарии сборки.

yarn watch
Документация
Компоненты