选择CSS网格/框架

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

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

当谈到选择一个时,如果没有对所有这些都有深入的了解,很容易迷失。

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

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

注 1:我在这里几乎可以互换地使用“网格”和“框架”,但可能有一个我应该使用另一个。

注 2:我很清楚,有些选择将取决于口味,因此,这个问题可以变成一个“最好的”竞赛 / 主观话题。我试图让它尽可能负责,因为我很确定许多人有这个问题 / 问题选择一个框架和一个答案,这将有利于社会。

3

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

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

功能:有些框架只提供一个网格。其他人添加了排版。还有一些添加了一大堆自定义 UI 元素。选择一个最符合你想要的功能的框架。你不想要一个功能太少的框架,也不想要一个臃肿的框架,它包含了许多你不打算使用的功能。

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

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

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

我建立了自己的框架Cascade Framework,因为没有一个框架按照我想要的方式回答这些问题。

2

首先要做的是 Web 项目的要求和目标。

1.您只针对移动受众吗?

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

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

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

目前,大多数设计人员采用灵活的方法,轻巧、优雅、富有表现力、不像门户,还允许流畅的实现 (其中允许某些或所有页面元素根据客户端 / 浏览器视口进行拉伸或增长)。

3.您只针对传统受众吗?

然后简单地选择你确信它允许最简单的实现的框架。设计师使用网格吗?那么也许 CSS 框架适合它。一些 CSS 框架为 Gimp 、 Photoshop 、 Ilrator 和其他提供了各种各样的设计模板,所以也许设计可以基于允许最佳实现的模板。

另外两个注意事项:

A.没有图形设计

如果你开始没有明确的设计模板,我会选择一个框架,允许轻松集成的字体,提供了很多例子,用例,预定义的页面元素或组件(按钮,导航,拇指...)。

B.时间限制

没有时间?有些框架自带或第三方定制脚本或向导。选择你需要的元素或组件,打开或关闭某些 JS 库,重置样式表之类的东西,然后下载最终的包。就是这样。

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

两个示例来说明两种方法(更多网格 & lt;-& gt;更具响应性):

http://960.gs/

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

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

现代,漂亮的炒作。很多组件。可定制。响应。

Web 应用程序:

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

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

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

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

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

1

你可以马上问一个问题:

我是否希望框架响应?

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

我问的另一个主要问题是项目背后有什么样的社区支持。根据我的经验,投资到一个特定的项目中,比让它死去而得不到支持是一种痛苦。拥有拥有关键支持者和大量追随者的东西是很好的。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(444)
Plaid-error_code:'ITEM_LOGIN_REQUIRED'。每小时左右重复一次
上一篇
Woocommerce评论部分在选项卡之外(在单个产品页面上)不会显示评论
下一篇

相关推荐

  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 83 44
  • css超出隐藏省略:爱上海,一个充满活力的城市!

    css超出隐藏省略,可以使用CSS的text-属性来实现,具体代码如下:…

    2023-06-26 11:29:04
    0 40 45
  • css怎么让图片居中显示:使用CSS实现图片居中显示

    示例示例可以使用CSS的margin属性来实现图片居中显示,代码示例如下:上面的代码中,我们使用了 `margin: 0 auto;` 来让图片居中显示,其中`0`表示上下边距,`auto`表示左右边距自动调整,这样就可以让图片居中显示。…

    2023-06-26 00:45:20
    0 72 88
  • css 背景铺满:欢迎来到我的世界

    CSS 代码如下:上面的代码可以使背景图片填充整个浏览器窗口,并且保持图片的原始比例。…

    2023-10-11 10:49:49
    0 58 54
  • css 子样式:标题

    CSS 子样式是指在父样式的基础上,对其子元素进行单独定义的样式。它可以使用类选择器、ID 选择器或者属性选择器来定义,如下所示:…

    2023-04-13 14:42:51
    0 85 27
  • css 间隔:如何利用 CSS 进行间隔调整

    示例示例CSS 间隔是指在 CSS 中使用的间距属性,它可以用来设置元素之间的距离。有几种常用的 CSS 间隔属性,包括:…

    2023-06-05 02:47:09
    0 34 57
  • css导入字体:标题

    示例示例CSS导入字体可以通过@font-face规则来实现,代码示例如下:…

    2023-04-22 12:42:42
    0 68 38
  • cssci与sci的区别比较两者在科学研究中的作用

    CSSCI(中国社会科学引文索引)是中国社会科学院出版社编辑的中国社会科学文献引文索引,收录中国社会科学领域的期刊文献及其他文献,主要收录中国社会科学领域的期刊文献,也收录部分论文集、学位论文及其他文献。…

    2023-11-15 05:05:39
    0 56 81

发表评论

登录 后才能评论

评论列表(9条)