5

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

在选择一个时,如果对所有这些都没有深入了解,很容易迷失方向。

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

更一般地说,如何选择 CSS 框架?

注意 1:我在这里几乎可以互换使用“网格”和“框架”,但我可能应该使用其中一个。欢迎对此进行更正。

注 2:我很清楚某些选择将取决于品味,因此,这个问题可以变成“最佳”竞赛/主观主题。我试图让它尽可能地负责,因为我很确定很多人都有选择框架的问题/问题,而对此的答案将使社区受益。因此,欢迎对这个问题进行改进,而不仅仅是关闭它。

4

5 回答 5

3

选择框架时,请考虑以下问题:

语言:一些框架是用 SASS 编写的。其他的则用 LESS 编写。还有一些是用纯 CSS 编写的。选择一个用你最熟悉的语言编写的框架。

特点:一些框架只提供一个网格。其他人添加排版。还有一些人添加了一大堆自定义 UI 元素。选择一个与您想要的功能最匹配的框架。您不想要一个功能太少或臃肿且包含许多您从未打算使用的功能的框架。

模块化:您不想用自己的自定义代码覆盖框架输出的 50%。如果您确实选择了一个功能比您需要的功能更多的框架,请确保它的模块化程度足以轻松摆脱大部分代码膨胀。

响应性:如果您希望页面具有响应性,请选择响应式网格。

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

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

于 2013-03-20T14:59:23.953 回答
2

首先要了解您的 Web 项目的要求和目标。

1. 您是否只针对移动受众?

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

如果您不需要功能更强大的 Web-App 方法,那么可以选择响应式框架。您必须专注于如何在不同的屏幕分辨率上排列和排序某些页面元素,以及在较小的分辨率下可以关闭哪些页面元素。(这有时会导致利益相关者围绕什么(更)重要和什么不重要展开政治辩论)。

2. 您是否同时针对移动和桌面受众?

您需要一个支持响应式或流畅布局的框架,以最大程度地支持您的受众客户。如果您必须制作的图形设计更加静态,则响应式路线更适合,因为它可以更轻松地在断点内的不同阶段进行规划。目前大多数设计师都遵循灵活的方法,轻量级、优雅、展示性、不那么像门户,这也允许流畅的实现(允许某些或所有页面元素根据客户端/浏览器视口拉伸或增长)。

3. 您是否只针对传统受众?

然后只需选择您确信它允许最简单实施的框架。设计师是否使用了网格?那么也许 CSS 框架适合它。一些 CSS 框架为 Gimp、Photoshop、Illustrator 和其他人提供了各种各样的设计模板,所以也许设计可以基于模板预先实现,这样可以实现最好的实现。

另外两个考虑:

A. 没有平面设计

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

B. 时间限制

没时间?一些框架带有自己的或第三方的自定义脚本或向导。选择您需要的元素或组件,打开或关闭某些 JS 库,重置样式表等,然后下载最终包。而已。

一些框架非常成熟并且经过了很好的测试,因此缺乏一个充满活力的社区可能不会告诉你那么多。根据您的技能,可能不需要大量支持(甚至是一个不好的迹象:网格/框架应该简单并且不会妨碍您。可能出现的问题应该是通常的 CSS 问题常见的,即使没有底层框架的细节也可以回答)。

两个示例来说明两种方法(更多网格 <-> 更具响应性):

http://960.gs/

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

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

现代,不错的炒作。很多组件。可定制。反应灵敏。

网络应用程序:

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

于 2012-10-22T07:33:22.793 回答
2

大多数网格有 95% 相同:它们定义列的宽度 + 包括一个 clearfix。

如果您愿意,您甚至可以制作自己的网格。因此,如果我们了解大多数网格本质上是相同的,那么最好使用哪一个?

1) 仅通过下载网格来自定义Twitter Bootstrap。这是一个不错的选择,因为大多数人都熟悉“span1、span2、span3”约定。此外,它可以作为固定宽度和流体(即响应式)使用。

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

于 2013-04-17T04:22:53.850 回答
1

您可以立即提出的一个问题是:

我是否希望框架具有响应性?

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

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

于 2012-10-22T04:22:20.167 回答
0

考虑到来自 Twitter 的 UI 设计师制作了 Bootstrap,我不会只是把它称为围绕该框架的炒作。它是优秀的代码和最完整的框架。960.gs 是一个网格系统,boostrap 称为脚手架。Bootstrap 也是智能手机友好的。因此,有人必须将 jquerymobile、jquery、960.gs 以及他们需要的所有插件一起破解。Bootsrap 已经捆绑了很多东西,可以让你开始使用并在所有浏览器和手机/平板电脑上运行。

于 2012-10-22T09:13:34.843 回答