15個有趣的JavaScript與CSS庫

在十一月份的前端技術列表中，咱們整合了一些使人感到驚歎的 GitHub 項目，其中包含了新的 CSS 框架、node.js包管理器，以及用於實現圖標、加載效果、工具提示的純 CSS 解決方案。

那麼，讓咱們一塊兒來看看吧。Have Fun ！

1. Wing

Wing 是一個微型（壓縮後僅有4KB）響應式的 CSS 框架，它提供了一個 12 列響應式網格以及基礎的樣式組件集，可爲你的建站工做打下堅實的基礎。固然，這個項目最酷的地方在於，它絕大多數的 HTML 元素都是自動樣式化的，而不須要任何額外的類。但願你會喜歡！

HERE：Wing 項目地址

2. Shave

Shave 是一個零依賴、輕量級的 JavaScript 插件，它能截斷多行文本，以適應基於 max-height 設定好的 html 元素，並將原始文本字符串存儲在隱藏的``元素中，以便你的文本可以完整地保留在頁面中。Shave 不依賴任何庫，同時它在 jQuery 中提供了一個獨立版本的插件。

HERE：Shave 項目地址

3. Cerebral

一個 JavaScript MVC 應用程序狀態管理器，而且它有獨立的調試器。在 Cerebral 中，應用程序的狀態被存儲在單個的樹模型中，該模型管理着全部服務器端和客戶端的狀態。

而調試器具備對模型、控制器以及視圖的實時管理權限。

HERE：Cerebral 項目地址

4. Wenk

Wenk 是一個輕量級純 CSS 寫的文本工具提示庫。雖然它的壓縮版僅有700字節，但它依然可以管理並提供一些定製選項。諸如不一樣提示工具的大小、位置和文本對齊。

HERE：Wenk 項目地址

5. CSS Loader

CSS Loader 是一個很是有用加載器。它容許開發人員利用純 CSS 文件，以及一個空``元素即可以快速的建立加載指示器。

HERE：CSS Loader 項目地址

6. Yarn

相信近期 Facebook 推出的開源 Node.js 包管理器 Yarn，你們已經有所耳聞了。它具有強大的緩存系統，可以大大下降包的安裝時間，而且可以爲參與一個項目的全部用戶維持相同的節點模塊（node_modules）目錄結構，有助於減小難以追蹤的 bug 和在多臺機器上覆制。

雖然，它與 NPM 產生背景不一樣，但使用 Yarn 幾乎能夠等同於使用 NPM ，開發人員須要更快的瞭解它哦！

HERE：Yarn 項目地址

7. Canvas Gauges

Canvas Gauges 是一個利用純 JavaScript 和 HTML5 Canvas（畫布）打造的可徹底自定義的儀表，你能夠用它來建立諸如機動車速度表、溫度計等類型的測量設備。

因爲它的代碼量很小，而且沒有依賴，同時適用於物聯網設備。你能夠經過網站的示例來了解它。

HERE：Canvas Gauges 項目地址

8. CSS Icon

CSS Icon 是一個匯聚了500+ 純 CSS 代碼實現的圖標集網站。使用起來也十分簡單，當你點擊了某一個圖標，便會彈出圖標對應的 HTML 與 CSS 代碼，同時你能夠直觀的瞭解到 CSS 代碼的什麼部分，實現了圖標的哪些元素。

如此棒的項目，是否是得給滿分呢？快來 Enjoy吧！

HERE：CSS Icon 項目地址

9. CurrencyFormatter.js

CurrencyFormatter.js 是一款簡單實用的純 JS 格式化貨幣庫。它支持 155 種不一樣國家的貨幣格式，以及超過 700 種不一樣語言的本地化設置。

此外，它還能處理某些不採用的貨幣格式，功能很是強大。

HERE：CurrencyFormatter.js 項目地址

10. KUTE.js

一款具備高性能的原生 JavaScript 動畫引擎：KUTE.js. 它的核心庫提供了全部基本的動畫方法，你能夠添加許多插件來豐富 KUTE 的功能。同時，它還具有單獨的擴展，能夠同時與jQuery、SVG、CSS屬性等一塊兒工做。

HERE：KUTE.js 項目地址

11. Vue Material

Vue Material 是一個根據 Material Design 規範構建的輕量級 Vue.js 框架。它旨在提供一組可重用的高品質組件和一系列 UI 元素，經過 Vue2.0 支持現代的 Web 瀏覽器來構建應用程序。

該庫也很容易實現，除了 Vue.js 以外沒有任何依賴。

HERE：Vue Material 項目地址

12. Test Cafe

Test Cafe 是一個純 Node.js 編寫的用於測試 Web 應用程序端到端的解決方案。它基於 Node.js，而且不須要安裝 NPM 包以外的任何東西——不須要瀏覽器插件以及編譯器。

一旦你編寫了測試，運行 Test Cafe，它將爲你進行瀏覽器測試、收集結果並建立報告。

HERE：Test Cafe 項目地址

13. Core.css

Core.css 是一個用於構建響應式網站的輕量級框架。它壓縮後僅有 1.3kb，同時它沒有預先設定的元素和內置動畫。因此適用於搭建任何小型的 Web 項目。

HERE：Core.css 項目地址

14. Flv.js

B站相信你們都不會陌生，而 Flv.js 就是由 bilibili 網站開源的 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發（ECMAScript 6 編寫） ，沒有用到 Flash。

它的工做原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，並實時轉封裝爲 fmp4 ，經過 Media Source Extensions 餵給瀏覽器，實現了 FLV 格式視頻的播放。

HERE：Flv.js 項目地址

15. Next.js

Next.js 是一個基於 React 的通用 JavaScript 框架。它提供了一種便利的方式來建立新的 JavaScript Web 應用程序。開發人員沒必要在搭建 Webpack 或 Babel 的配置上花費太多的時間了。

HERE：Next.js 項目地址

譯者注：關於 Next.js 的詳細介紹能夠看這裏。

以上就本文全部的分享，但願你能找到適合你項目的前端庫。

轉載自：http://www.codeceo.com