定制Zurb Foundation 5 Grid,Gutter和Max width

时间:2014-04-17 06:05:48

标签: frameworks grid zurb-foundation

我只能找到一个或两个对我们可以添加到Foundation5的自定义版本的最大允许列的引用,这些声称该数字是16.但是我找不到这个的官方文档。

在Foundation 5下载自定义程序中,有“#of Columns”,“Gutter(em)”和“Max-Width(em)”的输入字段。 我已经测试了最多24列的值,CSS输出包含最多24列的类,所以我假设16列限制不再适用(或仅适用于旧版本的Foundation)。

所以我的问题是:

  1. 是否有人知道允许的最大列数是/或其他人是否成功使用了特定号码?

  2. 如果我自定义下载带有更多列的Foundation5,我怎么知道哪个装订线宽度和最大宽度值可以正常工作,或者我可以只使用任何东西(下载器不会给出任何不正确的值或超出范围值)?

  3. 进行自定义下载后,如果我想将CSS升级到更新的版本,我将如何最好地管理Foundation更新?

  4. PS:我没有使用SASS或其他预处理器工具。

2 个答案:

答案 0 :(得分:0)

我担心我能看到的唯一方法就是使用Sass。 如果您在网格文档页面上查看,则可以调整_setting.scss:

$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12 ;

Foundation Grid docs

当你说将CSS升级到未来的新版本时,你的意思是更新版本的Foundation吗?如果您进行了自定义版本下载,则可能需要再次执行此操作。如果您还在基金会之外的网站上进行其他样式更改,并且您不打算使用Sass,我认为您最好的选择是将它们保存在单独的样式表中。

听起来不像Sass福音传道者......使用它真的值得你花时间。让生活变得更加轻松!

答案 1 :(得分:0)

有一个CSS自定义程序,可让您最多选择100列http://foundation.zurb.com/develop/download.html

您也可以将Sass更改为任意数字。