高品質的網頁設計需要直覺和使用者友好的界面，而且螢幕上的元素也起着非常重要的作用。Web 設計師不斷地尋找優秀代碼的集合，希望能提升工作效率。但找到合适的工具庫并不總是那麼容易的。網絡上有太多的資源可以使用，而且也是免費的，是以很難判斷哪些資源比較好。這就是精心搜尋并編寫這個最好的庫清單的原因。
無論是希望建立一個視覺上吸引人和功能強大的布局，還是需要在表單和其他區域添加螢幕上的規則和驗證，你都會喜歡這個集合。這裡列出的庫是由具有豐富網頁設計經驗的專家建立的，這些庫不僅是經驗豐富的設計師的優秀工具，也是适用于初學者的好工具。這個集合将會幫你節省很多時間，來看一看吧！
0. Buefy
适用于 Vue.js 項目的輕量級 UI 架構，使用流行的基于 flexbox 的 CSS 庫 Bulma 建構。它具有典型的 Web APP 所需的全部元件，包括像模态框、吐司和通知這樣的動态元素，使開發者可以快速添加任何使用者界面到現有的 Vue.js 項目。
1. HR.js
零依賴庫，用于在 DOM 中以程式設計的方式高亮顯示并替換字元串，HR.js API 的使用不能再簡單了 — 隻需使用 CSS 選擇器來定位目标文本的父 HTML 元素，選擇要突出顯示的單詞，設定背景顔色，然後就完成了！
2. React VR
React VR 是為 VR 應用而建立的架構，運作在 Web 浏覽器中。它将現代 API（例如 WebGL 和 WebVR）與 React 的聲明能力結合起來，通過各種裝置提供适用于消費者的體驗。
3. Tippy.js
輕量的純 JavaScript 動态提示工具插件庫。它提供了大量的不同懸停效果和超過 20 個可定制的選項。Tippy.js 是超級輕量的，并且具有相當不錯的浏覽器相容性，當不被支援時會自動回退到正常的
title
屬性。
4. Barba.js
沒有依賴關系的 JavaScript 庫，用于在單頁面應用程式的視圖之間建立平滑的過渡。該邏輯是圍繞PJAX（push state AJAX）建構的，它會檢查所有有效的 URL，阻止它們的正常行為，并通過 XMLHttpRequest 加載新頁面。Barba 還會確定通過使用 Push State API，使得狀态的更改可在頁面的 URL 中正确反映出來。
5. UIkit
優秀的 CSS 和 JavaScript 前端架構，包括 SVG 圖示字型和幾十個元件。無論是外觀還是作為一個架構，UIkit 的設計都非常好，它具有統一的樣式，易于記憶的 API，許多自定義選項和有用的修飾符類。文檔也是寫得十分好。
6. Haul
Haul 是用于開發 React Native 應用程式的指令行工具。它可以直接替代 React Native packager，提供更好的 webpack 支援，改進的錯誤消息，大大減少編譯時間。Haul 是可定制和完全開源的，文檔也十分優秀。
7. AcrossTabs
用于在浏覽器頁籤之間進行通信的 JavaScript 庫，使一個網頁可以打開和關閉其他浏覽器頁籤。父頁籤可以通路有關其子頁籤的有用資訊，包括唯一的 ID 以及子頁籤是否仍然打開或已關閉。
8. Stylelint
Stylelint 是一款現代化的 CSS linter，可幫助團隊在樣式表中強制使用客觀的 CSS 标準。該庫非常強大，可以禁用或列出特定屬性，捕獲錯誤和識别 SCSS 文法。StyleLint 是完全可定制的，可以選擇添加新規則或移除你不認可的規則。
9. Iconate
優秀的 vanilla JavaScript 庫，可讓你将點選中的一個圖示轉換為另一個圖示，并具有各種平滑的動畫。Iconate 與所有 CSS 圖示字型一起使用 — 隻需在 HTML 中添加一個圖示，并使用簡單的 JavaScript API 來選擇将其轉換為哪一種，有 15 種以上的動畫可供選擇。
10. React-Datasheet
React 元件用于向應用添加功能齊全的類 Excel 資料表格。表格單元可以自由編輯、分組選擇、複制、粘貼、删除，以及你期望的其他任何功能。其 GitHub 首頁上有三個有用的例子 —— 一個基本的表格、帶有公式的 spreadsheet，以及帶有嵌套元件的表格。
11. Pure CSS
子產品化 CSS 架構，體積十分小，壓縮後整個庫隻有 3.8kb，還可以通過移除一些不需要的部分進一步減小大小。子產品包括基本的樣式集，響應式網格，表單元件，按鈕，表格和菜單。
12. Simple Icons
收集了大量社交網絡、app、服務和其他品牌的免費圖示。因為所有的圖示都是使用 SVG 制作的，是以它們可以縮放到任何的尺寸而不用擔心變模糊。基于 SVG 還使得它們非常輕量 — 大多數低于 500 bytes，具有更多細節的大約為 1、2KB。
13. Chroma.js
用于處理顔色的小巧的 JavaScript 庫。它提供了豐富的 API，具有超過 50 種操作顔色的功能，可在顔色模式之間切換改變亮度和飽和度，建立漸變梯度等許多有用的方法。
14. Weex
Weex 是建構跨平台移動應用的架構，類似于 React Native，但适用于 Vue.js 項目。它可以讓你使用 HTML，CSS 和 JavaScript 編寫應用，然後在 Android 中将其渲染成 Java 或在 iOS 中将其渲染成 Swift。該架構有許多内置元件、API 和其他有用的功能。
來源：DzineShip
原文連結：https://my.oschina.net/editorial-story/blog/907660
責任編輯：開源中國 – 局長
轉載必須在正文中标注并保留原文連結和作者等資訊
版權聲明：本文為CSDN部落客「weixin_34185560」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
原文連結：https://blog.csdn.net/weixin_34185560/article/details/92717073