【问题标题】:Work needed to upgrade Zurb Foundation v5 to v6.2将 Zurb Foundation v5 升级到 v6.2 所需的工作
【发布时间】:2016-08-02 04:46:52
【问题描述】:

将 Foundation 5 升级到 6.2 需要哪些工作以及需要做多少工作?

我们的开发人员正在接管现有 F5 项目的开发工作。似乎前端布局已完成 80%,尽管我们可能会过渡到 JSX,但几乎没有任何改动。我需要帮助来衡量 F6.2 是否值得额外的麻烦,因为客户预算有限。 Zurb's F6 announcement 仅列出了一些较低优先级的优势(A11y,更少的类)。 Flexbox 可能会有所帮助,感谢UnCSS,小型 Foundation CSS 不再受关注。

我曾经使用过 F6.2,但想听听那些将真实网站从 F5 升级到 F6.x 的人的意见,但需要时间和陷阱。仍然没有F5 to F6 upgrade guide,&release notes are lacking

【问题讨论】:

  • 我对 Foundation 6 做的不多,但据我所知,这些变化主要与插件的初始化方式有关。样式几乎相同(除了已在 F6 中删除的按钮组 - 其他内容可能会丢失)。这就是我对差异的了解程度。我还没有真正升级,所以你可能需要解决更多的怪癖。

标签: zurb-foundation-5 zurb-foundation-6


【解决方案1】:

从 Foundation 5 升级到最新的 Foundation 6 涉及从新网站模板重建完整的网站,因为大部分 HTML 代码有点不同。不,这并不困难,但是是的,在进行过渡方面有相当多的工作。然而,许多改进是值得的。

您需要在新文件夹中启动一个新网站项目,以获取所有更新的文件集,这些文件集包含在这些文件夹中...

  • bower_components
  • node_modules
  • scss
  • CSS

有多种方法可以安装 Foundation for Sites 6,我的首选是使用命令提示符的 npm 节点包管理器,如下所示:

基础新
你今天在建什么? = 网站(网站基础)
项目叫什么=what_projectname
您想使用哪个模板? = 基本模板:包括一个 Sass 编译器

cdwhatever_projectname

使用 GULP 构建 css\app.css
基础建设

更新 css\app.css
npm 开始

基础手表
CTRL+C 结束

一旦你下载了一组新的 v6 文件,然后在“scss”文件夹中你需要customize the project SCSS files and regenerate the CSS

  1. 打开 _settings.scss 并根据需要修改条目,基本上与之前 v5 中的内容相匹配。尤其是 font-family、headings、font-size、colors、line-height 等。所有的 $variable-names 都是不同的,但你很快就会明白它的要点。
  2. 打开 app.scss 并选择您要导入的 @include 内容,只选择您真正需要的内容,以最小化最终的 CSS 文件大小。
  3. 在所有 @include 之后,从之前的 Foundation 5 网站项目中复制/粘贴所有自定义 SCSS 样式代码
  4. 现在开始真正的工作。您必须将所有版本 5 MIXINMEDIA QUERY 代码转换为新的版本 6 格式。从reading the Foundation 6 Media Query page here 开始。
    您的网站软件肯定会有“查找”和“替换”功能,这是完成这项工作的最佳选择。以下是一些示例:

    OLD Foundation 5 scss 代码与
    NEW Foundation 6 格式的比较。

    @media #{$small-up}
    @include 断点(小)

    @media #{$large-up}
    @include 断点(大)

    @media #{$portrait}
    @include 断点(纵向)

    @include 网格列($columns:12);
    @include 网格列(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:solid);字体大小:0.85rem;

  5. 命令行提示“foundation watch”会在每次保存 scss 文件时生成最终的 app.css 文件。如果您的 scss 中有 错误,GULP 会显示发生该错误的行号。阅读,进行必要的更正并再次保存,直到 app.css 生成且没有错误。
  6. 查看您的 Foundation 6 网站测试页面,继续调整 CSS,如果对外观感到满意,您就可以将新的 Foundation 6 模板应用到网站上的每个页面。

Foundation 5 ==> Foundation 6 转换完成

您进行的转换越多,它就会变得越快、越容易。

【讨论】:

  • 谢谢;将有助于我的工作估算,并且您的工作流程非常好。顺便说一句,我以前使用过 F6.2,并且有以下提示: * UnCSS 对于减小 CSS 文件大小至关重要。也免去了手动@include每个模块的烦恼。 (依赖 PhantomJS 很难在 Docker 中安装,否则很容易添加到 gulp 工作流中。) * @include foundation-everything(true) for flexbox
  • 从模板开始是一种糟糕的做法。 (这基本上是类固醇上的复制粘贴。)您提供的其他信息——关于实际变化——听起来确实很有用。
  • @aij 启动 npm "foundation new" 和 "你今天在建什么?= 一个网站 (Foundation for Sites)" 只是为了将所有最新版本的 Foundation 文件下载到新项目文件夹中。我使用我更喜欢的 Adob​​e Dreamweaver 和 Sublime Text 3 构建的实际网站模板。每个网站都是自定义设计,而不是复制/粘贴。
【解决方案2】:

我认为它比这更复杂(问题中解释了什么)。以下是我必须将其应用于(相对简单的项目)的更改。所涉及的工作量使我在升级其他更大的项目之前三思而后行。但是,我认为以下内容可能对可能正在考虑升级其网站的其他人有用。

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 中:用类标注替换类(面板)和(警报)。对我来说,以下是我在编辑器替换对话框中使用的字符串(使用正则表达式)。根据您的设计和编码风格,您可能需要不同的字符串。

  • 替换:<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> WITH :<span class="form-error">$3</span>\r\n$2</label>

  • 替换:<form (.*) data-abide(.*)> 与:<form $1 data-abide novalidate $2>

- 自定义模式: - 使用以下 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/
   // },
  // }
// });

**这绝不是所有必需更改的完整列表。如果是这样,基金会团队早就发布了它。但是,它是一个起点,可能会让您了解所涉及的内容。

祝你好运....**

【讨论】:

    【解决方案3】:

    还发现 abide 希望在初始化 Foundation 6 之前定义自定义验证器 例如。我有一个首先调用的电话号码验证器

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-11-17
      • 2014-01-14
      • 1970-01-01
      • 2018-05-04
      • 2021-08-14
      相关资源
      最近更新 更多