Less

Узнайте, как изменить стиль UIkit 3 и создать собственную тему благодаря Less. Руководство.

Когда вы установили UIkit 3 с источниками Less, вы можете скомпилировать его и добавить свою собственную тему. Less - это язык стилей, на котором написаны стили UIkit. Это позволяет вам создавать и включать пользовательские настройки в процесс сборки, а не переписывать множество правил CSS вручную.

Как собрать

Исходные файлы Less позволяют самостоятельно настроить UIkit. Чтобы использовать пользовательскую, индивидуальную версию на вашем сайте, вам нужно скомпилировать источники Less в CSS. В основном вам доступны два подхода: настроить собственный процесс сборки или использовать сценарии сборки включенные в UIkit.

Использовать свой собственный процесс сборки

Чтобы включить UIkit в рабочий процесс сборки вашего проекта, вам необходимо в собственный файл Less вашего проекта импортировать основные стили UIkit (uikit.less) или UIkit с темой по умолчанию (uikit.theme.less). Затем этот основной файл Less необходимо скомпилировать любым удобным для вас способом. Прочтите официальную документацию Less, если вы не знаете, как скомпилировать Less. 

// Импорт темы UIkit по умолчанию (или uikit.less только с основными стилями)
@import "node_modules/uikit/src/less/uikit.theme.less";

// Ваш пользовательский код находится здесь, например миксины, переменные.
// Для получения дополнительной информации смотрите ниже "как создать тему".

Использовать включенный процесс сборки

Если вы хотите изменить стили UIkit, вы можете использовать его процесс сборки для создания версии CSS с собственной темой, которую вы затем запросто сможете включить в свой проект. Таким образом, вам не нужно настраивать собственный процесс сборки.

Чтобы включить собственную тему Less в процесс сборки, создайте каталог /custom, который и будет содержать в себе ваши пользовательские темы (файлы).

Примечание Папка /custom уже заранее указана в .gitignore, что предотвращает отправку ваших пользовательских файлов в репозиторий UIkit. Вы также можете иметь этот /custom каталог в качестве собственного Git-репозитория. Таким образом, ваши файлы темы находятся под контролем версий, не мешая файлам UIkit.

Создайте файл /custom/my-theme.less (или любое другое имя) и импортируйте основные стили UIkit (uikit.less) или стили с темой UIkit по умолчанию (uikit.theme.less). 

// Импорт темы UIkit по умолчанию (или uikit.less только с основными стилями)
@import "../src/less/uikit.theme.less";

// Ваш пользовательский код находится здесь, например миксины, переменные.
// Для получения дополнительной информации "как создать тему" смотрите ниже.

Чтобы скомпилировать UIkit и вашу собственную тему в CSS, запустите задачу pnpm compile.

# Запустите, чтобы установить все зависимости
pnpm install

# Скомпилируйте все исходные файлы, включая вашу тему
pnpm compile

# Режим просмотра; отслеживание изменений. 
# Процесс, который автоматически компилирует каждый раз, когда файл изменяется.
pnpm watch

Сгенерированные файлы CSS будут расположены в папке /dist/css.

Примечание Пользовательская тема также доступна в тестовых файлах, просто перейдите в вашем браузере по адресу каталога /test и выберите свою тему в выпадающем меню.

Создать тему UIkit

Когда вы настроите файл для добавления своего собственного кода Less, вы можете приступить к созданию темы UIkit так, как вам нужно. Если вы никогда не использовали Less раньше, ознакомьтесь с языковыми функциями. При работе с источниками UIkit Less у нас есть несколько рекомендаций.

Используйте переменные

Большая настройка возможна путем простой перезаписи значений уже объявленных переменных. Вы можете найти все переменные для каждого компонента внутри их файлов Less структуры и переопределить их в своей теме.

Сначала найдите переменную Less, которую вы хотите изменить, в исходном коде UIkit. Например, цвет глобальной ссылки определяется в /src/less/components/variables.less: 

// значение по умолчанию
@global-link-color: #4091D2;

Затем замените значение по умолчанию, установив пользовательское значение в своем собственном файле, т.е. в /custom/my-theme.less:

// новое значение
@global-link-color: #DA7D02;

Скомпилированный CSS будет иметь ваше собственное значение. Но не только изменится цвет глобальной ссылки. Многие компоненты используют переменные @global-*, чтобы вывести свои собственные цвета и могут слегка их адаптировать. Таким образом, вы можете быстро создать тему, просто изменив некоторые глобальные переменные.

