Bootstrap

最受欢迎的CSS framework

Materialize

遵循Google Material Design实作的CSS framework

• 相关资源介绍

• Material design: 官方的Material Design介绍
• Google Material Design 正体中文版: 社群翻译的Material Design繁体介绍
• Material Design Lite: Material Design Lite是另外一款以Material Design质感开发的UI framework，另外也有很酷的Customize功能可以用
• Material UI: Material Design的React元件版本
• Angular Material: Material Design的AngularJS版本

Office UI Fabric

打造与Office365相同样式的UI框架
前面有提到，官方网站的范例程式主要都是React元件，因此如果要使用React的版本，可以直接到网站上去看http://dev.office.com/fabric 。
另外也提供了AngularJS的元件版本也可以从以下网址进入http://ngofficeuifabric.com/。

Animate.css

1秒钟为你的网站加上动画特效

WOW.js

动画很炫，也要看得到才行啊！

loader.css

就算loading中，也要很美观才行

类似资源

• CSSPIN - CSSPIN是一个著重在"旋转"这种效果的loading library，虽然效果数量比较少，但色彩变化比较丰富。
• SpinKit - SpinKit也是一个把效果放在"旋转"这件事情上的library，但能呈现的特效数量更多。
• Ladda - 表单按钮按下后，一般除了把按钮disabled来让他无法重複发送以外，透过ladda也能让表单送出时锁定的按钮具有更丰富的变化，非常适合用在ajax表单上。
• CSS Loader - CSS Loader在呈现loading时会同是进行block ui的动做，防止画面上的任何变动，同时他的呈现方式也很有创意！

CKEditor

最好用的Web版文字编辑器
CKEditor是一款历史悠久、功能完整、扩充性强却简单易用的文字编辑器，在GitHub上也有超过3000+个stars，可以说是只要有文字编辑器的需求，CKEditor绝对会是优先选择。个人觉得它具有以下几个很重要的特色：

• 容易使用：在没有特别需求的情况下，CKEditor的使用可以说是超简单的，稍后会简单介绍。
• 支援多语系：CKEditor支援超过60国的语系，基本上不用担心语系的问题。
• 产出的HTML非常乾淨：许多文字编辑器都有著共通的问题，就是产出的HTML容易变得很杂乱，而CKEditor产出的HTML可读性一般都很高，甚至可以自订产出的规则。
• 可客製化：我们可以非常容易的调整CKEditor的skin、toolbar等，让它更加符合需要。
• 外挂丰富：由于是老牌文字编辑器，相关的外挂自然超丰富的，透过这些外挂，要应付更奇耙的需求也不一定是件麻烦事了。
• 其他：欢迎直接到网页上去看看 http://ckeditor.com/features 。

类似资源

• TinyMCE: TinyMCE也是一款老牌的文字编辑器，功能一样强大，也非常容易上手。
• Summernote: Summernote是以Bootstrap风格为基础开发的编辑器，功能比较阳春，但该有的功能也都有了，如果使用Bootstrap为主要风格，希望连编辑器也维持一致风格的话，可以考虑使用看看。
• Draft.js: Draft.js是一款以React开发的编辑器，预设功能很阳春，但也有不错的扩充能力，喜欢使用React的朋友可以试试看这款Component。

linkify.js

自动加上超连结的小帮手
在开发CMS相关系统时，有一个状况也是常常遇到的，在张贴内容时加入一个网址，但没有主动补上超连结，对于浏览内容的人来说就会稍微有点不方便，因此今天要介绍的linkifify.js，就是一款简单易用、快速帮助你在内文中加入超连结的好帮手！

类似资源

• Autolinker.js: Autolinker.js是另一款功能强大的library，它直接将前面提到的hashtag和mention这类的功能都做在一起了，但也因此档案会比较大一点。

highlight.js

前端也能让程式码highlight显示highlight.js是一款负责让程式码highlight的JavaScript library，5 支援168种程式语言，而且有77种样式可以选择。虽然看起来很丰富，但老实说它的应用范围比较小，只能用在像是IT帮帮忙、GitHub这类的技术社群上，或是使用的blog不支援highlight时想要自己挂上highlight功能等等，才会用到这个library。不过不管现在是否用得到，先学起来当收藏也是不错的！

jquery.qrcode.js

只靠前端也能产生QRCode现在QRCode已经越来越流行了，从最简单的扫描QRCode来取得网址，到利用QRCode完成报到程序等等；现在生活周遭已经到处都有机会看得到QRCode了，因此身为前端工程师，势必会有越来越多机会在前端打上QRCode的图片，今天就来介绍一款简单易用的QRCode library吧！

