Работа, необходимая для обновления Zurb Foundation v5 до v6.2

Обновление с Foundation 5 до последней версии Foundation 6 включает полную перестройку веб-сайта из нового шаблона веб-сайта, поскольку большая часть HTML-кода немного отличается. Нет, это не сложно, но да, при переходе требуется немало работы. Однако многочисленные улучшения того стоят.

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

• Bower_components
• node_modules
• scss
• css

Существуют различные способы установки Foundation for Sites 6, я предпочитаю менеджер пакетов npm node с помощью командной строки, например:

фундамент новый
Что вы строите сегодня? = Веб-сайт (Foundation for Sites)
Как называется проект = имя_проекта
Какой шаблон вы хотите использовать? = Базовый шаблон: включает компилятор Sass

cd имя_проекта

ДЛЯ СОЗДАНИЯ css\app.css с использованием GULP
фундаментальной сборки

ДЛЯ ОБНОВЛЕНИЯ css\app.css
npm start
ИЛИ
Foundation Watch
CTRL+C для завершения

После загрузки нового набора файлов v6 в папке scss вам необходимо настроить файлы SCSS проекта и повторно создать CSS.

1. Откройте _settings.scss и измените записи по своему усмотрению, в основном так, чтобы они соответствовали тому, что было в предыдущей версии 5. Особенно семейство шрифтов, заголовки, размер шрифта, цвета, высота строки и т. д. Все имена переменных $различны, но вы быстро поймете суть.
2. Откройте app.scss и выберите, какие @includes вы хотите импортировать, только те, которые вам действительно нужны, чтобы минимизировать окончательный размер файла CSS.
3. После всех ваших @includes вы копируете/вставляете весь пользовательский код стиля SCSS из своего предыдущего проекта веб-сайта Foundation 5.
4. Теперь о настоящей работе. Вы должны преобразовать весь код MIXIN и MEDIA QUERY Версии 5 в новый формат Версии 6. Начните с прочитав страницу Foundation 6 Media Query здесь.
   Программное обеспечение вашего веб-сайта наверняка будет иметь функцию «Найти» и «Заменить», что лучше всего подходит для этой работы. Вот несколько примеров:
   
   код scss СТАРОГО Foundation 5 в сравнении с
   НОВЫМ форматом Foundation 6.
   < br /> @media #{$small-up}
   @include breakpoint(small)
   
   @media #{$large-up}
   @include breakpoint(large)< br />
   @media #{$portrait}
   @include breakpoint(portrait)
   
   @include grid-column($columns:12);
   @include grid-column(12);
   
   @include flex-video-container();
   @include flex-video($flexvideo-ratio-widescreen);
   
   Кнопка @include($background:$primary-color);
   Кнопка @include($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style: твердый); размер шрифта: 0,85 бэр;
   
   
5. Подсказка командной строки 'foundation watch' создает окончательный файл app.css при каждом сохранении файла scss. Если в вашем scss есть ошибка, GULP отображает номер строки, в которой произошла эта ошибка. Прочтите, внесите необходимые исправления и сохраните снова, пока app.css не будет сгенерирован без ошибок.
6. Просмотрите тестовую страницу веб-сайта Foundation 6, продолжайте настраивать CSS, и, когда внешний вид вас устроит, вы будете готовы применить новый шаблон Foundation 6 к каждой странице веб-сайта.

Foundation 5 ==> Преобразование Foundation 6 завершено.

Чем больше конверсий вы делаете, тем быстрее и проще это становится.

Я думаю, что это гораздо сложнее, чем это (что объясняется в вопросе). Ниже приведены изменения, которые мне пришлось применить к (относительно простому проекту). Количество затраченных усилий заставило меня дважды подумать, прежде чем обновлять другие мои более крупные проекты. Тем не менее, я подумал, что следующее может быть полезно для других людей, которые могут подумать об обновлении своих веб-сайтов.

