Основы. Начало работы

Для начала работы необходимо загрузить UIkit 2.

UIkit можно использовать для личных или коммерческих проектов. Коллекция UIkit лицензируется и распространяется в соответствии с лицензией MIT, размещена на веб-сервисе GitHub. Для распаковки исходных файлов просто закиньте репозиторий с GitHub, или скачайте версию тут:


Знакомство с базовой структурой

В предоставленном zip-файле уже находятся готовые к использованию CSS, JavaScript и файлы шрифтов. Чтобы сохранить гибкость, изначально, фреймворк UIkit поставляется практически без стилей. Дополнительно, вместе с темой по умолчанию, можно найти ещё две темы оформления:

  • gradient - тема с градиентным стилем
  • almost-flat - почти плоский стиль темы

Каждый стиль коллекции UIkit поставляется в виде отдельного файла CSS, а также его уменьшенная, минимизированная версия *.min.css.

Папка Описание
/css CSS файлы UIkit и их минимизированные версии.
/fonts Шрифты, используемые в UIkit.
/js JavaScript файлы UIkit и их минимизированные версии.
/css
    <!-- UIkit стили по умочанию -->
    uikit.css
    uikit.min.css

    <!-- UIkit с градиентом-->
    uikit.gradient.css
    uikit.gradient.min.css

    <!-- Почти плоский стиль UIkit -->
    uikit.almost-flat.css
    uikit.almost-flat.min.css

    <!-- Дополнительные компоненты -->
    /components

/fonts
    <!-- Веб-шрифт FontAwesome -->
    FontAwesome.otf
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    fontawesome-webfont.woff2

/js
    <!-- JavaScript и минимизированная версия -->
    uikit.js
    uikit.min.js

    <!-- Дополнительные компоненты -->
    /components

    <!-- Основные компоненты -->
    /core

Разметка HTML страницы

Необходимо добавить CSS и JavaScript файлы (желательно минимизированные) в заголовок (head) вашего документа HTML5.

Примечание Также к проекту необходимо добавить библиотеку jQuery.

Пример

<!DOCTYPE html>
    <html lang="ru">
    <head>
        <meta charset="UTF-8">
        <title>Заголовок</title>
        <link rel="stylesheet" href="uikit.min.css">
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
    </head>
    <body>
    
    </body>
</html>

Вот и всё!

После того как подключите UIkit к вашей веб-странице, взгляните на компоненты UIkit 2, чтобы увидеть всё, что предлагает модульный фрейморк.


UIkit на cdnjs.com

Найти необходимую версию и подключить UIkit можно с cdnjs.com. Там резмещены все версии UIkit.

Пример

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>

UIkit autocomplete for IDE's