将Zurb Foundation v5升级到v6.2所需的工作

Question

将Zurb Foundation v5升级到v6.2所需的工作

tom*_*rer 9 zurb-foundation-5 zurb-foundation-6

将Foundation 5升级到6.2需要做多少工作？

我们的开发商店正在接管现有F5项目的开发.看起来前端布局已完成80%,尽管我们可能会转换到JSX,但很少会被触及.如果F6.2值得额外麻烦,我需要帮助称重,因为客户是预算有限的. Zurb的F6公告仅列出了一些优先级较低的优势(A11y,类别较少).Flexbox可能会有所帮助,由于UnCSS,小型基础CSS不太受关注.

我曾经使用F6.2一次,但是想听听从F5升级到F6.x的人们需要的时间和时间.仍然没有F5到F6升级指南,缺少发行说明.

Answer 1

ITZ*_*ZAP 9

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

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

bower_components
node_modules
SCSS
CSS

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

基础新建
你今天在建什么？=一个网站(网站基金会)
项目名称是什么= whatever_projectname
您想使用哪个模板？=基本模板:包括Sass编译器

cd whatever_projectname

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

更新css\app.css
npm start
OR
foundation观看
CTRL + C结束

下载了新的v6文件集后,在"scss"文件夹中,您需要自定义项目SCSS文件并重新生成CSS.

打开_settings.scss并根据需要修改条目,基本上与之前的v5相匹配.特别是字体系列,标题,字体大小,颜色,行高等.所有$ variable-names都不同,但你会很快得到它的要点.
打开app.scss并选择你要导入的@includes,只需要你真正需要的那些,以便最小化最终的CSS文件大小.
完成所有@includes之后,您将复制/粘贴以前的Foundation 5网站项目中的所有自定义SCSS样式代码.
现在为真正的工作.您必须将所有版本5 MIXIN和MEDIA QUERY代码转换为新版本6格式.首先阅读Foundation 6 Media Query页面.
您的网站软件肯定会有"查找"和"替换"功能,这是这项工作的最佳选择.以下是一些示例:

OLD Foundation 5 scss代码与
NEW Foundation 6格式相比较.

@media#{$ small-up}
@include breakpoint(small)

@media#{$ large-up}
@include breakpoint(large)

@media#{$ portrait}
@include breakpoint(portrait)

@include grid-column($列: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;
命令行提示"基础监视"会在每个scss文件保存时生成最终的app.css文件.如果您的scss中有错误,GULP会显示发生错误的行号.读取,进行必要的更正并再次保存,直到生成app.css而没有错误.
查看您的Foundation 6网站测试页面,继续调整CSS,当对外观满意时,您将准备好将新的Foundation 6模板应用于网站上的每个页面.

基础5 ==>基础6转换完成.

您进行的转化次数越多,转化的速度就越快.

Answer 2

小智 5

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

1. ////////////// JS: 在文件系统上,将hs/php脚本底部引用的js脚本替换为新版本,可在\ bower_components \基金会网站\ DIST.例如,将\ bower_components\foundation-sites\dist\abc.js复制到yourProject/js/abc.js.

2. ////////////// SCSS VARIABLES: 在文件(_settings.scss),(_ custom_styles.scss)等中:

REPLACE $paragraph-font-sizeWITH$global-font-size
REPLACE $callout-bgWITH$callout-background
....并替换任何其他变量,这些变量无法从scss编译到css

3. ////////////// PANELS&ALERT BOXES: 在php/html中:用类标注替换类(面板)和(警报).对我来说,以下是我在编辑器的替换对话框中使用的字符串(使用正则表达式).根据您的设计和编码风格,您可能需要不同的字符串.

替换:<div data-alert class='alert-box **success** round'> WITH:<div class='**success** callout' data-closable='slide-out-right'>
替换:<div data-alert class='alert-box **alert** round'> WITH:<div class='**alert** callout' data-closable='slide-out-right'>
替换:<a href='#' class='close'>×</a> WITH:<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 WITH:<div class='table-scroll'><table
替换:</table> WITH:</table></div>

7. ////////////// ABIDE:

替换:</label>(.*)\r\n(.*)<small class=['|"]error['|"]>(.*)</small> WITH:<span class="form-error">$3</span>\r\n$2</label>
替换:<form (.*) data-abide(.*)> WITH:<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/
   // },
  // }
// });

Run Code Online (Sandbox Code Playgroud)

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

祝好运....**

归档时间：	9 年，9 月前
查看次数：	3203 次
最近记录：	9 年，4 月前