【问题标题】:Choosing a CSS grid/framework选择 CSS 网格/框架
【发布时间】:2012-10-12 04:26:45
【问题描述】:

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

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

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

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

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

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

【问题讨论】:

  • 出于好奇,我最终使用了Foundation。
  • 您也应该考虑一些轻量级的解决方案。可以在 5 分钟内阅读和理解代码的内容,例如 github.com/Dharmoslap/GRD。

标签: grid css-frameworks


【解决方案1】:

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

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

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

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

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

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

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

【讨论】:

    【解决方案2】:

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

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

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

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

    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

    【讨论】:

      【解决方案3】:

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

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

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

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

      【讨论】:

        【解决方案4】:

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

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

        这个问题的答案会从你的列表中划掉许多选项。

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

        【讨论】:

          【解决方案5】:

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

          【讨论】:

          • 因为 Twitter 是 UI 和布局复杂性的疯狂过山车吗?
          猜你喜欢
          • 2015-03-24
          • 1970-01-01
          • 1970-01-01
          • 2017-03-24
          • 2014-12-30
          • 2014-01-22
          • 2010-10-13
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多