Как избежать конфликтов

Вы можете использовать собственный, пользовательский префикс и / или режим «Scope», чтобы UIkit 3 безупречно работал в любой среде. Пользовательский префикс. Версия с ограниченной областью видимости.

По умолчанию все классы и атрибуты в UIkit начинаются с префикса uk-. Это уже позволяет избежать конфликтов имен при внедрении UIkit 3 в существующие проекты или при его объединении с другими фреймворками. UIkit даёт возможность изменить этот префикс. Это даже позволит использовать несколько версий UIkit вместе. Кроме того, UIkit с версией «Scope» позволяет ограничить стили, чтобы они влияли только на определенные части на ваших страницах.

Пользовательский префикс

Использование собственного префикса позволяет использовать несколько версий UIkit на одной странице. Это может понадобиться, когда вы создаете что-то вроде плагина для CMS. В таких случаях вы не знаете, какая версия UIkit может быть загружена, поэтому рекомендуется использовать собственный префикс.

Когда вы установили UIkit с GitHub, вы можете скомпилировать его с пользовательским префиксом. Например, если вы выберете пользовательский префикс abc, все атрибуты и классы будут начинаться с этого префикса, например, abc-grid вместо uk-grid. Глобальный объект JavaScript UIkit также будет переименован в abcUIkit.

pnpm prefix -- -p abc # заменяем на свой префикс abc.

Примечание pnpm prefix предложит ввести префикс.

Скрипт пройдётся по всем файлам находящимся в папке /dist и заменит префикс вашей версией префикса.

Примечание Базовый компонент по-прежнему будет включать стили, которые влияют на некоторые базовые элементы HTML. Если вам это не нужно, либо создайте пользовательскую сборку без включения базового компонента, либо используйте режим «Scope».

Режим «Scope»

Использование scoped-версии (с ограниченной областью видимости) UIkit позволяет ограничить стили, применять их только к определенной части документа. Это может понадобиться в административных интерфейсах, таких как бэкэнд WordPress или Joomla. Когда вы установили и настроили UIkit 3, вы можете перекомпилировать UIkit как scoped-версию.

pnpm scope

Примечание Чтобы получить больше возможностей: pnpm scope -- -h.

Вы найдете сгенерированные файлы CSS и JS в папке /dist. Чтобы использовать версию scope, оберните раздел документа c разметкой UIkit в элемент с классом .uk-scope.

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>

        <!-- нет разметки UIkit -->
        ...

        <div class="uk-scope">
            <!-- разметка с UIkit -->
            ...
        </div>
    </body>
</html>

Now you need to tell uk-modal, uk-tooltip and uk-lightbox where to append themselves into the DOM when they do not have the container option set, e.g. the default container for said components. To do so, set the following parameter:

//simply pass the selector
UIkit.container = '.uk-scope';
...
//or you can set an element directly, for example:
UIkit.container = document.getElementById('#id-of-scope-element');