有哪些不同的CSS前端框架可供选择?

开发 前端
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所需的时间。

 CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所需的时间。

[[438860]]

Bootstrap

最流行的前端框架之一,当然是Bootstrap。虽然它是为内部团队开发的一种工具,但一旦发布,它的采用率就大大提高了。它为常见的UI组件(如按钮、排版、表单、下拉列表、警报、选项卡、旋转木马)以及可选的JavaScript扩展提供设计模板。

您可以使用Bootstrap轻松创建响应性布局,Bootstrap 3通过其mobile first功能重点强调了这一点。通过引导在12列网格系统中组织元素的能力提供了跨设备的干净、一致的设计。Bootstrap使用的样式表较少,但也被移植到了Sass(作为一个单独的存储库进行维护),因此两者的用户都可以访问内容。

Foundation

Foundation是一个响应前端框架,用于创建跨多个设备工作的站点的快速原型和生产代码。Foundation是基于940px网格系统,而引导是基于1170px网格布局。

使用Foundation的优点之一是能够快速地原型原型,因为框架的裸骨结构和提供的启动模板,对于快速原型设计非常有用。

Skeleton

Skeleton是一个“简单、快速响应的样板文件”。Skeleton非常适合较小的项目,或者如果轻量级是优先考虑的话(它只有大约400行未压缩的代码)。样式的设计更多的是作为一个起点,而不是作为一个UI框架。Skeleton由于其轻巧的特性,非常适合以移动为中心的设计。

对于初学者来说,Skeleton也是前端框架的一个很好的起点。它有简洁的代码和简单的布局。

UI工具包

UI工具包元素易于定制和轻量级。它提供了快速构建web界面的模板。除了包含所有HTML、CSS和JavaScript文件的安装包之外,它还包含一个用于Sublime文本和Atom编辑器的自动完成包,这样用户就不必一次又一次地查找UI工具包类名和标记。

基础系统、引导程序和UI工具包之间的关键区别是网格系统。UI工具包不使用12列网格设置,而是将布局分解为三个组件,即网格、柔性和宽度。使用网格组件,可以根据需要创建任意数量的列。

除此之外,您可以为您的项目尝试的其他框架包括:

  • TukTuk-响应灵敏,重量轻;面向对象的CSS;用咖啡脚本写的。
  • 语义用户界面-使用自然语言原则使代码更具可读性;较少的预处理器;响应速度快,调试简单。
  • YAML-非常纤细的框架核心(5.9KB);Sass预处理器;防弹模块;适用于IE6+。
  • 960网格系统-流体和响应性;12柱或16柱网格选项可用;适用于快速成型以及生产环境。

虽然前端框架现在在个人和专业项目中都得到了广泛的应用,但一些反对使用框架的观点仍然存在。它们围绕着编写自己的设计网格而不是使用响应框架,增加了加载时间,所有网站看起来都一样,以及框架带来的不必要的膨胀。

如前所述,它因案例和项目而异。如果它适合你的项目,没有必要三思而后行。框架有足够的好处来保证它们的使用。在为项目选择正确的框架时,请考虑其中的一些要点。它是否有足够的支持和更新来跟上?它是否适合您的项目规模和未来可能的扩展?

 

责任编辑:华轩 来源: 今日头条
相关推荐

2021-10-29 15:02:11

Linux平板电脑

2015-08-21 18:15:27

2023-02-24 07:29:59

Signal前端框架

2021-12-26 09:22:44

前端Css图标

2021-11-16 07:52:24

前端技术编程

2021-08-06 09:43:18

云计算容器云原生

2021-03-09 16:30:50

Java前端框架开发

2024-09-12 16:52:38

2009-01-10 19:16:18

服务器ServerCPU

2023-03-24 16:21:08

2024-08-26 09:51:57

2023-05-09 07:38:57

jQueryAjax代码

2024-04-30 10:59:03

WebSocketCSS选择器

2017-05-03 16:51:00

云服务器窍门选择

2017-07-21 12:52:32

人工智能机器学习神经网络

2021-06-09 08:13:29

开源物联网工具物联网

2020-12-28 11:11:26

前端开发语言

2019-07-19 19:57:33

JavaScript技术HTML

2021-12-02 10:16:10

机器人编程语言计算机语言

2020-03-06 08:33:49

开源协议开源软件
点赞
收藏

51CTO技术栈公众号