Использование Less

Как переопределять стили UIkit и создавать собственные темы с Less.

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

Как настраивать

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

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

Для начала работы импортируйте основные стили фреймворка (uikit.less) и тему по умолчанию (uikit.theme.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.less) с применением встроенной темы (uikit.theme.less) или без нее.

// Импорт UIkit стандартной темы UIkit (или только файл ядра uikit.less с базовыми стилями)
@import "../src/less/uikit.theme.less";

// Разместите здесь ваш пользовательский код, например, примеси и переменные.
// Раздел с информацией о создании тем будет ниже на этой странице.

Для компиляции проекта UIkit и созданной вами темы в CSS, запустите встроенный таск compile .

# Запустите один раз для установки зависимостей
yarn install

# Компиляция всех исходников, включая пользовательскую тему
yarn compile

# Привычный таск Watch следит за изменениями файлов и компилирует на лету при каждом изменении файла
yarn watch

Сгенерированные файлы размещаются в папке /dist/css.

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

Создание собственной темы для UIkit

Мы успешно создали, настроили и умеем компилировать пользовательский код Less. Приступаем к созданию тем. Если вам ранее не приходилось пользоваться Less, документация в помощь. Но прежде ознакомьтесь с нашими рекомендациями.

Использование переменных Less

Перезаписывайте имеющиеся переменные. Откройте переменные интересующего каждого компонента и переопределите их в своей теме. Например, глобальная переменная цвета ссылок находится в файле /src/less/components/variables.less:

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

Нашли значение, а теперь перезаписываем его в своей теме по адресу /custom/my-theme.less:

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

В процессе компиляции будет создан файл, использующий ваше новое значение. Изменяя глобальные переменные, следует понимать, что они могут использоваться где-то еще. Например, переопределив цвет ссылок глобально, мы увидим новые значения во всех компонентах, использующих ссылки.

Использование хуков

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

Найдите правило, которое вы хотите дополнить, например, ознакомьтесь с Less файлом какого-либо компонента, например /src/less/components/card.less изменим стили компонента Card:

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

    // разрешаем добавление новых свойств
    .hook-card;
}

Теперь перейдите в свою тему по адресу /custom/my-theme.less и добавьте новые стили:

// добавляем новый стиль
.hook-card() { color: #000; }

Расширенные хуки

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

// Дополнительная примесь
.hook-card-misc() {

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

Выключить компонент Inverse

Компонент Inverse добавляет стили для инверсии стилей. Если вы не планируете использовать инверсию стилей в своем проекте, просто отключите ее в Less. Для отключение найдите переменную 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. Такой подход имеет место быть лишь в случае небольших изменений. Если стилей много, рекомендуем использовать этот файл в качестве точки входа (entry) для компилятора Less. Создайте отдельные файлы и папки для каждого компонента и переопределите стили там. Если у вас нет опыта проектирования архитектуры, используйте в качестве примера структуру проекта UIkit здесь /src/less/uikit.theme.less.

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

custom/

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

    <!-- директория для хранения файлов Less -->
    my-theme/

        <!-- Файл импорта всех компонентов директории -->
        _import.less

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

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

// Ядро фреймворка
@import "../../src/less/uikit.less";

// Тема
@import "my-theme/_import.less";

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

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

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