网站首页 » 前端开发 » 前端工具 » 极佳的响应式框架
上一篇:
下一篇:

极佳的响应式框架

随着移动互联网的兴起,移动应用遍地开花。对于传统的网站而言,已经无法适应移动设置。如手机,平板等。不过随着HTML5标准的尘埃落定,响应式框架如雨后春笋般出现。下面就给大家介绍一些比较优秀的响应式框架。

Bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

为所有开发者、所有应用场景而设计:Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

Bootstrap的强大这这处在于它给我们提供了非常多的,极其实用的样式,组件,JavaScript插件。还有一个更多接地气的就是他有一个中文的官网。语言不再是你的障碍。

bootstrap-framework

中文官网:http://www.bootcss.com/

英文官网:http://getbootstrap.com/

Kube

Kube框架是目前世界上最先进,最灵活的框架之一。
Kube事半功倍,有更多的时间去创造激动人心的产品。
与Bootstrap相似,Kube也提供了一些常用的css组件,JavaScript工具。

kube-framework

官方网站:http://imperavi.com/kube/

UIKIT

UIkit 基于 LESS 开发,代码结构清晰简单,易于扩展和维护。
体积小、反应灵敏的响应式组件,使用一致的、无冲突的命名规则。
可根据 UIKit 基本的风格及样式,轻松地自定义创建出自己喜欢的主题样式。
根据不同的屏幕分辨率与上网设备,UIKit 会自动做出响应,提供一致的体验。
一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。
UIKit为您提供了全面的HTML、CSS及JS组件,它们使用简单,容易定制和扩展。

相对于Bootstrap来说它的优势就是效果会多一些,炫一些。不过UIKit里面的实现插件比Bootstrap多。总的来说他们两个之间各有优势。

uikit-framework

中文网:http://www.getuikit.net/

英文网:http://getuikit.com/

amazeui

为移动而生:Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。
组件丰富,模块化:Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。
本地化支持:相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。
轻量级,高性能:Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。

amazeui-framework

官方网站:http://amazeui.org/

amazeui 还提供了一个 Amaze UI Touch 这个框架就类似于APP 的效果了。这个框架基于 React.js 的移动端 Web 组件库

专属于移动:Amaze UI Touch 专为移动打造,在技术实现、交互设计上只考虑主流移动设备,保证代码轻、性能高。
专注于 UI:只提供 UI 组件(View),对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。
采用 Flexbox 布局:使用 Flexbox 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局。
基于 React.js:基于风靡社区的 React.js 封装组件,沿袭高性能、可复用、易扩展、一处学习多端编写特性。

官方网站:http://t.amazeui.org/

Foundation

极速的响应式设计:Foundation 是一个易用、强大而且灵活的响应式前端框架,用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。
响应式网站:Foundation 可以帮助你快速创建响应式网站,它为你提供了大量的HTML、CSS和JavaScript组件和功能;你也可以针对不同项目定制扩展功能。
电子邮件:电子邮件框架可以接入任何第三方邮件平台,可以帮助你更加快速的创建收发邮件模板项目。
Web应用:Foundation Web应用可以快速、简单的构建复杂的布局、交互动画。通过响应式Flexbox的布局,使你的项目可以运行到任何设备和浏览器上。
语义化:使用Foundation框架语义化结构,可以编写更干净、更优雅的前端代码
移动设备优先:通过同一份代码快速、有效适配手机、平板、PC 设备
可定制的:你可以根据自己项目情况完全自定义定制(定义栅格、颜色、字体大小等)
专业化:成千上万的设计师和开发人员在使得Foundation,我们专业化的团队帮助你快速解决出现的问题。

foundation-framework
官方网站:http://foundation.zurb.com/

Pure

Pure.CSS 占用极小的空间和带宽。

Pure小的没有节操,全部模块gzip压缩后才 4.4KB* 。 考虑到移动端,保持文件尽量小对我们来说非常重要,每一行CSS都经过深思。如果你只用部分模块,简直小的忽略。

* 上面标示的是每个模块独立的大小,多个模块合并后进行压缩文件会更小。

Pure基石:Pure基于Normalize.css添加了HTML元素的布局和样式,以及常用的UI组件。全是精华,木有糟粕。

移动端是初衷:Pure是响应式的盒子模型,适应所有尺寸的屏幕。通过皮肤生成器可以自定义样式。

写出你自己的样式:Pure提供最基础的样式,鼓励你基于此写出自己的样式。它被设计为容易覆写,且不影响你自己的样式。

pure-framework

中文网:http://www.purecss.org/

英文网:http://purecss.io/

framework7

Framework7 是一个开源免费的框架可以用来开发混合移动应用(原生和HTML混合)或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具,可以迅速创建一个应用的原型。

Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。

Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。

如果你想开发 iOS 或者 Android 混合应用(Phonegap)或者你想开发 iOS 和 Google Material 风格的WEB APP,那么Framework7将会是你的首选。

framework7

这个framework7 是专门用来开发  iOS & Android WEB APP的,对于做APP的朋友来说,这是一个非常棒的框架。

中文网:http://framework7.cn/

英文网:http://framework7.io/

SUI

简单易用、功能强大的UI库

SUI 是一套基于bootstrap开发的前端组件库,同时她也是一套设计规范。

通过SUI,可以非常方便的设计和实现精美的页面。

SUI

官方地址:http://sui.taobao.org/sui/docs/

MDUI

MDUI 是一套用于开发 Material Design 网页的前端框架

MDUI

  • 多主题:19 种主色、16 种强调色、1 种夜间主题,只需添加一个 CSS 类即可切换。
  • 轻量级:CSS 仅 26.7KB,JavaScript 仅 14KB,加载更迅速。、
  • 响应式:移动优先,从小屏逐步扩展到大屏,最终实现所有屏幕适配。
  • 无依赖:不依赖任何第三方库,节约网络流量,使加载更迅速,提高用户体验。
  • 高性能:使用 CSS3 来做动画交互,平滑、高效,让 Web 应用的动画更流畅。
  • 模块化:提供自定义打包功能,按需打包需要的主题和组件,使文件体积骤然减小。
  • 本地化:相比国外框架,MDUI 更注重中文排版,提供全中文文档,中文社区。
  • 组件丰富:MDUI 包含了 20 余个组件,且每个组件都可以适应不同主题。
  • 低学习成本:只需懂一点 HTML、CSS、JS 的基础知识,就能使用 MDUI。

layui

 

经典的模块化框架,由职业前端倾情打造,面向所有层次的前后端开发者,零门槛开箱即用的前端UI解决方案。

layui

个人觉得 layui 做得不错,里面的一些实现你可借鉴下。
 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/nice-responsive-framework/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END