Основы. Начало работы
Для начала работы необходимо загрузить 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.
Пример
<!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>