2017 年 8 月:15 個有趣的 JS 和 CSS 庫

發表於2017-09-01

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

炎熱的 8 月已經過去,秋天的腳步更近了。在本月,Tutorialzine 依舊為大家帶來了一些有趣、實用的前端庫,看看有哪些適合你的專案呢?


1.Titanic

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

這是一組自帶懸停動畫的精緻 SVG 圖示。但與大多數 Web 圖示不同之處在於 – 它的動畫是基於 JS 的,需要你使用 bodymovin 庫將動畫效果匯出為 SVG 格式。

專案地址:【傳送門

2.Rebass

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

Rebass 是一個用於構建響應式 Web APP 的 React UI Kit。它由超過 60 種樣式元件構成,可通過樣式體系中的屬性進行自由定製。這樣可以保證樣式的隔離,便可減少在應用程式中編寫自定義 CSS 的需求。

專案地址:【傳送門

3.Bootstrap 4 (Beta)

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

Bootstrap 4 的官方 Beta 版已經正式釋出了!新版本的框架也發生了許多重大的改變,包括支援了基於 Flexbox 的網格體系,新增並重寫了相關元件,更快的 ES6 JavaScript 外掛,改進了文件等等。

專案地址:【傳送門

4.Hover Buttons

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

這是一組帶有懸停動畫效果的 HTML 按鈕,這些按鈕不僅擁有不同的形狀與大小,而且具備了豐富的動畫效果供你選擇。Hover Buttons 是由 SCSS 製作的,所以你可以輕鬆的刪除不想要的按鈕,或根據個人喜好自由的定製其樣式。

專案地址:【傳送門

5.React Simple Maps

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

React Simple Maps 是一個用於建立 SVG 地圖的元件庫,它具備新增地圖細節的各類元件,它們可為地圖的各個區域新增文字註釋、標記以及自定義顏色。

專案地址:【傳送門

6.Gpu.js

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

Gpu.js 是一個用於在瀏覽器中執行 GPGPU 的 JS 庫,它將 JavaScript 編譯成能夠通過 WebGL API 在 GPU 上執行的著色語言,以便更快地執行復雜的計算。如果 WebGL 不可用,則這些函式仍將以常規的 JavaScript 執行。

專案地址:【傳送門

7.Pell

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

Pell 是一款超輕量的 WYSIWYG 文字編輯器。它由僅 200 行的 ES6 程式碼所構成,只有 1kB 的大小,並且沒有任何的依賴關係。同時,它還支援 Markdown 文字格式所需的所有操作,包括插入影像和連結。

專案地址:【傳送門

8.Chromeless

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

Chromeless 是一個基於 Chrome 平臺 Headless 模式的 Web 自動化框架。它的 API 和功能與其他流行工具(如 PhantomJS NightmareJS)非常相似,主要區別是它在 Chrome 的 Headless 模式下可以執行所有的測試。同時,它還可以在本地或藉助 AWS Lambda 工作。

專案地址:【傳送門

9.Fitty

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

Fitty 是一個 Vanilla JavaScript 庫,它可以更改文字的字型大小,使其適應固定寬度的容器。它適用於所有標準的 Web 字型,並且可以“向上”或“向下”縮放其大小,以便讓它們更好的佔據可用空間,而無須換行。

專案地址:【傳送門

10.Notif.me

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

這是一個用於傳送通知的 Node.js 庫,旨在成為一個處理電子郵件、簡訊和推送通知的一體化解決方案。另外,每個服務都有多個提供商可供你選擇。

專案地址:【傳送門

11.Shoelace

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

Shoelace 是一個炒雞輕量的 CSS 入門套件,旨在為 Bootstrap 提供一個更簡單的替代方案。它由 CSS reset 與一些實用的 UI 元件構成,沒有過多的樣式和功能。由於這個庫的程式碼是基於 CSS 變數的,所以也易於定製。

專案地址:【傳送門

12.TensorFire

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

TensorFire 是一個能夠在瀏覽器中執行神經網路的框架。由於 TensorFire 可通過 WebGL 進行 GPU 加速,所以執行較大的機器學習模型也不是事兒。雖然,該專案還處於早期階段,但也有了一些十分有前景的演示。例如剪刀包袱錘手勢檢測 Demo

專案地址:【傳送門

13.Vali

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

這是利用 Bootstrap、PugJS、Sass 構建的後臺資訊管理模板。由於該專案是基於易於定製的理念而設計,所以,所有的樣式都是由獨立的 SASS 模組進行組織。同時,該模版還提供了豐富的元件與小部件,你可以在 Demo 中檢視它們。

專案地址:【傳送門

14.BotUI

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

BotUI 是用於建立聊天機器人會話介面的 JavaScript 框架。它有一個超簡單的 API,你可以通過新增訊息、問題,甚至形成供使用者填寫的輸入欄位來配置對話流。

如果你想了解有關互動式會話 UI 的更多資訊,請參閱我們的文章《聊天機器人之開發者簡介》

專案地址:【傳送門

15.Nano ID

2017 年 8 月:15 個有趣的 JS 和 CSS 庫

這是一個用於生成唯一 ID 的小型 JavaScript 庫。它僅使用對 URL 友好的符號來生成字串,但它也有一個讓你提供相應字母表的選項。在 GitHub 的專案頁上,你可以找到關於此庫的工作方式,以及使用演算法的一些有趣資訊。

專案地址:【傳送門


感謝你的閱讀。若你有所收穫,歡迎點贊與分享。

注:

  1. 本文版權歸原作者所有,僅用於學習與交流;
  2. 如需轉載譯文,煩請按下方註明出處資訊,謝謝!

相關文章