类似资源

• Browser Console QRCode：Browser Console QRCode非常有趣，它不是用来呈现在HTML上的，而是放在浏览器的开发人员工具(F12)中的，也就是按下F12进入开发人员工具才看得到的QRCode，拿来当作公司秘密徵才(或小道消息?)的管道应该是个不错的选择XD

FontAwesome

最受欢迎的Icon Font - 超丰富图示字型
FontAwesome可以说是目前最受欢迎的Icon Font(也就是把icon图示放到字体使用) css library，具有丰富的图示(675+)可用，也有许多实用的API，因此在前端界可以说是无人不知无人不晓(什麽？你不知道？那你现在可以跟上潮流了XD)。在最近的FontAwesome5的募资甚至突破了100万美金！由此可见其巨大的影响力。

类似资源

• WeatherIcons：一款专门以天气相关的icon为诉求所产生的library，包含了222+种icon，除了天气icons以外，还有时钟、方位等等icons可以使用。
• IonIcons：从知名的App框架Ionic撷取出来的icons，也有数百种的icons可以选择，由于本来就是为了打造mobile ui而製作的icon，因此非常适合拿来製作web ui。
• Themify Icons：具有320+种icon可以使用，icon的线条都比较细，喜欢这种风格icon的可以参考看看。
• Material Icons: Google官方遵循Material Design所设计出来的icons，喜欢Material Design风格的朋友可以使用款icon font；也有提供svg和png格式下载。若只需要特定几个icons，还可以节省点空间。

toastr.js

美化你的通知讯息,一般来说在前端要跳出通知讯息，最简单的方式莫过于加个alert了，但使用alert其实对于UX来说并不是件好事，因为它会影响到user的操作行为，而且不同浏览器的显示方式可能会有所不同，更不用说有些浏览器还可以在alert重複出现时，选择把它关掉不显示，当然这也是为了避免同样的绪息一直出现变成画面根本无法使用，但也让alert变成了不稳定的未爆弹；因此像是toastr.js这类的library就可以帮助你打造美观的提示讯息，同时也不用担心影响到user的画面操作。

类似资源

• HubSpot Messenger：比起toastr.js配色比较搭配bootstrap，这款属于比较深色的样式，喜欢深色风格的朋友可以玩玩看。

SweetAlert

变化万千的Dialog library
是比起notify更具有互动效果的dialog library，也就是透过dialog的方式，来让跟user的互动有加分的效果

类似资源

• Bootbox.js：BootBox.js是一款以bootstrap的modal(也就是dialog)为基础设计出来的library，可以让你省去使用bootstrap modal前要加入一堆HTML程式码的麻烦
• Vex：Vex是一款很炫丽的dialog library，可以一次开多个dialog，弹性也很高，且档案只有约5.5kb。
• SweetAlert for Bootstrap：SweetAlert for Bootstrap把原来的SweetAlert加上了更符合bootstrap配色的样式，若本来就有在使用bootstrap的话，非常适合搭配使用。
• ngSweetAlert：SweetAlert的AngularJs版本。

Reveal.js

用前端技术完成酷炫简报大家都有製作投影片进行简报的经验，以製作投影片来说最主要的软体大概非PoertPoint莫属了；而想要使用PowerPoint做出绚丽的简报没有一番功夫可是做不到的...不过，我们可是前端工程师阿！如果有一款简报软体，可以使用我们熟悉的前端技术来完成，不是很棒的一件事情吗？而Reveal.js就是这样一款好用的简报框架。

类似资源

• Deck.js：也是一款功能强大、扩充性强的简报框架，小缺点是相依于jQuery及Modernizr。
• fullPage.js：也是非常强大的简报框架，同样相依于jQuery，不过最特别的是他提供了Wordpress的外挂，以及对Reace/Angular 1.x/Angular 2.x的支援，在设计上能更加方便。

Intro.js

把建好的UI直接变成说明文件,在设计系统的时候，常常因为需求複杂或庞大，UI也会越来越複杂，变得不直觉、难以操作；这时候有个操作手册就变得非常重要，但是前端的变化速度又非常快，往往导致操作手册跟不上UI的变化，这时如果有个响导能带著你走过所有步骤，又不用担心随著UI的改变而无法使用，那真是再好不过了！

类似资源

• Focusable：不具有像Intro.js的step by step特性，但可以很容易随时帮助user把焦点放在某个位置上。
• BootstrapTour：加上bootstrap风格的，非常具有弹性，但使用上就比较繁琐一点。

placehold.it

规划中网站用来暂时放图片的线上服务.placehold.it跟过去介绍的library都不太一样，它是一个线上服务，功用是在网站规划中还只是雏型阶段时，暂时用来表示这裡有一张图片的工具。

