現代 Web 開發在將體驗和功能做到極致的同時，對于美觀的追求也越來越高。在推薦完圖形庫之后，再來推薦一些精品的獨立 UI 組件。這些組件可組合在一起，形成美觀而交互強大的 Web UI 。
給 Web 開發人員推薦的開源圖形庫 —— 2D/3D
給 Web 開發人員推薦的開源圖形庫 —— 動畫
給 Web 開發人員推薦的開源圖形庫 —— 數據可視化
下面將針對布局（Layout）、Icon（圖標）、Progress（進度）、Button（按鈕）、Picker（選擇器）、Accordion（折疊）、Input（輸入）、Overlay（重疊）、Content（內容/目錄）、Editor（編輯）、Widget（掛件）等分別做一些推薦整理。由于篇幅有限，將分兩期發布，歡迎保持關注。
一、布局
1、Split.js：https://www.oschina.net/p/split-js
一個輕量級的 JavaScript 工具，用于創建可調整的分割視圖或者窗格，gzip 大小僅 2 KB。視圖可以水平或者垂直分割，沒有附加的開銷和窗口，使用純 CSS 進行調整。同時，還保證了與 IE9 和 IE8 ，以及 Firefox / Chrome / Safari / Opera 等主流瀏覽器的兼容性。
Demo 點此查看：http://nathancahill.github.io/Split.js/
請點擊此處輸入圖片描述
2、Bricks.js：https://www.oschina.net/p/bricksjs
一個快速的布局堆砌器，不需要 HTML 標記或 CSS 樣式表即可完成布局。功能強大，配置文件可讀。
Demo 點此查看：http://callmecavs.com/bricks.js/
請點擊此處輸入圖片描述
3、masonry：https://www.oschina.net/p/masonry
一個老牌布局框架，已開發和維護 8 年，擁有自己的描述語法，采用優雅的鏈式語法封裝自動布局。它可以根據可用的垂直空間將元素放置在最佳位置，類似于在墻壁上砌磚的經驗豐富的泥水匠。
Demo 點此查看：https://masonry.desandro.com/
請點擊此處輸入圖片描述
4、React-Grid-Layout：https://github.com/STRML/react-grid-layout
不同于前面，這是一個 React Grid 布局系統，不需要 jQuery。它是響應式的，并且支持斷點（breakpoints）。斷點布局可由用戶提供或自動生成，可隨意拖動和調整大小。
Demo 點此查看：https://strml.github.io/react-grid-layout/examples/0-showcase.html
請點擊此處輸入圖片描述
二、圖標
1、Feather：https://www.oschina.net/p/feather-icons
一款簡單漂亮的開源圖標集，強調功能、一致性和簡單性。主要設計的使用范疇為應用系統、媒體控制、位置、天氣、箭頭、徽標等，均為以線條為主的極簡化設計。圖標遵循 24x24 Grid 設計。
Demo 點此查看：http://feathericons.com/
請點擊此處輸入圖片描述
2、Material Icons Guide：http://google.github.io/material-design-icons/
Google 開源的 Material Design 圖標集，在 Web 應用，安卓和 iOS 設計中均適用。包含用于媒體播放、通訊、內容編輯、連接等等常用的圖標，目前數量已超過 900 個。
Demo 點此查看：http://material.io/icons/
請點擊此處輸入圖片描述
3、Bytesize Icons：http://danklammer.com/bytesize-icons/
一個輕量級 style-controlled SVG 圖標集，每個圖標都是遵循 32x32 Grid 進行手工編碼，并使用 SVG 筆畫，以實現最大靈活性。這意味著你可以調整顏色、尺寸、量級，以及是否希望邊緣為圓形或正方形。
Demo 點此查看：http://danklammer.com/articles/svg-stroke-ftw/#give-it-a-spin
請點擊此處輸入圖片描述
三、進度
1、NProgress：https://www.oschina.net/p/nprogress
應用于復雜網頁的細長進度條，非常輕巧，使用便捷，靈感來源于 Google、YouTube 和 Medium 。它也是極細的納米級進度條，用逼真的細線條動畫讓用戶看到網頁正在發生的事情。
Demo 點此查看：http://ricostacruz.com/nprogress/
請點擊此處輸入圖片描述
2、nanobar：https://www.oschina.net/p/nanobar-js
非常輕量級的進度條，gziped 大小僅約 699 字節。就是很直接的提供一些方法來控制進度條的當前進度。
Demo 點此查看：http://nanobar.jacoborus.codes/
請點擊此處輸入圖片描述
四、按鈕
1、Ladda：https://www.oschina.net/p/ladda
一款把加載提示效果集成到按鈕中，以彌合行動和反饋之間的時間間隔，提供更好的功能使用體驗的庫。主要用于在用戶點擊提交之后，即時提供反饋，讓他們知道瀏覽器正在處理用戶提交的任務。
Demo 點此查看：http://lab.hakim.se/ladda/
請點擊此處輸入圖片描述
2、Buttons：https://www.oschina.net/p/buttons
一個高度可定制、開箱即用的移動 web 和桌面 css 按鈕庫，基于 Sass 和 Compass 框架構建，包含各種形狀、顏色、邊框、2D/3D 、陰影、發光、下拉、分組、堆疊等不同類型的按鈕。
Demo 點此查看：http://unicorn-ui.com/buttons/
請點擊此處輸入圖片描述
五、選擇器
1、Pikaday：https://www.oschina.net/p/pikaday
一個清爽簡潔的 JavaScript 日期選擇器，輕量、無依賴，CSS 模塊化。
Demo 點此查看：https://dbushell.com/Pikaday/
請點擊此處輸入圖片描述
2、React Color：http://casesandberg.github.io/react-color/
Sketch、Photoshop、Chrome、Github、Twitter、Material Design 等多種顏色選擇器合集，包含 13 種不同的選擇器，也可以使用提供的標準組件來創建自己的組件。
Demo 點此查看：https://casesandberg.github.io/react-color/
請點擊此處輸入圖片描述
