Используйте пользовательский префикс и режим области видимости, чтобы UIkit мог работать в любой среде.
По умолчанию все классы и атрибуты в UIkit 3 имеют префикс uk-.
Данный префикс позволяет избежать конфликтов имен при внедрении UIkit 3 в существующие проекты или при его совместном использовании с другими платформами.
Если по каким-то причинам вам не нравится префикс uk-, вы можете его изменить. В результате получится использовать несколько разных версий UIkit вместе (правда, зачем?).
Кроме того, режим области действия позволяет ограничить стили UIkit, чтобы они влияли только на определенные части страницы.
Уникальный префикс фреймворка
Как мы уже говорили, применение собственного префикса позволяет использовать несколько версий UIkit на одной странице. Такое может потребоваться, когда вы создаете какой-нибудь плагин для CMS, т.е. в случае, когда нет информации о версии UIkit, которая будет подключена в проекте.
У вас уже есть исходники? Скорее забирайте их с Github и компилируйте уже со своим префиксом. После компиляции кода с вашим уникальным префиксом, пусть это будет xyz, все атрибуты и классы теперь станут именоваться по-новому. Например xyz-grid вместо стандартного uk-grid. Даже глобальный объект JavaScript UIkit переименуется в xyzUIkit.
С помощью Yarn сменить префикс можно с помощью команды:
yarn prefix -- -p xyz
Внимание yarn prefix Yarn попросит ввести новый префикс.
Сборщик скомпилирует все CSS-файлы с и разместит их в папку /dist. Теперь в ваших файлах используется собственный префикс.
Внимание Базовый компонент будет по-прежнему включать стили, которые влияют на некоторые элементы HTML. Чтобы избавиться от этого, либо создайте пользовательскую сборку, либо исключите базовый компонент. Также возможно ограничить его область действие.
Область видимости
Использование ограниченной версии UIkit 3 позволяет применять стили только к определенной части вашего страницы. Указанный подход пригодится в среде административных интерфейсов, таких как бэкэнд WordPress или Joomla. Естественно, перекомпилировать UIkit в ограниченный вариант возможно только с исходниками UIkit.
yarn scope
Внимание Команда yarn scope -- -h раскрывает больше возможностей.
Сгенерированные файлы CSS и JS традиционно будут находиться в папке /dist. Чтобы использовать ограниченную версию, оберните раздел документа разметкой UIkit 3 в элемент с классом .uk-scope.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!-- другая разметка -->
...
<div class="uk-scope">
<!-- разметка UIkit -->
...
</div>
</body>
</html>
Теперь у компонентов uk-modal, uk-tooltip и uk-lightbox может не быть опций по умолчанию, поэтому следует указать, где их инициализироваться в DOM. Установите параметр container для таких элементов:
// передаем селектор
UIkit.container = '.uk-scope';
...
// устанавливаем элемент напрямую, например:
UIkit.container = document.getElementById('#id-of-scope-element');