将Zurb Foundation v5升级到v6.2所需的工作 [英] Work needed to upgrade Zurb Foundation v5 to v6.2

问题描述

什么&将Foundation 5升级到6.2需要多少工作?

What & how much work is required to upgrade Foundation 5 to 6.2?

我们的开发商店正在接管现有F5项目的开发.前端布局似乎完成了80％，尽管我们很可能过渡到JSX，几乎不会被改动.我需要权衡F6.2是否值得额外的麻烦，因为客户是预算有限的. Zurb的F6公告仅列出了一些优先级较低的优点(A11y，较少的类). Flexbox可能会有所帮助，由于 UnCSS .

Our dev shop is taking over development of an existing F5 project. Seems the front-end layout is 80% complete, though we'll likely transition into JSX to little will be untouched. I need help in weighing if F6.2 is worth the extra hassle, since the client is budget-limited. 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，但希望听到有人使用gotchas& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;#8481;&需要的时间.仍然没有 F5到F6升级指南，& 缺少发行说明.

I've used F6.2 once, but would like to hear from folks who upgraded real sites from F5 to F6.x with gotchas & time needed. There still is no F5 to F6 upgrade guide, & release notes are lacking.

推荐答案

从Foundation 5升级到最新的Foundation 6涉及从新网站模板进行完整的网站重建，因为许多HTML代码有些不同.不，这并不困难，但是，是的，在进行过渡方面有大量工作要做.但是，许多改进都是值得的.

Upgrading from Foundation 5 to latest Foundation 6 involves a full website rebuild from a new website Template, because much of the HTML code is a bit different. No it is not difficult, but yes, there is a fair amount of work in making the transition. However, the numerous improvements are worth it.

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

You need to start a new website project in a new folder to get all the updated file sets, which are contained in these folders ...

• bower_components
• node_modules
• scss
• css

有多种方法可以安装Foundation for Sites 6，我更喜欢使用命令提示符来安装npm节点程序包管理器，如下所示:

There are various ways to install Foundation for Sites 6, my preference being npm node package manager using the Command Prompt, like so :

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

foundation new
What are you building today? = A website (Foundation for Sites)
What's the project called = whatever_projectname
Which template would you like to use? = Basic Template: includes a Sass compiler

cd what_projectname

cd whatever_projectname

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

TO BUILD css\app.css using GULP
foundation build

要更新css \ app.css
npm start
或
基础手表
CTRL + C结束

TO UPDATE css\app.css
npm start
OR
foundation watch
CTRL+C to end

一旦下载了一组新的v6文件，则需要在'scss'文件夹中

Once you have the new set of v6 files downloaded, then in the 'scss' folder you need to customize the project SCSS files and regenerate the CSS.

1. 打开 _settings.scss 并根据需要修改条目，基本上与您先前的v5中的内容匹配.尤其是字体系列，标题，字体大小，颜色，行高等.所有$ variable-names都不相同，但是您很快就会了解其要点.
2. 打开 app.scss ，然后选择要导入的@includes，以及您真正需要的内容，以最大程度地减少最终CSS文件的大小.
3. 所有@include之后，然后复制/粘贴先前Foundation 5网站项目中的所有自定义SCSS样式代码.
4. 现在开始真正的工作.您必须将所有第5版 MIXIN 和 MEDIA QUERY 代码转换为新的第6版格式.首先在此处阅读Foundation 6 Media Query页面.
   您的网站软件肯定会具有查找"和替换"功能，这是完成此任务的最佳选择.以下是与
   NEW Foundation 6 格式相比的
   
   OLD Foundation 5 scss代码的一些示例. br/> @media#{$ small-up}
   @include断点(小)
   
   @media#{$ large-up}
   @include断点(大)
   
   @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:solid); font-size:0.85rem;
   
   
5. 命令行提示符基础监视"会在每次保存scss文件时生成最终的 app.css 文件.如果您的脚本中出现错误，则GULP会显示发生该错误的行号.阅读，进行必要的更正，然后再次保存，直到生成 app.css 为止.
6. 查看您的Foundation 6网站测试页，继续调整CSS，并在外观满意时准备将新的Foundation 6模板应用于网站上的每个页面.

1. Open _settings.scss and modify entries as desired, basically to match what you had in previous v5. Especially font-family, headings, font-size, colors, line-height, etc. All the $variable-names are different, but you will quickly get the gist of it.
2. Open app.scss and choose what @includes you want to import, just those you really do need so as to minimise final CSS filesize.
3. After all your @includes, then you copy/paste in all the custom SCSS style code from your previous Foundation 5 website project.
4. Now for the real work. You must convert all the Version 5 MIXIN and MEDIA QUERY code across to the new Version 6 format. Start by reading the Foundation 6 Media Query page here.
   Your website software will surely have a 'Find' and 'Replace' feature, which is the best shot for this job. Here are some examples of :
   
   OLD Foundation 5 scss code compared to the
   NEW Foundation 6 format.
   
   @media #{$small-up}
   @include breakpoint(small)
   
   @media #{$large-up}
   @include breakpoint(large)
   
   @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 button($background:$primary-color);
   @include button($expand:false, $background:$primary-color, $background-hover:auto, $color:auto, $style:solid); font-size: 0.85rem;
   
   
5. Command Line Prompt 'foundation watch' generates your final app.css file upon each scss file save. If there is an error in your scss, GULP displays the Line Number where that error occurred. Read up, make necessary corrections and save again until app.css is generated without error.
6. View your Foundation 6 website test page, continue to tweak the CSS and, when happy with appearance, you will be ready to apply your new Foundation 6 Template to every page on the website.

Foundation 5 ==> Foundation 6转换完成.

您进行的转化次数越多，转化就会变得越快，越容易.

The more conversions you do, the quicker and easier it becomes.

这篇关于将Zurb Foundation v5升级到v6.2所需的工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！