将 Zurb Foundation v5 升级到 v6.2 所需的工作
Work needed to upgrade Zurb Foundation v5 to v6.2
将 Foundation 5 升级到 6.2 需要做哪些工作？
我们的开发车间正在接管现有 F5 项目的开发。看起来前端布局已经完成了 80%，尽管我们可能会过渡到 JSX，几乎没有什么会保持不变。我需要帮助权衡 F6.2 是否值得额外的麻烦，因为客户的预算有限。 Zurb's F6 announcement lists only a few lower priority advantages (A11y, fewer classes). Flexbox might be helpful, small Foundation CSS is less of a concern thanks to UnCSS.
我用过一次 F6.2，但想听听将真实网站从 F5 升级到 F6.x 的人的意见，但需要一些时间和技巧。还是没有F5 to F6 upgrade guide, & release notes are lacking.
从 Foundation 5 升级到最新的 Foundation 6 涉及从新网站模板重建整个网站，因为大部分 HTML 代码有点不同。不，这并不困难，但是，是的，要完成过渡需要做大量的工作。然而，众多的改进是值得的。
您需要在新文件夹中启动一个新的网站项目以获取所有更新的文件集，这些文件集包含在这些文件夹中...
- bower_components
- node_modules
- scss
- css
有多种方法可以为 Sites 6 安装 Foundation，我的首选是使用命令提示符的 npm 节点包管理器，如下所示：
基础新
你今天要建造什么？ = 一个网站（站点的基础）
项目叫什么=whatever_projectname
您想使用哪个模板？ = 基本模板：包括一个 Sass 编译器
cd whatever_projectname
使用 GULP
构建 css\app.css
基础构建
待更新 css\app.css
npm 开始
或者
基础手表
CTRL+C 结束
下载新的 v6 文件集后，您需要在 'scss' 文件夹中 customize the project SCSS files and regenerate the CSS。
- 打开 _settings.scss 并根据需要修改条目，基本上与之前 v5 中的内容相匹配。尤其是 font-family、headings、font-size、colors、line-height 等。所有的 $variable-names 都不一样，但你很快就会明白其中的要点。
- 打开 app.scss 并选择您要导入的 @includes，只需要那些您真正需要的，以最小化最终 CSS 文件大小。
- 在你所有的@includes 之后，然后 你 copy/paste 在你以前的 Foundation 5 网站项目中的所有自定义 SCSS 样式代码中 .
- 现在开始真正的工作。您必须将所有版本 5 MIXIN 和 MEDIA QUERY 代码转换为新的版本 6 格式。从 reading the Foundation 6 Media Query page here.
开始，您的网站软件肯定会具有 'Find' 和 'Replace' 功能，这是这项工作的最佳选择。以下是一些示例：
OLD Foundation 5 scss 代码与
NEW 相比基础 6 格式。
@media #{$small-up}
@include 断点(小)
@media #{$large-up}
@include 断点(大)
@media #{$肖像}
@include 断点（纵向）
@include grid-column($columns:12);
@include grid-column(12);
@include flex-video-container();
@include flex-video($flexvideo-ratio-widescreen);
@include 按钮($background:$primary-color);
@include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid);字体大小：0.85rem;
- 命令行提示符 'foundation watch' 在每个 scss 文件保存时生成最终的 app.css 文件。如果您的 scss 中有 error，GULP 会显示发生该错误的行号。阅读，进行必要的更正并再次保存，直到 app.css 生成无误。
- 查看您的 Foundation 6 网站测试页面，继续调整 CSS，当外观满意时，您就可以将新的 Foundation 6 模板应用于网站上的每个页面。
Foundation 5 ==> Foundation 6 转换完成.
您进行的转化越多，它就会变得越快越容易。
我认为它比这个复杂得多（问题中解释了什么）。以下是我必须应用于一个（相对简单的项目）的更改。所涉及的工作量让我在升级其他更大的项目之前三思而后行。但是，我认为以下内容可能对可能正在考虑升级其网站的其他人有用。
1. ///////////// JS:
在文件系统上，将 html/php 脚本底部引用的 js 脚本替换为 \bower_components\foundation-sites\dist 中提供的新版本。
例如，将 \bower_components\foundation-sites\dist\abc.js 复制到 yourProject/js/abc.js。
2。 ///////////// SCSS 变量：
在文件 (_settings.scss)、(_custom_styles.scss) 等中：
用$global-font-size
$paragraph-font-size
将 $callout-bg 替换为 $callout-background
- ... 并替换任何其他变量，这些变量从 scss 到 css
的编译失败
3。 ///////////// 面板和警告框：
在 php/html 中：将 classes（面板）和（警报）替换为 class 标注。对我来说，以下是我在编辑器的替换对话框中使用的字符串（使用正则表达式）。根据您的设计和编码风格，您可能需要不同的字符串。
替换：<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'>×</a>
与 :<button class='close-button' aria-label='Dismiss alert' type='button' data-close> <span aria-hidden='true'>×</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"></span>\r\n</label>
替换：<form (.*) data-abide(.*)>
与 :<form data-abide novalidate >
- 自定义模式：
- 使用以下两行，而不是注释行：
// 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 之前定义自定义验证器
例如。我有一个 phone 号码验证器，它被称为 first
// Set Custom validator for Description fields to not accept phone numbers
noPhone();
$(document).foundation();
将 Foundation 5 升级到 6.2 需要做哪些工作？
我们的开发车间正在接管现有 F5 项目的开发。看起来前端布局已经完成了 80%，尽管我们可能会过渡到 JSX，几乎没有什么会保持不变。我需要帮助权衡 F6.2 是否值得额外的麻烦，因为客户的预算有限。 Zurb's F6 announcement lists only a few lower priority advantages (A11y, fewer classes). Flexbox might be helpful, small Foundation CSS is less of a concern thanks to UnCSS.
我用过一次 F6.2，但想听听将真实网站从 F5 升级到 F6.x 的人的意见，但需要一些时间和技巧。还是没有F5 to F6 upgrade guide, & release notes are lacking.
从 Foundation 5 升级到最新的 Foundation 6 涉及从新网站模板重建整个网站，因为大部分 HTML 代码有点不同。不，这并不困难，但是，是的，要完成过渡需要做大量的工作。然而，众多的改进是值得的。
您需要在新文件夹中启动一个新的网站项目以获取所有更新的文件集，这些文件集包含在这些文件夹中...
- bower_components
- node_modules
- scss
- css
有多种方法可以为 Sites 6 安装 Foundation，我的首选是使用命令提示符的 npm 节点包管理器，如下所示：
基础新
你今天要建造什么？ = 一个网站（站点的基础）
项目叫什么=whatever_projectname
您想使用哪个模板？ = 基本模板：包括一个 Sass 编译器
cd whatever_projectname
使用 GULP
构建 css\app.css
基础构建
待更新 css\app.css
npm 开始
或者
基础手表
CTRL+C 结束
下载新的 v6 文件集后，您需要在 'scss' 文件夹中 customize the project SCSS files and regenerate the CSS。
- 打开 _settings.scss 并根据需要修改条目，基本上与之前 v5 中的内容相匹配。尤其是 font-family、headings、font-size、colors、line-height 等。所有的 $variable-names 都不一样，但你很快就会明白其中的要点。
- 打开 app.scss 并选择您要导入的 @includes，只需要那些您真正需要的，以最小化最终 CSS 文件大小。
- 在你所有的@includes 之后，然后 你 copy/paste 在你以前的 Foundation 5 网站项目中的所有自定义 SCSS 样式代码中 .
- 现在开始真正的工作。您必须将所有版本 5 MIXIN 和 MEDIA QUERY 代码转换为新的版本 6 格式。从 reading the Foundation 6 Media Query page here.
开始，您的网站软件肯定会具有 'Find' 和 'Replace' 功能，这是这项工作的最佳选择。以下是一些示例：
OLD Foundation 5 scss 代码与
NEW 相比基础 6 格式。
@media #{$small-up}
@include 断点(小)
@media #{$large-up}
@include 断点(大)
@media #{$肖像}
@include 断点（纵向）
@include grid-column($columns:12);
@include grid-column(12);
@include flex-video-container();
@include flex-video($flexvideo-ratio-widescreen);
@include 按钮($background:$primary-color);
@include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid);字体大小：0.85rem; - 命令行提示符 'foundation watch' 在每个 scss 文件保存时生成最终的 app.css 文件。如果您的 scss 中有 error，GULP 会显示发生该错误的行号。阅读，进行必要的更正并再次保存，直到 app.css 生成无误。
- 查看您的 Foundation 6 网站测试页面，继续调整 CSS，当外观满意时，您就可以将新的 Foundation 6 模板应用于网站上的每个页面。
Foundation 5 ==> Foundation 6 转换完成.
您进行的转化越多，它就会变得越快越容易。
我认为它比这个复杂得多（问题中解释了什么）。以下是我必须应用于一个（相对简单的项目）的更改。所涉及的工作量让我在升级其他更大的项目之前三思而后行。但是，我认为以下内容可能对可能正在考虑升级其网站的其他人有用。
1. ///////////// JS: 在文件系统上，将 html/php 脚本底部引用的 js 脚本替换为 \bower_components\foundation-sites\dist 中提供的新版本。 例如，将 \bower_components\foundation-sites\dist\abc.js 复制到 yourProject/js/abc.js。
2。 ///////////// SCSS 变量： 在文件 (_settings.scss)、(_custom_styles.scss) 等中：
用
$global-font-size替换将
$callout-bg替换为$callout-background- ... 并替换任何其他变量，这些变量从 scss 到 css 的编译失败
$paragraph-font-size
3。 ///////////// 面板和警告框： 在 php/html 中：将 classes（面板）和（警报）替换为 class 标注。对我来说，以下是我在编辑器的替换对话框中使用的字符串（使用正则表达式）。根据您的设计和编码风格，您可能需要不同的字符串。
替换：
<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'>×</a>与 :<button class='close-button' aria-label='Dismiss alert' type='button' data-close> <span aria-hidden='true'>×</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"></span>\r\n</label>替换：
<form (.*) data-abide(.*)>与 :<form data-abide novalidate >
- 自定义模式： - 使用以下两行，而不是注释行：
// 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 之前定义自定义验证器 例如。我有一个 phone 号码验证器，它被称为 first
// Set Custom validator for Description fields to not accept phone numbers
noPhone();
$(document).foundation();