在十一月份的前端技術(shù)列表中，我們整合了一些令人感到驚嘆的 GitHub 項(xiàng)目，其中包含了新的 CSS 框架、node.js包管理器，以及用于實(shí)現(xiàn)圖標(biāo)、加載效果、工具提示的純 CSS 解決方案。

那么，讓我們一起來(lái)看看吧。Have Fun ！

1. Wing

[[177919]]

Wing 是一個(gè)微型（壓縮后僅有4KB）響應(yīng)式的 CSS 框架，它提供了一個(gè) 12 列響應(yīng)式網(wǎng)格以及基礎(chǔ)的樣式組件集，可為你的建站工作打下堅(jiān)實(shí)的基礎(chǔ)。當(dāng)然，這個(gè)項(xiàng)目最酷的地方在于，它絕大多數(shù)的 HTML 元素都是自動(dòng)樣式化的，而不需要任何額外的類。希望你會(huì)喜歡！

HERE：Wing 項(xiàng)目地址

2. Shave

Shave 是一個(gè)零依賴、輕量級(jí)的 JavaScript 插件，它能截?cái)喽嘈形谋?，以適應(yīng)基于 max-height 設(shè)定好的 html 元素，并將原始文本字符串存儲(chǔ)在隱藏的<span>元素中，以便你的文本能夠完整地保留在頁(yè)面中。Shave 不依賴任何庫(kù)，同時(shí)它在 jQuery 中提供了一個(gè)獨(dú)立版本的插件。

HERE：Shave 項(xiàng)目地址

3. Cerebral

[[177920]]

一個(gè) JavaScript MVC 應(yīng)用程序狀態(tài)管理器，并且它有獨(dú)立的調(diào)試器。在 Cerebral 中，應(yīng)用程序的狀態(tài)被存儲(chǔ)在單個(gè)的樹模型中，該模型管理著所有服務(wù)器端和客戶端的狀態(tài)。

而調(diào)試器具有對(duì)模型、控制器以及視圖的實(shí)時(shí)管理權(quán)限。

HERE：Cerebral 項(xiàng)目地址

4. Wenk

[[177921]]

Wenk 是一個(gè)輕量級(jí)純 CSS 寫的文本工具提示庫(kù)。雖然它的壓縮版僅有700字節(jié)，但它依然能夠管理并提供一些定制選項(xiàng)。諸如不同提示工具的大小、位置和文本對(duì)齊。

HERE：Wenk 項(xiàng)目地址

5. CSS Loader

[[177922]]

CSS Loader 是一個(gè)非常有用加載器。它允許開發(fā)人員利用純 CSS 文件，以及一個(gè)空<div>元素便可以快速的創(chuàng)建加載指示器。

HERE：CSS Loader 項(xiàng)目地址

6. Yarn

[[177923]]

相信近期 Facebook 推出的開源 Node.js 包管理器 Yarn，大家已經(jīng)有所耳聞了。它具備強(qiáng)大的緩存系統(tǒng)，能夠大大降低包的安裝時(shí)間，并且能夠?yàn)閰⑴c一個(gè)項(xiàng)目的所有用戶維持相同的節(jié)點(diǎn)模塊（node_modules）目錄結(jié)構(gòu)，有助于減少難以追蹤的 bug 和在多臺(tái)機(jī)器上復(fù)制。

雖然，它與 NPM 產(chǎn)生背景不同，但使用 Yarn 幾乎可以等同于使用 NPM ，開發(fā)人員需要更快的了解它哦！

HERE：Yarn 項(xiàng)目地址

7. Canvas Gauges

Canvas Gauges 是一個(gè)利用純 JavaScript 和 HTML5 Canvas（畫布）打造的可完全自定義的儀表，你可以用它來(lái)創(chuàng)建諸如機(jī)動(dòng)車速度表、溫度計(jì)等類型的測(cè)量設(shè)備。

由于它的代碼量很小，并且沒(méi)有依賴，同時(shí)適用于物聯(lián)網(wǎng)設(shè)備。你可以通過(guò)網(wǎng)站的示例來(lái)了解它。

HERE：Canvas Gauges 項(xiàng)目地址

8. CSS Icon

[[177924]]

