Миграция

Мигрируйте существующий веб-сайт UIkit до последней версии. Что можно, а что необходимо переписать. Обратите внимание на новшества версии.


Миграция с UIkit 3.4 на 3.5

В UIkit 3.5 все Less-переменные и имена классов, которые ранее имели в своем имени xxlarge, были переименованы в 2xlarge. Просто найдите и замените эти переменные Less, если вы используете собственную тему Less. В компоненте Width есть только один класс, который необходимо обновить в вашей разметке.

Класс Заменить на
uk-width-xxlarge uk-width-2xlarge

Миграция с UIkit 3.2 на 3.3

В UIkit 3.3 добавлен новый класс uk-container-xlarge компоненту Контейнер. Новый класс по умолчанию имеет ширину равную 1600px. По этой причине контейнер uk-container-large изменил свою ширину с 1600px на 1400px. Обновите разметку, заменив следующие классы.

Класс Заменить на
uk-container-large uk-container-xlarge

Миграция с UIkit 3.1 на 3.2

Компонент Текст

Так как UIkit 3.2 добавляет новый класс uk-text-bolder в компонент Текст, класс uk-text-bold теперь применяет буквально bold вместо bolder. Переменная @text-bold-font-weight, которая являлась bolder, была удалена.


Миграция с UIkit 3.0 на 3.1

In UIkit 3.1 a Less variable @deprecated was added. By default, it is set to false, and deprecated classes are not compiled into the CSS.

If you want to update your markup later and use the deprecated classes along the new ones, set the variable to true in your custom UIkit theme.

@deprecated: true;

Компонент «Заголовок» : Heading

В UIkit 3.1 классы Primary и Hero в компоненте Заголовок устарели. Обновите разметку, заменив следующие классы.

Устаревшие Заменить на
uk-heading-primary uk-heading-medium
uk-heading-hero uk-heading-xlarge

Миграция с UIkit 2 на 3

Uikit 3 предлагает инструмент миграции, который запускается в вашем браузере и перечисляет все необходимые изменения для существующего сайта используемого Uikit 2. Для запуска инструмента доступны два варианта: через закладку браузера или с помощью файла JavaScript. Необходимые изменения миграции будут перечислены в консоли браузера.

Закладка браузера

Самый простой способ использовать инструмент миграции - через закладку в вашем браузере. Затем вы можете запустить скрипт на любой странице, к которой переходите, просто нажав на закладку. Перетащите ссылку расположенную ниже в раздел закладок вашего браузера.

Перетащите в панель закладок Миграция UIkit 3

Кроме того, вы можете вручную создать закладку со следующим кодом в качестве URL.

javascript: (function () {
    var script = document.createElement('script');
    script.setAttribute('src', 'https://getuikit.com/migrate.min.js');
    document.body.appendChild(script);
}());

Интеграция HTML

Вы также можете запустить инструмент миграции загрузив необходимый JavaScript-код на своём сайте. Таким образом, скрипт миграции всегда будет загружаться на сайте. Не забудьте удалить его после завершения миграции. Добавьте следующую ниже строку непосредственно перед закрывающим тегом </body>.

<script src="https://getuikit.com/migrate.min.js"></script>

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

Чтобы начать миграцию, замените файлы UIkit 2 на своем веб-сайте их эквивалентами UIkit 3 (как JS, так и CSS) и запустите инструмент миграции, используя одно из перечисленных выше решений. Чтобы узнать, как изменить разметку, откройте консоль разработчика вашего браузера. Вы увидите список предупреждений и уведомлений, в которых указано, что следует изменить. Вы можете нажать на стрелки рядом с любым сообщением, чтобы увидеть более подробную информацию о необходимых изменениях.

Console output

В каждом уведомлении или предупреждении указывается, что нужно изменить, в том числе список всех затронутых элементов HTML. Более сложные изменения объясняются примерами, которым легко следовать. Лучший способ - исправлять один компонент за другим. Таким образом, вы можете увидеть, исчезли ли сообщения об ошибках после перезагрузки, а также увидеть изменения на вашем сайте.

Warnings

Предупреждения выделяют все классы CSS или атрибуты JavaScript, которые больше не поддерживаются или изменились в UIkit 3. Эти предупреждения необходимо исправить, чтобы перенести ваш сайт на UIkit 3.

Notices

Уведомления выявляют потенциальные проблемы, которые не сломают ваш сайт. Некоторые уведомления могут не требовать изменений совсем. Это связано с тем, что некоторые имена из UIkit 2 существуют в UIkit 3, но в данное время принадлежат другому компоненту или имеют другую семантику. Это не может быть обнаружено селекторами, чтобы определить, является ли это правильной разметкой, поэтому вам нужно взглянуть и решить, изменили вы уже ее или все еще нужно исправлять.

Документация
Компоненты