类似资源

• temp.im：跟placehold.it使用方式基本上完全一样，只是网址不同而已。
• lorempixum：除了图片大小外，也以选择不同分类的图片、彩色\灰阶；同时还有一个产生器可以直接使用。
• Dummy Image：一样有个产生器可以使用，网站下方有很多样板可以参考。
• placekitten：所有图片都是可爱的猫，爱猫一族可以考虑用这个，在雏型阶段就有好心情XDD。
• Unsplash It：除了有大量的图库可以使用，也内建不少滤镜可以直接套用。

Dropzone.js

上传档案的好帮手.Dropzone.js可以帮助我们使用更加直觉简单的方式，来完成上传档案的功能。

类似资源

• FineUploader：功能比Dropzone.js更加强大，甚至能直接支援上传到Amazon S3或Azure Blob Storage，当然相对的设定也稍微比较複杂。
• jQueryFileUpload：属于jQuery的外挂，使用上也不算太複杂。
• Bootstrap File Input：相依于Bootstrap及jQuery，功能不少，提供的DEMO也相当多元，对于已经使用bootstrap的开发人员来说可以达到一致的UI效果。
• Bootstrap Filestyle：基本上不算是上传用的library，主要是用来美化原本的上传按钮，对于只需要基本的上传按钮，却又觉得上传按钮不好看(或不同作业系统UI不一致)时，做为美化使用。

GitGraph.js

画出精美的Git分枝树状图.GitGraph.js是一款用来把Git的分枝树状结构视觉化的JavaScript library，它提供的API与Git基本常用的指令完全相同，因此我们可以把使用Git的commit、branch等流程直接透过GitGraph.js的API来显示出来。当然啦除非你是要开发Git相关的前端GUI否则其实可能用不太到，不过其实我们可以把这种分支树状的概念放到一些需要管理流程的系统上，让流程的显示更加明确。

Dragula

一步完成Drag & Drop.Dragula是一款协助前端开发人员完成拖曳(drag & drop)功能的library，透过Dragula我们可以轻鬆完成使用滑鼠进行清单的排序、移动位置等等功能

类似资源

• Sortable：另一款简单易用的drag & drop library。
• Nestable：相依于jQuery，预设就直接支援巢状的清单，同时位于取得排序资料的方式也比较直觉易懂。

screenfull.js

全萤幕显示就是这麽简单,就是用来减少Fullscreen API在不同浏览器之间实作差异的library。

FullCalendar

轻鬆完成专业级行事曆.行事曆功能在前端开发来说也是很常见的一种需求，例如透过行事曆来追踪重要活动、代办事项等等；

Onsen UI

专注于mobile web的UI框架,之前我们曾经就绍过Bootstrap这类的UI Framwork，目的是快速打造具有基本且通一的UI，并且支援RWD，不管是desktop或mobile浏览器都可以使用，而有时候我们可能不需要顾虑这麽多，只需要专注在mobile平台就可以了，这时候Onsen UI就是非常适合使用的UI Framework了。

类似资源

• Framework7：另一款以mobile web为主的UI Framework，内建的Component比Onsen UI多，缺点是不像Onsen UI可以用更直觉的web component方式来使用。

Awesomplete

AutoComplete就这麽做.今天要介绍一个autocomplete的library - Awesomplete，这是由一款功能强大但档案小又容易使用使用的library，透过Awesomplete我们可以轻鬆地完成autocomplete功能，让user在输入文字时自动给予提示。

类似资源

• typeahead.js：由Twitter开发的autocomplete library，虽然没有像Awesomplete可以连JavaScript都不用写，但使用上也很容易，且直接支援ajax查询(当然后端要对应配合)。

Switchery

Switchery是一款具有iOS风格的开关library，透过Switchery我们可以快速的把一般的checkbox包装成具有iOS开关的风格，在一些需要用开/关来表示状态的情境能比使用checkbox更加直觉。

X-editable

浏览、新增、修改三个愿望一次满足.在设计CMS之类的系统时，常常会需要一个表单和一个浏览资料的页面，以新型新增、修改和查询的工作，不过画面排版通常会非常类似，只差在表单有额外的表单控制项，而浏览页面就是单纯的文字而已，但当需要更新排版时，就需要两个页面都同时修改，非常不方便；这时候透过X-editable，就能够在浏览的页面同时编辑资料萝。

ClockPicker

