14个支持响应式设计的流行前端开发框架
在几年前,并没有真正意义上的前端开发。随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发。如今,我们可以看到越来越多的公司在招聘前端开发岗位。
前端开发并不容易,除了掌握基本的 HTML、CSS 和 Javascript 之外,因为不同版本的浏览器和平台,你需要知道如何做一个跨浏览器的网站。而最新的发展趋势——响应式设计,它不仅使 Web 项目开发更难,也需要花费更多的开发时间。
不过,有很多优秀的框架可以帮助到你,这篇文章挑选了14个响应式的前端框架,列出了每个框架的 UI 组件和 Javascript 插件,几乎所有的都使用了响应式网格系统。就个人而言,我比较喜欢 Twitter Boostrap,你最喜欢这里面的哪个呢?
这些前端框架能为您提供以下好处:
- 跨浏览器:前端框架都在不同的浏览器测试通过。
- 一致性: UI 组件,如导航,按钮,标签,表单,下拉菜单,表格... 他们的风格都相互统一。
- 快速开发:您可以轻松,快速的构建一个布局。他们通常有代码片段和优秀的文档。
- 响应式:所有 CSS 组件和 Javascript 插件能够从桌面扩展到移动端。
InK
Ink 是一个用于快速开发 Web 界面的 UI 套件,简单易用和。它通过整合 HTML,CSS 和 JavaScript 来提供现代化的解决方案,构建布局,显示通用的界面元素,为你的用户实现内容为中心的和用户友好的互动功能。
- HTML & CSS 组件:布局,导航,排版,图标,表格,提醒,表单。
- JavaScript 组件:画廊,模态窗口,表格,可排序的日期选择器,选项卡,表单验证,行为(停靠,折叠,关闭)。
- 其它特性:支持Sass 混入。
GroundworkCSS
GroundworkCSS 灵活的网格系统使你能够快速开发,并能够适应任何屏幕尺寸,从手持设备到大尺寸的显示屏。GroundworkCSS 构建在强大的 CSS 预处理器 Sass 的基础上。Sass是对 CSS3 的扩展,并添加了嵌套规则,变量,混入,选择器继承等等众多特性。使用命令行工具或 Web 框架插件可以转换为标准的 CSS 代码。
- HTML & CSS 组件:网格,布局,排版,按钮,瓷砖,表格,表格,图示,社会的图标,响应文本,消息,警报。
- JavaScript组件:导航,标签,工具提示。
- 其它特性:支持 Sass 混入。
Ivory
灵活,强大的响应式 Web 框架,使 Web 开发更快,更容易。支持 1200 像素到 320px 区间的响应式布局。
- HTML & CSS 组件:网格,排版,表单,按钮,提醒,分页,面包屑,列表,表格。
- JavaScript组件:工具提示,选项卡,切换开关,手风琴。
Foundation
Foundation 是由加利福尼亚州的产品设计公司 Zurb 推出的。这是目前最先进的响应式前端框架,它有很多的模板布局,UI 组件的 CSS 样式,也收录了很多他们自己的 JavaScript 插件。
- HTML & CSS 组件:网格布局模板,图标,字体,响应式表格,SVG 社交图标,分页,面包屑,边栏导航,按钮,字体,标签,提醒,面板,价格表,进度条,表格,缩略图。
- JavaScript 组件:下拉按钮,分割按钮,开关,自适应视频,灯箱,下拉列表,导航,显示模态窗口,选项卡,工具提示。
- 其他特性:自定义皮肤的表单,SCSS 混入。
Grumby
Gumby 2 基于强大的 Sass 构建,Sass是一个功能强大的 CSS 预处理器,这使我们能够快速的开发自己的 Gumby,并为您提供新的工具,让你能够在 Gumby 的框架基础上快速定制。
- HTML & CSS 组件:网格,表单,按钮,导航,标签,Entypo 图标。
- JavaScript 组件:切换开关,下拉框,选项卡,模态窗口。
- 其他特性:自定义皮肤的表单,SASS & Compass。
HTML KickStart
超精益的 HTML5,CSS & JS 模块,用于快速网站制作。它有一个全面的 UI 组件,也有一些有用的 JavaScript 插件,它的目标是成为设计师的朋友。
- HTML & CSS 组件:网格,排版,按钮,按钮条,列表,表格,图标,面包屑,图像,表格。
- JavaScript:菜单,工具提示,语法高亮,选项卡,幻灯片,表单验证。
- 其他特性:额外的 CSS 工具。
Maxmertkit
这个框架是由 Vetrenko Maxim Sergeevich 创建的,使程序员的生活更轻松。Maxmerkit 是基于部件修改器编码风格的一个 CSS 框架。
- HTML & CSS 组件:网格布局,typograpghy,徽章,按钮,插入符,表格,图标,标签,菜单,进度表,下拉菜单,工具提示。
- JavaScript 组件:按钮,转盘,模态窗口,通知,弹出层,选项卡,滚动侦测。
- 其他特性:支持 Sass, Coffee Script。
Twitter Bootstrap
Bootstrap 是基于 HTML,CSS 和 JavaScript 的简洁灵活的流行前端框架及交互组件集,由微博的先驱 Twitter 在2011年8月开源的整套前端解决解决方案。Bootstrap有非常完备和详尽的开发文档,Web 开发人员能够轻松搭建出清爽风格的界面以及实现良好的交互效果。
- HTML & CSS 组件: 网格,布局,排版,代码,表格,表单,按钮,图像,图标,按钮组,导航,面包屑,分页,选项卡,徽章,缩略图,提醒,进度条。
- JavaScript 组件: 过渡,模态窗口,下拉框,滚动检测,标签,工具提示,弹出层,警报,按钮,手风琴,旋转木马,自动补齐。
- 其它特性: 支持定制, LESS CSS。
Skeleton
Skeleton 是一个小集合的 CSS 文件,可以帮助你迅速开发任何尺寸,外观漂亮的网站,例如用于 17 寸笔记本电脑屏幕或 iPhone 屏幕的。Skeleton 建立在三个核心原则之上:兼容移动端的响应式网格,快速入门,风格无关。Skeleton 对于大多数开发者是一个相当不错的选择,因为它是轻量级的且易于使用。
- HTML & CSS 组件: 网格,排版,按钮,表单,媒体查询。
Kube
Kube 是由 imperavi (他也是著名的 Redactor 编辑器的作者)发布的前端框架,以使设计者/开发者的生活更轻松。简约而不简单,适应性和响应式能够使用各种需求。革命性的灵活网格和漂亮的印刷字体,没有任何强加的样式。
- HTML & CSS 组件:排版,表单,网格,表格,按钮,导航,图标。
- JavaScript 组件: 按钮,标签。
- 其它特性:支持 LESS CSS。
Helium
Helium 是一种前端响应式 Web 开发框架,用于 HTML5 和 CSS3 项目的快速原型设计和实际开发。它在许多方面与 Twitter Bootstrap 和 ZURB Foundation 相似。然而,不同于这两个框架的是,Helium 的目的是要更轻量,更容易更改。把它看成是一个典型的汽车,在那里你可以打开引擎盖,容易对发动机进行改装。
- HTML & CSS 组件: 网格,按钮,排版,表格。
- JavaScript 组件: 下拉框,表单验证,模态窗口。
- 其它特性: 支持SASS & Compass。
Markup
Markup 框架是一个布局,窗口小部件,排版样式和其他的 UI 组件的集合,可以根据自己的需要进行整合。
- HTML & CSS 组件:布局,网格,排版,表格,按钮,标题,面包屑,消息,导航列表,导航菜单。
- JavaScript 组件: 无 Javascript,纯 CSS。
Topcoat
Topcoat 是一个 CSS 集合,用于简洁和快速的 Web 应用程序开发。它是一个开源库,不需要任何 JavaScript 内置的用户界面元素。
- HTML & CSS 组件: 图标,字体,按钮,面包屑,按钮栏,表格,下拉列表,滑动开关,标签,切换按钮,选择,滑块
- JavaScript 组件: 无 Javascript ,纯 CSS
PureCSS
Pure 是一组轻量的,响应式的 CSS 模块,您可以使用在任何的 Web 项目中。充分考虑了移动设备中的使用,保持文件体积尽量小,每行 CSS 都进行了仔细的考虑。Pure 基于 Normalize.css 构建,并提供布局以及 原生 HTML 元素的风格,加上最常见的 UI 组件。相信这些都是你需要的。
- HTML & CSS 组件: 网格,排版,表格,按钮,表格,菜单。
- JavaScript 组件: 无 Javascript ,纯 CSS。
- 其它特性: 皮肤制作器,YU 库。
总结
我必须要说的是,根据项目的不同要求,大部分的时间你都需要对使用的框架进行调整以符合您的设计。我们不应该完全使用框架来建立一个网站,因为这将极大地限制设计师的潜力。
如果前端的设计或布局并不重要,我们可以使用该框架。例如在网站后台管理系统的使用 Twitter Bootstrap,它可以帮助你节省60%的开发时间。
有时候,你可能只需要使用框架中的一部分,例如网格系统,那么别的不需要的就可以删除。总而言之,没有完美的前端框架,要根据项目的需求和实际使用场景灵活变通,让框架成为你的助手而不是障碍。
转载于:https://www.cnblogs.com/Blog-Yang/p/3245439.html
14个支持响应式设计的流行前端开发框架相关推荐
- 14个支持响应式设计的前端框架
在几年前,并没有真正意义上的前端开发.随着网络技术的发展,网站和 Web 应用程序变得越来越复杂,前端部分的工作独立出来逐渐成为现在的前端开发.如今,我们可以看到越来越多的公司在招聘前端开发岗位. 前 ...
- 14.什么是响应式设计?响应式设计的基本原理是什么?如何做?
一.是什么 响应式网站设计(Responsive Web design)是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整 描述 ...
- 前端设计 响应式设计_如何响应式设计
前端设计 响应式设计 This guest post about responsive design comes from Krasimir Tsonev! 这个关于响应式设计的来宾帖子来自Krasi ...
- 《响应式Web设计性能优化》一1.1 响应式设计存在的问题
本节书摘来异步社区<响应式Web设计性能优化>一书中的第2章,第2.1节,作者: [美]Tom Barker 译者: 余绍亮 , 丁一 , 叶磊 责编: 赵轩,更多章节内容可以访问云栖社区 ...
- 具有动态效果的响应式设计
摘要: 响应式设计已经流行很久了,今天分享一个借助transition来实现动态切换布局的效果. 代码: <!DOCTYPE html> <html lang="en&q ...
- IE浏览器支持响应式网站设计
目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...
- 纯css3开发的响应式设计动画菜单(支持ie8)
这是一个响应式设计的菜单.单击列表图标,当你显示屏大小可以完全水平放下所有菜单项时,菜单水平显示(如图1).当你的显示屏不能水平放置所有菜单项时,菜单垂直显示(如图2). 而且显示的时候是以动画的型式 ...
- 自适应设计与响应式设计
目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网 ...
- 使用 jQuery Mobile 和 CSS3 实现响应式设计
来自:http://www.open-open.com/lib/view/open1338083235214.html jQuery Mobile 框架是一个 JavaScript 库,您可以用它来轻 ...
最新文章
- Linux Kernel TCP/IP Stack — L1 Layer — Physical NIC
- java服务器面试_如何面试筛选出动手能力强的Java服务端程序员
- 程序员面试金典 - 面试题 17.11. 单词距离(multimap平衡二叉搜索树)
- 计算机主机接线视频教程,电脑主板跳线怎么接?电脑机箱与主板跳线接法图解教程...
- Linear Color Space 渲染时几点注意
- matlab随机数的生成,MATLAB随机数生成器
- java定时任务 时间_java 定时任务的执行时间表示-
- 公民个人信息保护方案汇总
- 操作系统的三个抽象概念
- 什么是视距传播(LOS propagation)及如何验证微波链路是否具有清晰的视线
- 十九个国内外主流的三维GIS软件
- 用python解决放苹果问题_放苹果
- 简化sqp唯一数据的逻辑
- mac无法连接手机进行调试解决方法
- Edge浏览器中不输oneTab的标签整理插件
- Linux常用命令——jwhois命令
- 2020校招面试之深信服
- 基于html的网页设计毕业论文,个人主页设计(网页设计毕业论文)
- R语言【列联表与独立性检验(皮尔逊卡方检验、Fisher 检验)】
- 阅读epub书籍很卡问题 解决
热门文章
- Nginx下配置小绿锁https
- [react] 写例子说明React如何在JSX中实现for循环
- React开发(191):ant design中inputNumber格式化
- Taro+react开发(79):taro生命周期setstate异步
- 前端学习(3275):js中this的使用四
- 前端学习(3129):react-hello-react之回调形式的ref的次数问题
- [css] border-radius:50%和border-radius:100%有什么区别?
- [css] 说说你对sass的嵌套规则的理解?
- 前端学习(1802):前端调试之事件伪类
- 前端学习(1695):前端系列javascript之问题解答