Установка UIkit

Узнайте, где скачать и как скомпилировать исходники фреймворка UIkit. Как подключить UIkit в проект.

Загрузка, пакетные менеджеры и CDN

Вы можете добавить в шаблон стили UIkit различными способами. Доступны следующие варианты получения кода UIkit:

  • Скачать свежую версию скомпилированных и минифицированных файлов JavaScript и CSS.
  • Установить с помощью NPM: в консоли введите npm install uikit
  • Установить с помощью Yarn все скомпилированные и минифицированные файлы JavaScript и CSS, а также их исходники. Просто напишите в консоли yarn add uikit
  • Клонировать GIT-репозиторий с исходниками с помощью команды git clone git://github.com/uikit/uikit.git

Скомпилированные файлы всех версий UIkit также есть на CDN cdnjs.com.

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

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

Структура проекта UIkit

Проект на Github содержит все исходники, которые привычно скомпилированы в папку dist. Исходники в Less, исходники JavaScript созданы на ECMAScript 5.

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

Компиляция с Github

Для самостоятельной компиляции UIkit используйте прилагаемые скрипты сборки.

# Установка зависимостей
yarn

# Компиляция исходников
yarn compile

# Автоматически компилируйте файлы каждый раз, когда изменяете их
yarn watch

Внимание Требуется Node.js версии 8.2.0 или выше.

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

/dist/css

    <!-- Файлы CSS -->
    uikit.css
    uikit.min.css

    <!-- Стили ядра UIkit, без использования стилей темы -->
    uikit-core.css
    uikit-core.min.css

    <!-- RTL версия UIkit -->
    uikit.rtl.css
    uikit.rtl.min.css


/dist/js

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

    <!-- Основные файлы JavaScript без компонентов -->
    uikit-core.js
    uikit-core.min.js

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

    <!-- Дополнительные компоненты (карусели, лайтбоксы) -->
    /components

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

Воспользуйтесь автоматической компиляцией файлов UIkit при каждом изменении LESS/SASS или JavaScript. Используйте готовые сценарии сборки.

yarn watch