Less

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

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


Как собрать

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

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

Чтобы включить UIkit в рабочий процесс сборки вашего проекта, вам необходимо импортировать основные стили UIkit (uikit.less) или UIkit с его темой по умолчанию (uikit.theme.less) в собственный файл 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, запустите задачу yarn compile.

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

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

# Режим просмотра; отслеживание изменений. 
# Процесс, который автоматически компилирует каждый раз, когда файл изменяется.
yarn 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-*, чтобы вывести свои собственные цвета и могут слегка их адаптировать. Таким образом, вы можете быстро создать тему, просто изменив некоторые глобальные переменные.

Используйте hook

To prevent overhead selectors, we use Mixins from Less, which hook into predefined selectors from the UIkit source and apply additional properties. Selectors don't have to be repeated throughout all documents and global changes can be made much more easily.

Сначала найдите правило, которое вы хотите дополнить, просмотрев файл 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; }

Miscellaneous hooks

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

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

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

Отключить "inverse component"

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

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

@inverse-global-color-mode: none;

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

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

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

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

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

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

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

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

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

[

custom/

    <!-- entry file for Less compiler -->
    my-theme.less

    <!-- folder with single Less files -->
    my-theme/

        <!-- imports all components in this folder -->
        _import.less

        <!-- one file per customized component -->
        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.
Документация
Компоненты