13 個有趣且實用的 CSS 框架/元件

語言: CN / TW / HK

前端的同學們對 CSS 肯定不會陌生,這部分內容控制著網頁的外觀。今天我們給大家整理了一些有趣的 CSS 元件,這些元件能增強網頁的排版、讓網頁實現多種風格,甚至可以檢查頁面的 Bug !

1、赫蹏

赫蹏(hètí)是專為中文內容展示設計的排版樣式增強。它基於通行的中文排版規範而來,預置古文、詩詞樣式,提供移動端支援;可以為網站的讀者帶來更好的文章閱讀體驗。

專案地址:https://www.oschina.net/p/heti

2、Pixel Art to CSS 

Pixel Art to CSS 是一個基於 React 的線上畫素繪畫編輯器,你可以用這個編輯器繪製畫素版的圖片或者 GIF 動圖,繪製完畢後可以一鍵獲取對應畫素圖的 CSS 程式碼

專案地址:https://www.oschina.net/p/pixel-art-react

3、css-checker 

css-checker 可用於檢查 css 樣式是否有重複,並在幾秒鐘內找到具有高度相似的 css classes 之間的差異,從而避免檔案之間出現冗餘或相似的 css 樣式元件,同時適用於本地開發和 CI 等自動化流程。

專案地址:https://www.oschina.net/p/css-checker

4、bttn.css

bttn.css 是一個 CSS 按鈕樣式庫,包含一系列精美的按鈕樣式。引入 bttn.css 檔案後,在按鈕元素中新增對應 css 類即可為按鈕加入對應樣式:

 

專案地址:https://www.oschina.net/p/bttn-css

5、Animate.css

Animate.css 是一個有趣的,跨瀏覽器的 css3 動畫庫,內建了很多典型的 css3 動畫,讓網頁變得更加靈動。Animate.css 可以與 Javascript 結合使用,製作一些更有趣的迴圈動畫效果。

專案地址:https://www.oschina.net/p/animate-css

6、NES.css 

NES.css 是一款 NES 紅白機風格的 CSS 框架,可以使用它實現紅白機風格的按鈕,字型,對話方塊。只含 CSS ,不依賴任何 JavaScript。

專案地址:https://www.oschina.net/p/nes-css

7、PSone.css 

psone.css 是一個 PS1 遊戲機風格的 CSS 框架,使用它可以實現復古 PS1 風格的網頁元素。

專案地址:https://www.oschina.net/p/psone-css

8、98.css 

98.css 是一個用於模仿 Windows 98 介面的 CSS 庫,滿滿的懷舊風...

專案地址:https://www.oschina.net/p/98-css

9、MVP.css

MVP.css 包含 HTML 元素的開箱即用 CSS 樣式,也就是說使用者甚至可以不懂 CSS ,只需在 HTML 中引用該框架,即可為 HTML 元素附加如下的樣式:

專案地址:https://www.oschina.net/p/mvp-css

10、Charts.css

Charts.css 是一個將 HTML 元素樣式轉化為視覺化圖表的開源 CSS 框架,用簡單的 CSS 類即可將資料轉換為漂亮的圖表和圖形。它支援使用媒體查詢進行自適應縮放、支援多種圖表型別、無 JS 程式碼帶來的額外效能開銷。

專案地址:https://www.oschina.net/p/charts-css

11、Pure.css

Pure 是一個小型響應式 CSS 框架,它包含一組響應式 CSS 模組,為原生 HTML 元素以及最常見的 UI 元件提供響應式佈局和樣式。通過 Pure 可以使用 Grids、Menus 等元件快速構建網頁的基礎佈局  —— PC/移動雙端、所有螢幕大小都適配的自適應佈局。如圖:

專案地址:www.oschina.net/p/pure-css

12、Bulma.css

Bulma 是一個基於 Flexbox 的現代 CSS 框架,它提供了現成的響應式前端元件,使用元件可以輕鬆建立一個 100% 響應式的頁面,對移動端極為友好。

專案地址:https://www.oschina.net/p/bulma 

13、css.gg

css.gg 是一個開源的 CSS、SVG 和 Figma UI 圖示庫,可用於 SVG Sprite、樣式元件、NPM 和 API。

專案地址:https://www.oschina.net/p/css-gg

 

本文所介紹的軟體均來自 Awesome 軟體系列之《有趣且實用的 CSS 框架、元件》 :https://www.oschina.net/project/awesome?columnId=3 。

小編在此係列中摘錄了部分開源 CSS 框架/元件作介紹,旨在拋磚引玉。如果你還了解其他有趣、實用的 CSS 元件,歡迎在評論區留言分享,我們將採納大家的建議,持續更新 Awesome 系列的內容。

其他 Awesome 系列

  1. 工業軟體 -- 嵌入式作業系統
  2. 面向程式設計師的精品開源字型