15 個有趣的 JS 和 CSS 庫

開發者們，一塊兒來看看有木有你須要的前端庫。

1. DisplayJS

DisplayJS 是一個幫助你渲染 DOM 的簡易框架。使用它，你能夠更容易地將 JS 變量遍歷到特定的 HTML 元素中，相似於 React 或 Vue.js 處理模版的方式。

項目地址：【 傳送門 】

2. React Beautiful DnD

這是由 Atlassian 開源的用於製做拖拽組件的 React 庫。它提供了強大、易用的 API，以及豐富的定製選項和控件。它所生成的組件，也具有了平滑的 GPU 動畫效果。當元素被拾取或從新排序時，其效果將會展現出來。

項目地址：【 傳送門 】

3. R2

這是一個全新版的 Node.js Request 庫，它提供了一個更輕量的 HTTP 客戶端解決方案。與 Request 庫不一樣的是，它創建在原生瀏覽器 Fetch API 之上，可被應用於 Node.js. 而且，R2 在壓縮後僅有 16KB 大小。

項目地址：【 傳送門 】

4. Primer CSS

Primer CSS 是由 GitHub 的前端設計師研發的 CSS 框架。爲了便於安裝，它的 23 個包被劃分爲 3 個核心的元包，每一個包均可以經過 NPM 進行獨立版本的發佈。

項目地址：【 傳送門 】

5. Puppeteer

Puppeteer 是一個用於操縱 Headless Chrome 的封裝庫，它由 Chrome DevTools 官方團隊進行維護。你也能夠在咱們的文章 《使用 Node.js 自動化Google Chrome》 中，瞭解更多咱們嘗試的一些功能。

項目地址：【 傳送門 】

6. Marko

這是一款與 React 和 Vue.js 相似的新型 JS 框架。它能夠幫助你將應用程序分解爲獨立的組件，並可隨時間的推移，以及響應用戶操做的變化顯示程序視圖的變化。同時，Marko 能夠在應用中自動更新 DOM 來反饋數據。

項目地址：【 傳送門 】

7. Redocx

Redocx 是一個用於生成 Word 文檔的 React 庫。你可使用 React 組件對文檔進行定義，並經過命令行將其渲染爲 Word 文檔。同時，此庫也包含了表格、圖像、頁眉、頁腳等豐富的組件供你選擇。

項目地址：【 傳送門 】

8. Fuzzysort

這是一個用於構建模糊搜索界面的 JS 庫，相似 Sublime Text 中的界面樣式。該庫會根據搜索查詢的匹配度，計算出搜索匹配數與時長。

項目地址：【 傳送門 】

9. Trowel

Trowel 是一個 SASS 工具包，它提供了一種寫入 SASS 變量的新方法，容許你將多個變量分組到單個對象中，讓你的 SASS 代碼更易編寫，更易閱讀。

項目地址：【 傳送門 】

10. Vivify

Vivify 是由純 CSS 寫的動畫庫，該庫提供了超過 50 種動畫效果供你選擇。你只須要將 Vivify 的類添加到相應的元素，便可使其產生動畫效果，而且添加 infinite 類後，動畫就能夠循環播放了。

項目地址：【 傳送門 】

11. Tons of Checkboxes

這是一個 CSS 複選框組件合集，它由大小不1、樣式各異的複選框組成。同時，全部的複選框都具有 4 種不一樣的尺寸，而且兼容 IE9+ 和全部現代瀏覽器。

項目地址：【 傳送門 】

12. Push

Push 是一個通用的桌面通知框架。它基於強大的 Notification API ，可做爲可靠的跨瀏覽器解決方案，若是用戶的瀏覽器不支持最新的 API，則會沿用老版 API 實現。

項目地址：【 傳送門 】

13. react-imgpro

react-imgpro 是一個用於圖像處理的 React 組件。它能夠利用 filters 進行圖像處理，並生成 base64 格式的圖像。它簡單易用，你只須要指定一個圖像的 URL，選擇相應的 filters，並填寫輸出圖像的大小與格式便可。

項目地址：【 傳送門 】

14. Lozad.js

Lozad.js 是一個高性能、可配置的純 JS 實現的懶加載器。它基於 Intersection Observer API ，沒有任何依賴，支持動態懶加載添加元素。 同時，它也是輕量級庫，在 Gzip 壓縮後只有 535 字節大小。

項目地址：【 傳送門 】

15. Semiotic

這是一個結合了 React 和 D3 的數據可視化框架。它提供了 3 種類型的框架（XYFrame，ORFrame，NetworkFrame），可幫助你生成一些酷炫圖表。而顯示數據的方式，也能夠經過調整框架中設置或者添加 CSS 樣式進行定製。

項目地址：【 傳送門 】

 

來自：http://www.jianshu.com/p/ec9ff744eb20