前端开发并不是一个容易的工作,不仅需要掌握HTML、CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长。
本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。
使用这些前端框架,有如下好处:
Koala
国产前端开发框架,开发者:
功能特性
InK
Ink为一个界面工具包,用于快速开发Web界面,具有易于使用、易于扩展特点。它可以为构建布局提供解决方案,可以展示普通的界面元素,可以实现以内容为中心、对用户友好的交互方式。
GroundworkCSS Beta
GroundworkCSS是一个基于Sass预处理器的开源项目 ,主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件,如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。
Ivory
这是一个灵活、强大的响应式Web框架,使Web开发更快速、更简单。
ZURB
Foundation由ZURB公司设计,ZURB是一家产品设计公司,位于加州坎贝尔。Foundation为最先进的响应式前端开发框架,它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。
Grumby
Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器,利用它可以快速开发Gumby。
HTML KickStart
该框架集合了HTML5、CSS和JavaScript,帮助开发人员快速开发Web产品。它覆盖了所有UI组件,同时也包含一些有用的JavaScript插件。
Maxmertkit
Maxmertkit拥有完整的文档,包含大量实例,并且提供了拖拽生成代码的功能。
Twitter Bootstrap
大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件,Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。
Skeleton
Skeleton 是一个小的JS和CSS文件集合,可帮你快速开发漂亮的网站,适合各种屏幕设备,包括手机。Skeleton基于960 Grid开发,是一个UI框架。
HTML&CSS:GRid、排版、按钮、表单、媒体查询(Media Queries)
Kube
Kube是一款最小化的,支持响应式的前端框架,包括一个简洁的CSS文件,用于方便地创建响应式布局,包括了两个JS文件来完成Tab以及页面的按钮操作。
Helium
Helium是一个前端响应式Web框架,使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation,事实上,Helium使用了两者不少的代码。但与这两个框架不同的是,Helium设计更加轻量级,而且更容易修改。Helium只有30KB左右,而Bootstrap有100KB,ZURB有200多KB。
The Markup Framework
Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。
Topcoat
TopCoat是一套免费的开源UI元素类库,整套类库不使用任何JavaScript,而是使用CSS和HTML来生成。
HTML&CSS:图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮
JS:没有JavaScripts,只有单纯的CSS
PureCSS
Pure是一个相当小的框架,压缩及最小化后仅有5.7KB。它没有使用任何JavaScript,只是HTML和CSS。该CSS框架为响应式布局,采用模块化结构,每个模块的样式可以单独使用。
结论
根据你的需要,选择可以与设计相匹配的框架。我们不应该根据框架来构建网站,因为它会很大程度上限制设计者的思维。
如果前端设计/布局不是那么重要,那么我们可以选择使用某一框架。
原文来自:queness.com
暂无评论内容