必须去收藏14个响应式布局的前端开发框架

时间 2019-12-09

标签必须收藏响应布局前端开发框架繁體版

原文原文链接

前端开发并非一个容易的工做，不只须要掌握HTML、CSS和JavaScript，针对不一样的浏览器版本和平台，还须要了解如何设计出跨平台的网站。现在随着响应式设计的流行，前端开发变得愈来愈困难，且花费的时间更长。css

本文收集了14个响应式前端开发框架，能够帮助前端开发人员大大简化开发过程。针对每一个框架，文中均指出了它所包含的UI组件及JavaScript插件。几乎全部的框架都采用了响应式网格系统。html

使用这些前端框架，有以下好处：前端

跨浏览器。这一点已被证明。
一致性。UI组件，如导航、按钮、标签、表单、下拉框、表格……，在设计上保持风格一致。
快速开发。你能够快速、容易地构建布局。这些框架都配有详细的说明文档。
响应式。全部CSS组件及JavaScript插件能够很好地从桌面过渡到移动设备上。

InKgit

Ink为一个界面工具包，用于快速开发Web界面，具备易于使用、易于扩展特色。它能够为构建布局提供解决方案，能够展现普通的界面元素，能够实现之内容为中心、对用户友好的交互方式。github

HTML&CSS：布局、导航、排版、图标、表单、提示框、表格
JS：Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为（停靠、折叠、关闭）
其余：Sass Mixins

GroundworkCSS Betabootstrap

GroundworkCSS是一个基于Sass预处理器的开源项目，主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统，能够建立适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件，如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。浏览器

HTML&CSS：网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示
JS：导航、制表符（Tab）、提示框、Cycle2
其余：Sass Mixins

Ivory前端框架

这是一个灵活、强大的响应式Web框架，使Web开发更快速、更简单。框架

HTML&CSS：网格、排版、表单、按钮、提示框、页码、面包屑导航（breadcrumb）、列表、表格
JS：提示框、制表符（Tab）、切换开关（Toggle switch）、折叠

ZURBide

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

该框架集合了HTML五、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框架，使用HTML五、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。