更直觉的时间选择器,在web app中遇到需要选择日期、时间需求的时候，日期通常很简单，大部分的UI元件都可以用表格做出一个简单的日曆来选择，而时间通常就比较没那麽直觉，多半都是用个下拉选单选择时间，或是直接输入；而今天要介绍的ClockPicker，则是一个採用更直觉的方式，让我们能直接在时钟上选择时间的酷炫library。

类似资源

• Bootstrap Material DatePicker：搭配了Material Design的样式，本身就是个完整的日期/时间选择器，选择时间的部分虽然也是时钟，但操作上比ClockPicker难使用一些。

jQuery Knob

酷炫的旋钮式数字选择器,jQuery Knob是一款让我们能够用旋钮这种与众不同的方式输入数字的jQuery外挂，除了可以确保user输入的一定是数字以外，也可以简化user选择/输入数字的过程。

PDF.js

前端也能轻鬆显示PDF,如果要说有一个放诸四海皆准的通用文件格式，那麽想当然一定就是PDF了，虽然PDF是一个标准的文件规格，但要浏览PDF档还是需要透过安装软体来显示的，而今天要介绍的PDF.js就是一款可让我们直接在web上显示PDF档的JavaScrtipt library！

jsPDF

前端直接产生PDF也没问题！可以在前端直接产生PDF档的神奇程式－jsPDF。

Chart.js

轻鬆完成资料视觉化
随著大数据越来越热门，资料视觉化也变得越来越重要，能够以简单明瞭的图像显示数据的意义，对于决策者进行决策有非常大的帮助，过去要製作这些资料图表大多必须依靠Excel这类软体来绘製，但灵活度不高，也难以跟资料库连接处理，更别说不太好看了。所以今天就来纪绍一个前端资料视觉化的library - Chart.js

类似资源

• D3.js: D3.js是一款自由度超高，功能超强的资料视觉化library，透过D3.js我们可以很灵活的将资料与HTML Canvas绑在一起，D3.js预设不包含任何种类的统计图表，因此自由度虽然高，但也需要更多的程式码来完成想要效果，当然比起不靠任何library还是简单得多了！

• C3.js: 以D3.js为基础发展出来的library，内建多种统计图表，可以用更快的方式完成基本的图表，又具有一定程度D3.js的灵活性。

• morris.js: 相依于jQuery且支援的图表类型也不多，但也有参考的价值。

• jVetor Map: 跟前面介绍的统计图表不同，jVectorMap是世界地图的数据视觉化！例如我们可以透过jVectorMap显示商品在世界各国的销售情形；或是访客的流量来源大多来自什麽国家等等，算是非常专门的library。

• Highcharts: 支援的图表类型超丰富，更特别的是它还支援股票的K线图，对于时序型的图表能更加清楚的显示，还有数十种plugins可以使用，算是非常完整强大！对于个人使用是没什麽问题，但对于商业软体则需要购买license，但对于需要完整图表及技术支援的公司来说是不错的选择萝。

• JqPlot
  jqPlot是一个jQuery绘图插件，可以利用它制作漂亮的线状图、柱状图和饼图。
  jqPlot支持为图表设置各种不同的样式。提供Tooltips，数据点高亮显示等功能。

• RGraph
  RGraph是基于HTML5 canvas标签的HTML5 canvas图形库。

• dygraphs
  dygraphs 是一个开源的Javascript库，它可以产生一个可交互式的，
  可缩放的的曲线表。其可以用来显示大密度的数据集（比如股票，气温，等等），并且可以让 用户来浏览和解释这个曲线图。

• CanvasXpress
  CanvasXpress是一个基于HTML5 canvas标签实现的JavaScript图表类库，
  它能够支持线性图、柱形图、饼图和热点图等多种常见的图表类型。
  它所生成的图表交互性很强，鼠标放 上去时会动态显示值。除此之外，
  它也具有相当高的可定制性，可设置图表的文字、颜色和要显示/隐藏的元素等。

• gRaphael
  gRaphael 能够为你的网站创建漂亮的表格，它基于Raphael图形库,它的演示Demo中有各种静态与交互的表格展示。
  它支持Firefox 3.0+, Safari 3.0+, Opera 9.5+ and IE 6.0+.

• Flotr2
  Flotr2 是一个用于绘制 HTML5 图形和图表的开源 JS 库，是 flotr 的分支，
  但移除了 Prototype 的依赖以及其他方面很多改进。

• AwesomeChartJS
  Awesome Chart JS 是一个Javascript生成图表的类库，
  它利用了 HTML5 的 canvas 标签来创建统计图表。
  此类库就是为了减轻开发者的工作量，使用它只需书写几行代码便能生成漂亮的图表。
  *echart
  这个echart其实是在canvas类库zrender的基础上做的主题图库，优点有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游，全中文文档非常过瘾。