CSS Icon 是一個(gè)匯聚了500+ 純 CSS 代碼實(shí)現(xiàn)的圖標(biāo)集網(wǎng)站。使用起來(lái)也十分簡(jiǎn)單，當(dāng)你點(diǎn)擊了某一個(gè)圖標(biāo)，便會(huì)彈出圖標(biāo)對(duì)應(yīng)的 HTML 與 CSS 代碼，同時(shí)你可以直觀的了解到 CSS 代碼的什么部分，實(shí)現(xiàn)了圖標(biāo)的哪些元素。

如此棒的項(xiàng)目，是不是得給滿分呢？快來(lái) Enjoy吧！

HERE：CSS Icon 項(xiàng)目地址

9. CurrencyFormatter.js

CurrencyFormatter.js 是一款簡(jiǎn)單實(shí)用的純 JS 格式化貨幣庫(kù)。它支持 155 種不同國(guó)家的貨幣格式，以及超過(guò) 700 種不同語(yǔ)言的本地化設(shè)置。

此外，它還能處理某些不采用的貨幣格式，功能非常強(qiáng)大。

HERE：CurrencyFormatter.js 項(xiàng)目地址

10. KUTE.js

一款具有高性能的原生 JavaScript 動(dòng)畫引擎：KUTE.js. 它的核心庫(kù)提供了所有基本的動(dòng)畫方法，你可以添加許多插件來(lái)豐富 KUTE 的功能。同時(shí)，它還具備單獨(dú)的擴(kuò)展，可以同時(shí)與jQuery、SVG、CSS屬性等一起工作。

HERE：KUTE.js 項(xiàng)目地址

11. Vue Material

[[177925]]

Vue Material 是一個(gè)根據(jù) Material Design 規(guī)范構(gòu)建的輕量級(jí) Vue.js 框架。它旨在提供一組可重用的高品質(zhì)組件和一系列 UI 元素，通過(guò) Vue2.0 支持現(xiàn)代的 Web 瀏覽器來(lái)構(gòu)建應(yīng)用程序。

該庫(kù)也很容易實(shí)現(xiàn)，除了 Vue.js 之外沒(méi)有任何依賴。

HERE：Vue Material 項(xiàng)目地址

12. Test Cafe

[[177926]]

Test Cafe 是一個(gè)純 Node.js 編寫的用于測(cè)試 Web 應(yīng)用程序端到端的解決方案。它基于 Node.js，并且不需要安裝 NPM 包之外的任何東西——不需要瀏覽器插件以及編譯器。

一旦你編寫了測(cè)試，運(yùn)行 Test Cafe，它將為你進(jìn)行瀏覽器測(cè)試、收集結(jié)果并創(chuàng)建報(bào)告。

HERE：Test Cafe 項(xiàng)目地址

13. Core.css

[[177927]]

Core.css 是一個(gè)用于構(gòu)建響應(yīng)式網(wǎng)站的輕量級(jí)框架。它壓縮后僅有 1.3kb，同時(shí)它沒(méi)有預(yù)先設(shè)定的元素和內(nèi)置動(dòng)畫。所以適用于搭建任何小型的 Web 項(xiàng)目。

HERE：Core.css 項(xiàng)目地址

14. Flv.js

[[177928]]

B站相信大家都不會(huì)陌生，而 Flv.js 就是由 bilibili 網(wǎng)站開源的 HTML5 Flash 視頻（FLV）播放器，純?cè)?JavaScript 開發(fā)（ECMAScript 6 編寫） ，沒(méi)有用到 Flash。

它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并實(shí)時(shí)轉(zhuǎn)封裝為 fmp4 ，通過(guò) Media Source Extensions 喂給瀏覽器，實(shí)現(xiàn)了 FLV 格式視頻的播放。

HERE：Flv.js 項(xiàng)目地址

15. Next.js

Next.js 是一個(gè)基于 React 的通用 JavaScript 框架。它提供了一種便利的方式來(lái)創(chuàng)建新的 JavaScript Web 應(yīng)用程序。開發(fā)人員不必在搭建 Webpack 或 Babel 的配置上花費(fèi)太多的時(shí)間了。

HERE：Next.js 項(xiàng)目地址

譯者注：關(guān)于 Next.js 的詳細(xì)介紹可以看這里。

以上就本文所有的分享，希望你能找到適合你項(xiàng)目的前端庫(kù)。