Создать тему

Удлинить UIkit и добавить свои собственные уникальные темы.

Как начать

По умолчанию, UIkit поставляется с очень простой темы. Чтобы изменить стиль, вам не придется редактировать ядро фраймворк файлов. Вместо этого, вы можете продлить UIkit, создав собственную тему. Это позволяет Вам легко обновить UIkit Основные файлы. Мы даже предоставить некоторые интересные темы, чтобы вы начали. Чтобы создать свою собственную тему, выполните следующие действия:

1. Создать тематический каталог

Загрузить или скопировать UIkit и установите узел и Gulp. Наконец, создайте в папке темы здесь /custom/THEME-NAME. Если /custom каталог не существует, создайте ее сначала.

Примечание На /custom директория для git ignore, которая предотвращает пользовательские файлы втянуть в UIkit репозитория. Если вы работаете с клонированной версии UIkit'ы git-репозиторий, это хорошая практика, чтобы иметь /custom Как свой собственный репозиторий git. Таким образом ваши файлы темы находятся под управлением версиями, не мешая UIkit файлов.

2. Добавить вашу тему

Создать uikit.less файл /custom/THEME-NAME папку и добавьте @import "../../src/less/uikit.less"; правило для доступа ко всем Less файлы от ядра фраймворк и утвердить ее основной стиль. Вот оно что! Вы можете начать добавлять свои собственные темы с нуля.

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

3. Настройщик и тесты

Запустить залпом задача indexthemes В UIkit папку. Теперь вновь созданные темы будут автоматически доступны для работы в настройщик и тестовые файлы.

4. Построить вашу тему

Вы можете создавать свои темы CSS изнутри customizer. Если вы хотите использовать залпом задачу вместо этого, запустите gulp dist -t THEME-NAME. Сгенерированные файлы будут расположены в dist/ папку.

Лучших практик тематизации

Существуют различные подходы к стилю вашей теме. Мы рекомендуем следующий рабочий процесс.

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

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

Пример

// default value
@button-height: 30px;

// new value
@button-height: 35px;

2. Используйте подключения

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

Пример

// CSS rule
.uk-panel {
    background: @background;

    // mixin to add new declaration
    .hook-panel;
}

// mixin to add new declaration
.hook-panel() { color: #fff; }

3. Разное подключения

Должно там быть ни переменной, ни подключение свободные, вы, конечно, можете создать свой собственный селектор. Чтобы сделать это, используйте .hook-panel-misc подключение и напишите свое селектор внутри. Это упорядочит ваш новый селектор в нужное место составляемых CSS файла.

Пример

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

    // new rule
    .uk-panel a { color: #f00; }
}