Начало работы

Знакомство с базовой конфигурацией и структура UIkit.

Прежде всего необходимо загрузить UIkit. Вы можете найти весь проект и все исходные файлы на GitHub.

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

В файле zip вы найдете все CSS, JavaScript и файлы шрифтов, готовых к использованию для вашего проекта. Изначально фраймворк UIkit поставляется практически без стилей, чтобы сохранить его гибкость. Поэтому мы предлагаем две темы оформления: объемная с градиентом и плоская, стильная тема. Каждый стиль поставляется как отдельный файл CSS, а также его уменьшенная версия.

Папка	Описание
`/css`	Содержит все UIkit CSS файлы и их сжатые версии.
`/fonts`	Содержит шрифты, используемые в UIkit.
`/js`	Содержит все UIkit JavaScript файлы и их сжатые версии.

/css
    <!-- UIkit with the basic style -->
    uikit.css
    uikit.min.css

    <!-- UIkit with Gradient style -->
    uikit.gradient.css
    uikit.gradient.min.css

    <!-- UIkit with Almost flat style -->
    uikit.almost-flat.css
    uikit.almost-flat.min.css

    <!-- Advanced components -->
    /components

/fonts
    <!-- FontAwesome webfont -->
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    fontawesome-webfont.woff2
    FontAwesome.otf

/js
    <!-- JavaScript and minified version -->
    uikit.js
    uikit.min.js

    <!-- Advanced components -->
    /components

    <!-- Core components -->
    /core

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

Во-первых, убедитесь, что у вас есть подходящий редактор кода, например Sublime Text. Необходимо добавить скомпилированный и желательно минимизированный UIkit CSS и JavaScript в заголовок вашего HTML5 документа. Библиотека библиотека jQuery также необходима для работы. Вот и всё!

Пример

<!DOCTYPE html>
<html>
    <head>
        <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 компоненты чтобы увидеть всё, что предлагает UIkit.

UIkit на cdnjs.com

Все варианты UIkit размещены так же в cloudflare, сети доставки Контента через cdnjs.com.

Пример


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

UIkit автозаполнение для среды IDE

Чтобы работать еще более эффективно, мы рекомендуем Вам установить один из плагинов автозаполнения для вашей любимой IDE или редактор кода. Это экономит время, поскольку вам не придется искать все типы и классы Uikit разметки.

UIkit автозаполнение для возвышенного. Установить через возвышенное пакета управления.
UIkit автозаполнение для PHPstorm. Установить через PHPstorm настроек плагина.
UIkit поддержки для атома. Искать атом-uikit в атоме менеджер пакетов.