HTML5(H5)常用的十大前端框架(一)

HTML5(H5)常用的十大前端框架(一)

Foundation框架

Foundation是一个响应式前端框架系列,可以轻松设计漂亮的响应式网站,应用程序和电子邮件,在任何设备上看起来都很棒。Foundation是语义,可读,灵活且完全可定制的。我们不断添加新的资源和代码片段,包括这些方便的HTML模板,以帮助您入门!

特点:世界上最先进的响应式前端框架。快速为适用于任何类型设备的站点创建原型和生产代码。

总结:Foundation 算是框架界的元老啦,都说框架去的早,而这个框架一直到现在依然这么的热门,如果你比较介意 Bootstrap 开发撞脸的尴尬事情,那么你可以考虑使用 Foundation 。即使你使用预定义的 UI 元素, 也不会与其他网站太像,就像官方说的给开发者更灵活的框架体验。

Bootstrap框架

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架

,使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

包含内容:

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

CSS:Bootstrap 自带以下特性:全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。

组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。

JavaScript 插件:Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。

定制:您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

总结:Bootstrap 最大的优势就是它非常流行,流行就代表你有问题就有很多人帮你解决问题,就代表装逼它就是利器,还有就是界面比较和谐,容易上手,关注它的小伙伴应该发现最新 V4 版也开始支持 FlexBox 布局,这是非常好的升级体验。 劣势是 class 命名不够语义化,并且各种缩写,以至于我离了文档就是个菜,最近开始整混合 APP,选框架的时候首选就是它,但之前搞 PC 一直没注意,后来搞混合右键属性看它的时候,瞬间一阵凉风袭来,Bootstrap 好小,小到我只好选择别的框架。

AUI框架

AUI为一款轻量级前端UI框架,更偏重于CSS布局及样式的构造,通俗易懂的写法及模块式的拼装方便用户自由扩展。轻小的体积、灵活的扩展性,大大提高移动端项目的体验度和开发效率。

在目前市场上的UI框架中,大多数的框架以JS来实现过多的功能和布局。当然并不是否定JS在一个移动前端框架中的作用性,既然是前端框架侧重点要更多的考虑框架本身在一个项目中的资源消耗问题及如何提高用户的体验度。鉴于APICloud多窗口结构及原生模块的拼装,所以在移动端项目中AUI强调更多的是快速布局、灵活布局的实现,结合APICloud本身特性,提高开发效率及用户体验。

最近刚起来的AUI,虽然作者声称是专为APICloud开发者设计的一套UI框架,但实际它还是解决了很多移动前端开发的普遍问题,是主要面向混合开发的 CSS 框架。看起来作者比较猖狂,各种高级 CSS3 遍地使用,这让我也不得不去查查这些个 CSS3 的兼容性。不负众望果然选的都是兼容不错的属性

,哈哈了一顿激动从前辈手上大胆认识了几个好东西,并且框架还提供了聊天界面、计数列表等组件,解决了很多复杂的让我骂娘的布局,现在可以直接拿走就用。

总结:这个框架对我来说有个优点就是纯 CSS 框架,自己以前也就用过 Pure,自己有点 JS 能力,如果不是复杂的效果,找个纯 CSS 框架自己随便改改就可以,而现在 CSS3 也已经能够做到动画,效率、质量、高效全兼顾,所以还是选择了这种 CSS 框架。有一点觉得不满的是这框架的文档真的好那什么,说好的高大上呢。

Amaze UI 框架

第二个介绍的是AmazeUI,据官方说是咱们中国首个HTML5跨屏前端框架。

最初使用它是因为本尊遇到了一个爱纠结细节设计,有一次她跟我的字体较上真了,结果一句顶万句的 BOOS 夸了她,我只好根据她的想法去解决,结果最后找到了Amaze UI 框架,按照官方的话说就是 "基于社区开源项目构建的一个跨屏前端框架,以移动优先

从小屏到大屏,最终实现所有屏幕适配适应移动互联潮流" 。但其实我就是看中它能解决国内浏览器存在的跨屏适配和兼容性问题。

总结:Amaze UI 总的来说就是加入更多符合中国市场特性的元素,框架对跨屏、适配都做了的比较好的处理并且准备一了一系列的常用的网页组件,为减少搞兼容、适配各种敲键盘的加班狗们的工作时间做了不小的贡献。框架还对中文排版优化,兼容中国本土主流浏览器、轻量化,不仅适用于桌面端,还更更适合移动端、包含一些封装好的Widgets。不过自也就我感觉 Amaze UI 文档是否有点太那什么了,比如 “人们不会在乎jQuery的那点流量。”,说实的在这真没啥,不过我从来不会说出来( 哈哈 ),代码和设计上感觉没太多突出的点。

Pure框架

一组小的,响应迅速的CSS模块,您可以在每个Web项目中使用它们。

特点:

CSS占用空间极小。

纯净是微不足道的。整套模块的时钟频率为3.8KB *缩小和压缩。在考虑移动设备的情况下,对我们来说保持文件大小很小很重要,并且仔细考虑了每一行CSS。如果您决定仅使用这些模块的子集,则可以节省更多字节。

你的CSS基础

Pure构建于Normalize.css之上,为原生HTML元素以及最常见的UI组件提供布局和样式。这就是你所需要的,没有任何瑕疵。

以移动为主题

Pure是开箱即用的响应,因此所有屏幕尺寸的元素都很棒。

坚持你的方式

Pure具有最小的样式,并鼓励您在其上编写应用程序样式。它旨在让您不受约束,并轻松覆盖样式。

创建响应式布局

通过使用Grids,Menus等,可以轻松地为所有屏幕尺寸创建漂亮的响应式布局。我们让您轻松上手。看看几个不同的布局,并用坚如磐石的基础开始您的下一个Web项目。

这个框架是我在做管理系统时接触的,选择使用也是因为框架小巧,并且是纯 CSS,没有太多的牵扯,好用来与其他框架快速结合使用。

HTML5(H5)常用的十大前端框架(一)


分享到:


相關文章: