15 個有趣的 JavaScript 與 CSS 庫

15 個有趣的 JavaScript 與 CSS 庫

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

那么,讓我們一起來看看吧盒音。Have Fun 表鳍!


  1. Wing
    --
Wing

Wing 是一個微型(壓縮后僅有4KB)響應式的 CSS 框架,它提供了一個 12 列響應式網(wǎng)格以及基礎(chǔ)的樣式組件集祥诽,可為你的建站工作打下堅實的基礎(chǔ)譬圣。當然,這個項目最酷的地方在于雄坪,它絕大多數(shù)的 HTML 元素都是自動樣式化的厘熟,而不需要任何額外的類。希望你會喜歡维哈!

HERE:Wing 項目地址

  1. Shave
    --
Shave

Shave 是一個零依賴绳姨、輕量級的 JavaScript 插件,它能截斷多行文本阔挠,以適應基于 max-height 設(shè)定好的 html 元素飘庄,并將原始文本字符串存儲在隱藏的<span>元素中,以便你的文本能夠完整地保留在頁面中购撼。Shave 不依賴任何庫竭宰,同時它在 jQuery 中提供了一個獨立版本的插件。

HERE:Shave 項目地址

  1. Cerebral
    --
Cerebral

一個 JavaScript MVC 應用程序狀態(tài)管理器份招,并且它有獨立的調(diào)試器切揭。在 Cerebral 中,應用程序的狀態(tài)被存儲在單個的樹模型中锁摔,該模型管理著所有服務器端和客戶端的狀態(tài)廓旬。

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

HERE:Cerebral 項目地址

  1. Wenk
    --
Wenk

Wenk 是一個輕量級純 CSS 寫的文本工具提示庫孕豹。雖然它的壓縮版僅有700字節(jié),但它依然能夠管理并提供一些定制選項十气。諸如不同提示工具的大小励背、位置和文本對齊。

HERE:Wenk 項目地址

  1. CSS Loader
    --
CSS Loader

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

HERE:CSS Loader 項目地址

  1. Yarn
    --
Yarn

相信近期 Facebook 推出的開源 Node.js 包管理器 Yarn芹枷,大家已經(jīng)有所耳聞了衅疙。它具備強大的緩存系統(tǒng),能夠大大降低包的安裝時間鸳慈,并且能夠為參與一個項目的所有用戶維持相同的節(jié)點模塊(node_modules)目錄結(jié)構(gòu)饱溢,有助于減少難以追蹤的 bug 和在多臺機器上復制。

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

HERE:Yarn 項目地址

  1. Canvas Gauges
    --
Canvas Gauges

Canvas Gauges 是一個利用純 JavaScript 和 HTML5 Canvas(畫布)打造的可完全自定義的儀表肋杖,你可以用它來創(chuàng)建諸如機動車速度表溉仑、溫度計等類型的測量設(shè)備。

由于它的代碼量很小兽愤,并且沒有依賴,同時適用于物聯(lián)網(wǎng)設(shè)備挪圾。你可以通過網(wǎng)站的示例來了解它浅萧。

HERE:Canvas Gauges 項目地址

  1. CSS Icon
    --
CSS Icon

CSS Icon 是一個匯聚了500+ 純 CSS 代碼實現(xiàn)的圖標集網(wǎng)站。使用起來也十分簡單哲思,當你點擊了某一個圖標洼畅,便會彈出圖標對應的 HTML 與 CSS 代碼,同時你可以直觀的了解到 CSS 代碼的什么部分棚赔,實現(xiàn)了圖標的哪些元素帝簇。

如此棒的項目,是不是得給滿分呢靠益?快來 Enjoy吧丧肴!

HERE:CSS Icon 項目地址

  1. CurrencyFormatter.js
    --
CurrencyFormatter.js

CurrencyFormatter.js 是一款簡單實用的純 JS 格式化貨幣庫。它支持 155 種不同國家的貨幣格式胧后,以及超過 700 種不同語言的本地化設(shè)置芋浮。

此外,它還能處理某些不采用的貨幣格式壳快,功能非常強大纸巷。

HERE:CurrencyFormatter.js 項目地址

  1. KUTE.js
    --
KUTE.js

一款具有高性能的原生 JavaScript 動畫引擎:KUTE.js. 它的核心庫提供了所有基本的動畫方法,你可以添加許多插件來豐富 KUTE 的功能眶痰。同時瘤旨,它還具備單獨的擴展,可以同時與jQuery竖伯、SVG存哲、CSS屬性等一起工作。

HERE:KUTE.js 項目地址

  1. Vue Material
    --
Vue Material

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

該庫也很容易實現(xiàn)本姥,除了 Vue.js 之外沒有任何依賴肩袍。

HERE:Vue Material 項目地址

  1. Test Cafe
    --
Test Cafe

Test Cafe 是一個純 Node.js 編寫的用于測試 Web 應用程序端到端的解決方案。它基于 Node.js婚惫,并且不需要安裝 NPM 包之外的任何東西——不需要瀏覽器插件以及編譯器氛赐。

一旦你編寫了測試魂爪,運行 Test Cafe,它將為你進行瀏覽器測試艰管、收集結(jié)果并創(chuàng)建報告滓侍。

HERE:Test Cafe 項目地址

  1. Core.css
    --
Core.css

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

HERE:Core.css 項目地址

  1. Flv.js
    --
Flv.js

B站相信大家都不會陌生缸浦,而 Flv.js 就是由 bilibili 網(wǎng)站開源的 HTML5 Flash 視頻(FLV)播放器夕冲,純原生 JavaScript 開發(fā)(ECMAScript 6 編寫) ,沒有用到 Flash裂逐。

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

HERE:Flv.js 項目地址

  1. Next.js
    --
Next.js

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

HERE:Next.js 項目地址

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

以上就本文所有的分享薪缆,希望你能找到適合你項目的前端庫螺捐。


如果覺得文章不錯,不妨點個贊矮燎。_

注:本文版權(quán)歸原作者所有定血。如需轉(zhuǎn)載譯文,煩請注明出處诞外,謝謝澜沟!

英文原文:15 Interesting JavaScript and CSS Libraries for November 2016
作者:Danny Markov
譯者:IT程序獅
譯文源自:http://www.reibang.com/p/f651fc45e586

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市峡谊,隨后出現(xiàn)的幾起案子茫虽,更是在濱河造成了極大的恐慌,老刑警劉巖既们,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件濒析,死亡現(xiàn)場離奇詭異,居然都是意外死亡啥纸,警方通過查閱死者的電腦和手機号杏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來斯棒,“玉大人盾致,你說我怎么就攤上這事主经。” “怎么了庭惜?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵罩驻,是天一觀的道長。 經(jīng)常有香客問我护赊,道長惠遏,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任骏啰,我火速辦了婚禮节吮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘器一。我一直安慰自己课锌,他們只是感情好厨内,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布祈秕。 她就那樣靜靜地躺著,像睡著了一般雏胃。 火紅的嫁衣襯著肌膚如雪请毛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天瞭亮,我揣著相機與錄音方仿,去河邊找鬼。 笑死统翩,一個胖子當著我的面吹牛仙蚜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播厂汗,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼委粉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了娶桦?” 一聲冷哼從身側(cè)響起贾节,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎衷畦,沒想到半個月后栗涂,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡祈争,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年斤程,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片菩混。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡暖释,死狀恐怖袭厂,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情球匕,我是刑警寧澤纹磺,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站亮曹,受9級特大地震影響橄杨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜照卦,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一式矫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧役耕,春花似錦采转、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至框全,卻和暖如春察绷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背津辩。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工拆撼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人喘沿。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓闸度,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蚜印。 傳聞我的和親對象是個殘疾皇子莺禁,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容