Question

什么＆amp;将Foundation 5升级到6.2需要多少工作？

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

我曾经使用过F6.2一次，但是希望听到那些将实际网站从F5升级到F6.x的人们的问题。需要时间。仍然没有F5 to F6 upgrade guide，＆amp; release notes are lacking

Answer 1

从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
基础手表
CTRL + C结束

一旦下载了新的v6文件集，然后在＆＃39; scss＆＃39;您需要customize the project SCSS files and regenerate the CSS的文件夹。

打开 _settings.scss 并根据需要修改条目，基本上与之前的v5相匹配。特别是字体系列，标题，字体大小，颜色，行高等。所有$ variable-names都不同，但你会很快得到它的要点。
打开 app.scss 并选择要导入的@includes，只需选择您真正需要的内容，以便最终减少最终的CSS文件大小。
完成所有@includes后，复制/粘贴之前的Foundation 5网站项目中的所有自定义SCSS样式代码。
现在是真正的工作。您必须将所有版本5 MIXIN 和 MEDIA QUERY 代码转换为新版本6格式。从reading the Foundation 6 Media Query page here开始。
您的网站软件肯定会有一个＆＃39;查找＆＃39;和＆＃39;替换＆＃39;功能，这是这项工作的最佳镜头。以下是一些示例：
OLD Foundation 5 scss代码与 NEW Foundation 6 格式相比。
<登记/> @media＃{$ small-up}
@include断点（小）

@media＃{$ large-up}
@include断点（大）

@media＃{$ portrait}
@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按钮（$ expand：false，$ background：$ primary-color，$ background-hover：auto，$ color：auto，$ style：solid）; font-size：0.85rem;
命令行提示＆＃39;基础观察＆＃39;在每个scss文件保存时生成最终的 app.css 文件。如果您的scss中存在错误，GULP会显示发生错误的行号。阅读，进行必要的更正并再次保存，直到 app.css 生成且没有错误。
查看您的Foundation 6网站测试页，继续调整CSS，如果对外观满意，您就可以将新的Foundation 6模板应用到网站的每个页面。

基金会5 ==＆gt;基础6转换完成。

您进行的转化次数越多，转化的速度就越快。

Answer 2

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

<强> 1。 ////////////// JS：在文件系统上，将hs / php脚本底部引用的js脚本替换为新版本，这些脚本位于\ bower_components \ foundation-sites \ dist。例如，将\ bower_components \ foundation-sites \ dist \ abc.js复制到yourProject / js / abc.js。

<强> 2。 ////////////// SCSS VARIABLES：在文件（_settings.scss），（_ custom_styles.scss）等中：

使用$paragraph-font-size

$global-font-size

使用$callout-bg

$callout-background

....并替换任何其他变量，这些变量无法从scss编译为css

第3。 ////////////// PANELS＆amp;警告框： 在php / html中：REPLACE类（面板）＆amp; （警告）带有类标注。对我来说，以下是我在编辑器的替换对话框中使用的字符串（使用正则表达式）。根据您的设计和编码风格，您可能需要不同的字符串。

更换：<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' WITH：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/
   // },
  // }
// });

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

祝你好运.... **

Answer 3

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

import java.awt.Dimension;
import java.awt.EventQueue;
import java.util.Random;
import javax.swing.JFrame;
import org.jfree.chart.*;
import org.jfree.chart.plot.PlotOrientation;
import org.jfree.chart.plot.XYPlot;
import org.jfree.chart.renderer.xy.XYLineAndShapeRenderer;
import org.jfree.data.statistics.Regression;
import org.jfree.data.xy.XYDataset;
import org.jfree.data.xy.XYSeries;
import org.jfree.data.xy.XYSeriesCollection;

/**
 * @see https://stackoverflow.com/a/37716411/230513
 * @see http://stackoverflow.com/a/37716411/230513
 */
public class RegressionTest {

    private static final int N = 16;
    private static final Random R = new Random();

    private static XYDataset createDataset() {
        XYSeries series = new XYSeries("Data");
        for (int i = 0; i < N; i++) {
            series.add(i, R.nextGaussian() + i);
        }
        XYSeriesCollection xyData = new XYSeriesCollection(series);
        double[] coefficients = Regression.getOLSRegression(xyData, 0);
        double b = coefficients[0]; // intercept
        double m = coefficients[1]; // slope
        XYSeries trend = new XYSeries("Trend");
        double x = series.getDataItem(0).getXValue();
        trend.add(x, m * x + b);
        x = series.getDataItem(series.getItemCount() - 1).getXValue();
        trend.add(x, m * x + b);
        xyData.addSeries(trend);
        return xyData;
    }

    private static JFreeChart createChart(final XYDataset dataset) {
        JFreeChart chart = ChartFactory.createScatterPlot("Test", "X", "Y",
            dataset, PlotOrientation.VERTICAL, true, false, false);
        XYPlot plot = chart.getXYPlot();
        XYLineAndShapeRenderer r = (XYLineAndShapeRenderer) plot.getRenderer();
        r.setSeriesLinesVisible(1, Boolean.TRUE);
        r.setSeriesShapesVisible(1, Boolean.FALSE);
        return chart;
    }

    public static void main(String[] args) {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                JFrame f = new JFrame();
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                XYDataset dataset = createDataset();
                JFreeChart chart = createChart(dataset);
                ChartPanel chartPanel = new ChartPanel(chart) {
                    @Override
                    public Dimension getPreferredSize() {
                        return new Dimension(640, 480);
                    }
                };
                f.add(chartPanel);
                f.pack();
                f.setLocationRelativeTo(null);
                f.setVisible(true);
            }
        });
    }
}

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

3 个答案: