选择CSS网格/框架

Question

有许多网格和框架可供选择。谷歌搜索CSS框架将返回十几篇文章，这些文章本身列出了许多可供选择的框架。

当谈到选择一个时，如果没有对所有这些知识的熟悉，很容易迷失。

选择CSS框架的主要因素是什么？这些选择将如何映射到某些框架？

更一般地说，如何选择CSS框架？

注1：我在这里几乎可以互换使用“网格”和“框架”，但可能有一个我应该使用另一个。对此的更正是受欢迎的。

注意2：我很清楚，一些选择取决于品味，因此，这个问题可能变成“最好的”比赛/主观话题。我试图尽可能地保证它是可以回答的，因为我很确定很多人有这个问题/选择框架的问题和答案，这将有益于社区。因此，欢迎改进这个问题，而不仅仅是关闭它。

Answer 1

选择框架时，请考虑以下问题：

语言：有些框架是用SASS编写的。其他人写的很少。还有一些是用纯CSS编写的。选择一个用您最熟悉的语言编写的框架。

功能：某些框架只提供网格。其他人添加排版。还有一些人添加了一大堆自定义UI元素。选择一个与您想要的功能最佳对应的框架。您不希望框架具有太少的功能或一个膨胀的框架，并且包含许多您从未打算使用的功能。

模块化：您不希望使用自己的自定义代码覆盖50％的框架输出。如果您选择的框架具有比您需要的功能更多的功能，请确保它的模块化足以轻松摆脱大部分代码膨胀。

响应能力：如果您希望自己的网页具有响应能力，请选择自适应网格。

跨浏览器支持：如果您的项目需要支持旧浏览器，请确保选择支持您需要支持的所有浏览器的框架。

我构建了自己的框架Cascade Framework，因为没有一个框架以我希望的方式回答这些问题。请随意查看。

Answer 2

首先要做的是您的网络项目的要求和目标。

<强> 1。您是否仅定位移动受众群体？

如果你想要一个Web应用程序，你需要的不仅仅是一个CSS框架，一个通过Javascript将特定目标设备UI的外观和功能元素结合在一起的移动框架。下一个决定将是框架是否更好地支持较小的智能手机屏幕，平板电脑屏幕或两者兼而有之。

如果您不需要功能更强大的Web-App方法，那么可以采用响应式框架。您将不得不专注于如何在不同的屏幕分辨率上排列和排序某些页面元素，以及在较小的分辨率上可以关闭哪些页面元素。 （这有时会引发政治辩论，利益相关者围绕什么（更重要）和什么不重要进行辩论。

<强> 2。您是否定位移动和桌面受众？

您需要一个支持reponsive或流畅布局的框架，以便为您的受众客户提供最大支持。如果您必须生成的图形设计更加静态，则响应路径更适合，因为它允许在断点内的不同阶段更容易地进行规划。大多数设计师目前遵循灵活的方法，轻量级，优雅，表现，不那么门户，也允许流体实现（允许某些或所有页面元素根据客户端/浏览器视口拉伸或增长）。

第3。你只定位传统观众吗？

然后只需选择您认为允许最简单实施的框架。设计师是否使用了网格？那么也许CSS框架适合它。一些CSS框架为Gimp，Photoshop，Illustrator等提供了各种各样的设计模板，因此设计可以基于前期模板，以实现最佳实现。

另外两个注意事项：

：一种。没有图形设计

如果你没有明确的设计模板，我会选择一个框架，允许轻松集成排版，提供大量示例，用例，预定义页面元素或组件（按钮，导航，拇指......）。

<强> B中。时间限制

没时间？某些框架带有自己的或第三方自定义脚本或向导。选择您需要的元素或组件，打开或关闭某些JS库，重置样式表，以及下载最终包。就是这样。

有些框架非常成熟且经过充分测试，因此缺乏充满活力的社区可能并不能说明这一点。根据你的技能，可能没有必要提供很多支持（甚至是一个不好的标志：网格/框架应该很简单并且不要让你的方式。可能出现的问题应该是那些相当常见的CSS问题。即使没有底层框架的细节也可以回答。

两个示例来说明两种方法（更多网格＆lt; - ＆gt;响应更快）：

http://960.gs/

绝对看一看。按照“查看幻灯片”链接阅读不错的背景信息。真正的网格系统。它还链接到支持流体和弹性外观的衍生物。

http://twitter.github.com/bootstrap/

现代，好的炒作。很多组件。定制。响应。

Web的应用程序：

http://jquerymobile.com/和http://www.sencha.com/products/touch

Answer 3

大多数网格都是95％相同：它们定义列的宽度+包括一个clearfix。

如果您愿意，甚至可以制作自己的网格。因此，如果我们了解大多数网格基本相同，哪一个最适合使用？

1）仅通过下载网格来自定义Twitter Bootstrap。这是一个很好的选择，因为大多数人都熟悉“span1，span2，span3”惯例。此外，它可用作固定宽度和流体（即响应）。

2）960.gs可能是最常用的固定宽度网格。 Unsemantic是960的响应成功者。两者都是由Nathan Smith开发的。

Answer 4

你可以立即提出的一个问题是：

我希望框架能够响应吗？

问题的答案将从您的列表中删除许多选项。

我问的另一个主要问题是项目背后是什么样的社区支持。根据我的经验，投入某个特定项目是一种痛苦，而不是让它死亡并得不到任何支持。拥有关键支持者和大量追随者的东西真是太好了。

Answer 5

考虑到来自Twitter的UI设计师制作Bootstrap，我不会仅仅称它为围绕该框架的炒作。它是优秀的代码和最完整的框架。 960.gs是一个网格系统，其中boostrap称为脚手架。 Bootstrap也是智能手机友好的。所以有人必须将jquerymobile，jquery，960.gs以及他们需要的所有插件混合在一起。 Bootsrap已经捆绑了大量的东西，可以帮助您入门并适用于所有浏览器和手机/桌子。