Используйте хуки (перехваты)

Чтобы избежать лишних селекторов, мы используем миксины от Less, которые подключаются к предопределенным селекторам из источника UIkit и применяют дополнительные свойства. Селекторы не нужно повторять во всех документах, а глобальные изменения вносить гораздо проще.

Сначала найдите правило, которое вы хотите дополнить, просмотрев файл Less компонента, например /src/less/components/card.less для компонента Card:

// Правило CSS
.uk-card {
    position: relative;
    box-sizing: border-box;

    // mixin для добавления новых объявлений
    .hook-card();
}

Затем добавьте дополнительный CSS, используя хук внутри вашего собственного файла Less, т.е. в /custom/my-theme.less:

// mixin, чтобы добавить новое значение
.hook-card() { color: #000; }

Прочие пользовательские хуки

Если нет ни переменной, ни хука, вы также можете создать свой собственный селектор. Для этого используйте хук .hook-card-misc и напишите свой селектор внутри. Это отсортирует ваш новый селектор в нужном месте скомпилированного файла CSS. Просто добавьте следующие строки в свой собственный файл Less, то есть в /custom/my-theme.less: 

// misc mixin
.hook-card-misc() {

    // новое правило
    .uk-card a { color: #f00; }
}

Отключить компонент «Инверсия»

Компонент «Инверсия» включает дополнительные стили для реализации гибкого инверсного поведения. Если ваш проект не использует эти стили, то можно не использовать их при компиляции Less. Это позволит уменьшить размеры файлов скомпилированного CSS. Для этого найдите переменные Less содержащие color-mode (пример: @card-primary-color-mode) и установите для них значение none.

Чтобы полностью отключить инверсные стили, установите:

@inverse-global-color-mode: none;

Вы также можете отключить инверсный режим для определенных компонентов:

// Card           - Карта Карточка
@card-default-color-mode: none;
@card-primary-color-mode: none;
@card-secondary-color-mode: none;

// Dropbar
@dropbar-color-mode: none;

// Dropdown
@dropdown-color-mode: none;

// Navbar         - Панель навигации
@navbar-color-mode: none;
@navbar-dropdown-color-mode: none;

// Off-canvas     - Панель вне холста
@offcanvas-bar-color-mode: none;

// Overlay        - Наложение
@overlay-default-color-mode: none;
@overlay-primary-color-mode: none;

// Section        - Раздел
@section-default-color-mode: none;
@section-muted-color-mode: none;
@section-primary-color-mode: none;
@section-secondary-color-mode: none;

// Tile           - Плитка
@tile-default-color-mode: none;
@tile-muted-color-mode: none;
@tile-primary-color-mode: none;
@tile-secondary-color-mode: none;

Как структурировать свою тему

В приведенных выше примерах добавлены все пользовательские правила непосредственно в /custom/my-theme.less. Когда вы меняете несколько переменных, но довольны остальными, это прекрасно. Однако для больших изменений рекомендуется использовать этот файл только в качестве точки входа для компилятора Less. Будет лучше отсортировать все правила в отдельные файлы для каждого компонента внутри подпапки. Это та же самая структура, которую вы можете найти в теме по умолчанию /src/less/uikit.theme.less.

Примечание В примере предполагается, что вы создаете тему в каталоге /custom полного проекта UIkit. Вы можете адаптировать эти пути, если вы настроили свой собственный процесс сборки. 

custom/

    <!-- входной файл для компилятора Less -->
    my-theme.less

    <!-- папка с одиночными файлами Less -->
    my-theme/

        <!-- импортирует все компоненты -->
        _import.less

        <!-- один файл для каждого настраиваемого компонента -->
        accordion.less
        alert.less
        ...

Точка входа для компилятора Less, /custom/my-theme.less:

// Core
@import "../../src/less/uikit.less";

// Theme
@import "my-theme/_import.less";

В папке вашей темы есть один файл, который импортирует все настройки отдельных компонентов, custom/my-theme/_import.less:

@import "accordion.less";
@import "alert.less";
// ...

Примечание С помощью этой настройки вы можете удалить операторы импорта компонентов, которые вы не используете. Это приведет к уменьшению CSS. Просто убедитесь, что вы сохранили правильный порядок импорта, указанный в src/less/components/_import.less.