必须去收藏14个响应式布局的前端开发框架
前端开发并不是一个容易的工作,不仅需要掌握HTML、CSS和JavaScript,针对不同的浏览器版本和平台,还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行,前端开发变得越来越困难,且花费的时间更长。
本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。
使用这些前端框架,有如下好处:
- 跨浏览器。这一点已被证实。
- 一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持风格一致。
- 快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。
- 响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。
InK
Ink为一个界面工具包,用于快速开发Web界面,具有易于使用、易于扩展特点。它可以为构建布局提供解决方案,可以展示普通的界面元素,可以实现以内容为中心、对用户友好的交互方式。
- HTML&CSS:布局、导航、排版、图标、表单、提示框、表格
- JS:Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为(停靠、折叠、关闭)
- 其他:Sass Mixins
GroundworkCSS Beta
GroundworkCSS是一个基于Sass预处理器的开源项目 ,主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统,可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件,如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。
- HTML&CSS:网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示
- JS:导航、制表符(Tab)、提示框、Cycle2
- 其他:Sass Mixins
Ivory
这是一个灵活、强大的响应式Web框架,使Web开发更快速、更简单。
- HTML&CSS:网格、排版、表单、按钮、提示框、页码、面包屑导航(breadcrumb)、列表、表格
- JS:提示框、制表符(Tab)、切换开关(Toggle switch)、折叠
ZURB
Foundation由ZURB公司设计,ZURB是一家产品设计公司,位于加州坎贝尔。Foundation为最先进的响应式前端开发框架,它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。
- HTML&CSS:网格、布局模板、图标字体、响应式表格、SVG格式的社交图标、页码、面包屑导航(breadcrumbs)、侧导航、按键、排版、标签、提示框、面板、价格表、进度栏、表格、缩略图
- JS:下拉按钮、拆分按钮、转换开关、Flex视频、灯箱、下拉、响应式布局(通过转换图片大小来实现)、旅游导航、麦哲伦全局导航(Magellan Sticky Nav)、Orbit图片滑动幻灯片插件等
- 其他:可定制皮肤表单(Custom Skinned Forms)、SCSS Mixin
Grumby
Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器,利用它可以快速开发Gumby。
- HTML&CSS:网格、表单、按钮、导航、标签、Entypo图标
- JS:下拉、浮窗、制表符(Tab)、开关与转换(Toggles & Switches)
- 其他:可定制皮肤表单(Custom Skinned Forms)、SASS和Compass
HTML KickStart
该框架集合了HTML5、CSS和JavaScript,帮助开发人员快速开发Web产品。它覆盖了所有UI组件,同时也包含一些有用的JavaScript插件。
- HTML&CSS:网格、排版按钮、列表、表格、图标、面包屑导航、图片、表单
- JS:菜单、代码高亮插件、制表符(Tab)、幻灯片播放、表单验证
- 其他:CSS帮助文档
Maxmertkit
Maxmertkit拥有完整的文档,包含大量实例,并且提供了拖拽生成代码的功能。
- HTML&CSS:网格、布局、徽章、按钮、表单、图标、标签、菜单、进度栏、表格、下拉、工具提示
- JS:按钮、旋转木马、通知、弹出框、滚动条、制表符(Tab)
- 其他: Sass、Coffee脚本语言
Twitter Bootstrap
大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件,Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。
- HTML&CSS:网格、布局、排版、编码、表格、表单、按键、图片、图标、按钮组、导航、面包屑导航、页码、标签、徽章、缩略图、提示框、进度栏
- JS:模态窗口(Modals)、提示效果(Tool Tips)、“泡芙”效果(Popovers)、滚动监控(Scrollspy)、旋转木马(Carousel)、输入提示(Typeahead)等等。
- 其他:定制器(Customizer)、 LESS CSS
Skeleton
Skeleton 是一个小的JS和CSS文件集合,可帮你快速开发漂亮的网站,适合各种屏幕设备,包括手机。Skeleton基于960 Grid开发,是一个UI框架。
- HTML&CSS:GRid、排版、按钮、表单、媒体查询(Media Queries)
Kube
Kube是一款最小化的,支持响应式的前端框架,包括一个简洁的CSS文件,用于方便地创建响应式布局,包括了两个JS文件来完成Tab以及页面的按钮操作。
- HTML&CSS:排版、网格、表单、表格、按钮、导航、图标
- JS:按钮、制表符(Tab)
- 其他: LESS CSS
Helium
Helium是一个前端响应式Web框架,使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation,事实上,Helium使用了两者不少的代码。但与这两个框架不同的是,Helium设计更加轻量级,而且更容易修改。Helium只有30KB左右,而Bootstrap有100KB,ZURB有200多KB。
- HTML&CSS:网格、按钮、排版、表单
- JS:下拉、表单验证
- 其他:Sass、Compass
The Markup Framework
Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。
- HTML&CSS:布局、网格、排版、表单、按钮、面包屑导航、导航列表、导航菜单
- JS:没有JavaScripts,只有单纯的CSS
Topcoat
TopCoat是一套免费的开源UI元素类库,整套类库不使用任何JavaScript,而是使用CSS和HTML来生成。
- HTML&CSS:图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮
- JS:没有JavaScripts,只有单纯的CSS
PureCSS
Pure是一个相当小的框架,压缩及最小化后仅有5.7KB。它没有使用任何JavaScript,只是HTML和CSS。该CSS框架为响应式布局,采用模块化结构,每个模块的样式可以单独使用。
- HTML&CSS:网格、排版、表单、按键、表格、菜单
- JS:没有JavaScripts,只有单纯的CSS
- 其他:程序皮肤制作工具(Skin Builder)、YU 库。
结论
根据你的需要,选择可以与设计相匹配的框架。我们不应该根据框架来构建网站,因为它会很大程度上限制设计者的思维。
如果前端设计/布局不是那么重要,那么我们可以选择使用某一框架。(编译:陈秋歌/责编:夏梦竹)
本内容转自虾米站长,更多关于前端内容,请查看http://www.xiamiz.com。
转载于:https://www.cnblogs.com/joboxs/p/3551914.html
必须去收藏14个响应式布局的前端开发框架相关推荐
- Skeljs – 用于构建响应式网站的前端开发框架
skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...
- css响应式布局_Web前端新手怎么入门 如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
- 20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器 二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...
- 到底什么是响应式布局,响应式布局如何去写
即第一个问题--如何解决浏览器的兼容性被我们处理了之后,我们开始学习,如何解决响应式布局,到底什么是响应式布局 其实响应式布局.说的通俗点,就是浏览你写的网站或者说页面的容器不同,大小不同,有人用手机 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 关于CSS3实现响应式布局的一些概念和术语
响应式布局也被应用到网站前端开发中,在国内这一词想必是非常火吧,那网站为什么要使用响应式布局呢? 原因和其他创意性的生活用品基本上是一样的,处于对人力物力财力的节省和对生活富有诗意的一种追求. 在人力 ...
- 【探索HTML5第二弹05】响应式布局(中),一步一步响应式布局
前言 前天初步探究了一次响应式布局,虽然花了一天功夫,做出来的东西还是不行,在此我还是认为要做响应式布局设计应该先行,应该先制作3个以上的设计图出来,但是对于手机来说,图片流量也是个问题,但是这个我们 ...
- CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)
随着宽屏的不断普及,CSS3出现了@media媒体查询技术 一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
- bootstrap响应式布局之阿里百秀
响应式布局 移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局 响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
最新文章
- 再见了Excel,我有Python了,不用天天加班了
- AI综述专栏 | 神经科学启发的人工智能
- spring开发_Spring+Struts2
- supersu二进制更新安装失败_vcpkg更新及产品路线图
- 因特网使用期限_Internet死亡时使用PC的其他方式
- 请对比html与css的异同,css2与css3的区别是什么?
- IntelliJ IDEA 设置代码检查级别
- ajax请求php省略后缀,如何在PHP中更安全地处理Ajax请求?
- VB.NET 教程_02_常见对象
- 解决Android手机人民币符号¥只显示一横的方法
- 校园导航小助手—课程设计
- mib文件在服务器的什么位置,MIB文件简单分析
- 职场思想分享009 | 一个人对待工作的态度决定其成绩的多少?
- 阿里面试题 ——输入一个字符串,输出所有的排列
- mapboxgl 加载常用图层汇总
- 甜甜用计算机计算1050,NVIDIA GTX 1050/1050 Ti发布:75W功耗、取代GTX960
- 网络安全状况月度报告-2019年6月
- 【BUUCTF】reverse2
- 论文阅读:DeepDDG:使用神经网络预测蛋白质点突变的稳定性变化
- 多多情报通:拼多多宝贝排名靠前为什么没流量和访客?