15款帮助我们创建响应式布局的优秀前端框架

  响应式的 Web 设计方法的目的是制作一个更加灵活的网站,能够为用户提供最佳的视觉体验——方便阅读和导航,只需最少的调整就可实现缩放和滚动,支持更广泛的设备,从移动电话到手持设备到台式电脑。下面是一个优秀的网格工具清单,能够帮助更好的创建响应式布局。

 

Foundation

数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架。Foundation 是第一个响应式、语义化和移动优先的开源框架。最新发布的 Foundation 5 是最先进的响应式前端开发框架,在构建产品和网站的各个方面都更快。

 

Gumby

Gumby 框架是一个基于 SASS 的灵活的,响应式的 CSS 框架。可以借助其灵活,响应式的网格系统和 UI 套件快速创建逻辑的页面布局和应用程序原型。基于强大的 Sass 构建,Sass 是一个功能强大的 CSS 预处理器,这使我们能够快速的开发自己的 Gumby,并为您提供新的工具,让你能够在 Gumby 的框架基础上快速定制。

 

Ivory

IVORY 是一款轻量的前端开发框就。IVORY 基于12列的响应式网格布局,包含表格,按钮,表格,分页,拨动开关,工具提示,手风琴,选项卡等网站中常用的组件和样式。 

 

Ink

Ink 可以帮助你快速创建响应的 HTML 电子邮件,可工作在任何设备和客户端。这个 CSS 框架帮助您构建可在任何设备上阅读的 HTML 电子邮件。曾经需要你兼顾各种邮件客户端的日子一去不复返了,Ink 的灵活性和稳定性让你的读者可以查看到你精致的电子邮件。 

 

Cardinal

Cardinal 是一个适用于移动项目的 CSS 框架,包含很多有用的默认样式、矢量字体、可重用的模块以及一个简单的响应式模块系统。Cardinal 提供了一种在多种移动设备上实现可伸缩的字体和布局的新方法,值得关注。 

 

Extra Strength Responsive Grids

另外一个 CSS 框架,用于解决在响应布局中的各种问题。该框架是完全专注于网格,使用基于百分比的宽度调整方法。对于较小的屏幕,除了使用较少的列,元素可以灵活的调整大小。

 

YAML

YAML 是一个模块化的 CSS 框架,是大家熟知的另一个多列布局框架。关于这个特殊的 CSS 框架的最好的部分是它兼容几乎所有的浏览器。

 

960 Grid System

960 Grid System 是有点历史的网格框架,以帮助你更好地组织你的网站开发流程。960 网格框架提供你两个不同的包,分别是12布局和16列布局,可以直接使用。 

 

Groundwork

Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包。使用 Groundwork,您可以快速构建 Web 应用程序。Groundwork 拥有一个令人难以置信的灵活,可嵌套,流体的网格系统,是 Github 上的开源项目。

 

Golden Grid System

Golden 网格系统把重点放在了基于网格的设计(而不是一个完整的 CSS 框架)。Golden 网格使用左浮动的方法构建网格,而不是位置。

 

Responsive Aeon

ResponsiveAeon 一个基于 HTML5 & CSS3 的响应式框架,用于快速布局。它有一个基于12列,总计1104px宽的网格系统,提供了一个非常容易理解的用法,只有3个基类。

 

Furatto

Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站。这个框架采用流行的扁平化设计和响应式设计。除了布局和网格之外,所有的主要元素都有预定义的样式,例如按,表格,表单等,而且还有各种各样的 JavaScript 组件,像模态弹窗,工具提示等等。

 

Grid Forms

Grid forms 是一个前端库,用于构建基于网格形式的布局。网格形式密集形式的设计用于经常需要输入大量的数据的应用程序

 

Skeljs

skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序。让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统。

 

Bourbon Neat

Bourbon Neat 是一个开源的流体网格框架,建立在 Bourbon 的基础上,目的是让网页布局足够简单并且能够灵活定制。使用 Sass 3.2,它能够很容易建立响应式的布局。

 

您可能感兴趣的相关文章

 

英文链接:50 Grid Tools for Responsive Web Designs

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《15款帮助我们创建响应式布局的优秀前端框架》
文章链接:https://www.lbyxlz.com/15%e6%ac%be%e5%b8%ae%e5%8a%a9%e6%88%91%e4%bb%ac%e5%88%9b%e5%bb%ba%e5%93%8d%e5%ba%94%e5%bc%8f%e5%b8%83%e5%b1%80%e7%9a%84%e4%bc%98%e7%a7%80%e5%89%8d%e7%ab%af%e6%a1%86%e6%9e%b6/
分享到: 生成海报

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活