Ознакомьтесь с основными настройками и обзором фреймворка UIkit.
Для начала скачайте UIkit по ссылке ниже. Другие способы установки и подключение через CDN находятся в разделе Установка.
Содержимое архива
Zip архив содержит компилированные файлы CSS и JavaScript, которые уже готовы к работе. Вы также можете установить и компилировать UIkit и, конечно, создать собственную тему UIkit.
Директория | Описание |
---|---|
/css |
Содержит файлы CSS фреймворка UIkit в вариатнтах LTR и RTL. |
/js |
Содержит JavaScript файлы фреймворка UIkit и библиотеку иконок, основанную на JavaScript. |
HTML разметка
Подключите скомпилированные и минифицированные CSS и JavaScript файлы в вашего документа HTML5. Также подключите библиотеку иконок UIkit. Готово! Настройка завершена.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/uikit.min.css" />
<script src="js/uikit.min.js"></script>
<script src="js/uikit-icons.min.js"></script>
</head>
<body>
</body>
</html>
Итак, мы подключили UIkit на свои страницы. Теперь ознакомьтесь с доступными компонентами и создайте собственную разметку внутри тега <body>
вашей страницы.
Внимание UIkit 3 больше не использует библиотеку JQuery, поэтому ее подключать не обязательно.
Плагины автозаполнения для UIkit в редакторах кода
Вероятно, в работе вы используете редакторы кода. Для повышения эффективности работы используйте плагины автозаполнения UIkit для различных редакторов и IDE. Например, плагин для Sublime и Atom. Используя автозаполнение, вы сэкокономите много времени, так как не искать и вводить все классы UIkit и примеры разметки станет проще.
- Плагин автозаполнения UIkit для Sublime Text 3
- Плагин автозаполнения UIkit для Atom
- Плагины UIkit для PHP Storm
Поддержка браузеров
В этой таблице перечислены версии, на которых тестировался UIkit. «Последняя» означает, что он отлично работает на всех последних версиях этого браузера.