<сильный>1. ////////////// JS: В файловой системе замените сценарии js, указанные в нижней части сценариев html/php, новыми версиями, которые доступен по адресу \bower_components\foundation-sites\dist. Например, скопируйте \bower_components\foundation-sites\dist\abc.js в yourProject/js/abc.js.

<сильный>2. ////////////// ПЕРЕМЕННЫЕ SCSS: В файлах (_settings.scss), (_custom_styles.scss) и т. д.:

• ЗАМЕНИТЬ $paragraph-font-size НА $global-font-size

• ЗАМЕНИТЕ $callout-bg НА $callout-background

• .... и замените любые другие переменные, которые не справляются с компиляцией из scss в css

<сильный>3. ////////////// ПАНЕЛИ И ОКНА ПРЕДУПРЕЖДЕНИЙ: В php/html: ЗАМЕНИТЕ классы (панель) и (предупреждение) С помощью выноски класса. Для меня ниже приведены строки, которые я использовал в диалоге замены редактора (используя регулярные выражения). В зависимости от вашего дизайна и стиля кодирования вам, вероятно, потребуются разные строки.

• ЗАМЕНИТЬ :<div data-alert class='alert-box **success** round'> НА :<div class='**success** callout' data-closable='slide-out-right'>

• ЗАМЕНИТЬ :<div data-alert class='alert-box **alert** round'> НА :<div class='**alert** callout' data-closable='slide-out-right'>

• ЗАМЕНИТЬ :<a href='#' class='close'>&times;</a> НА :<button class='close-button' aria-label='Dismiss alert' type='button' data-close> <span aria-hidden='true'>&times;</span> </button>

• УДАЛИТЕ строку: <script src="./js/foundation.alert.js"></script>

• К тексту внутри каждого окна предупреждения ДОБАВЬТЕ <p> вокруг текстового сообщения: <p>...</p>

<сильный>4. ////////////// МЕНЮ: я думаю, что лучший способ работы с меню — это переписать его с нуля.

<сильный>5. ////////////// ТАБЛИЦЫ: ЗАМЕНИТЬ :class='table' НА :class='hover'

<сильный>6. ////////////// Сделать ТАБЛИЦЫ отзывчивыми (необязательно):

• ЗАМЕНИТЬ :<table НА :<div class='table-scroll'><table

• ЗАМЕНИТЬ :</table> НА :</table></div>

<сильный>7. ////////////// ПРЕБЫВАТЬ:

• ЗАМЕНИТЬ :</label>(.*)\r\n(.*)<small class=['|"]error['|"]>(.*)</small> НА :<span class="form-error">$3</span>\r\n$2</label>

• ЗАМЕНИТЬ :<form (.*) data-abide(.*)> НА :<form $1 data-abide novalidate $2>

– Пользовательские шаблоны: – используйте следующие две строки вместо строк с комментариями:

// Foundation 6 Style:
Foundation.Abide.defaults.patterns['dd_mm_yyyy'] = /((0[1-9]|[12][0-9]|3[01])[- \/.]0[1-9]|1[012])[- \/.]\d\d/; 
Foundation.Abide.defaults.patterns['short_time'] = /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9])/; 

// Foundation 5 Style:
// $(document).foundation({
 // abide : {
   // patterns : {
     // short_time: /(0[0-9]|1[0-9]|2[0-3])(:[0-5][0-9])/,
     // dd_mm_yyyy: /((0[1-9]|[12][0-9]|3[01])[- \/.]0[1-9]|1[012])[- \/.]\d\d/
   // },
  // }
// });

**Ни в коем случае, это не исчерпывающий список всех необходимых изменений. Если это так, команда Фонда давно бы опубликовала его. Тем не менее, это отправная точка, которая может дать вам представление о том, о чем идет речь.

Удачи....**

Также обнаружено, что abide хочет, чтобы пользовательские валидаторы были определены до инициализации Foundation 6, например. У меня есть валидатор номера телефона, который вызывается первым

// Set Custom validator for Description fields to not accept phone numbers
noPhone(); 
$(document).foundation();