10個好用的的css框架

TNTWEB發表於2021-09-26
CSS框架

TNTWeb - 全稱騰訊新聞前端團隊，組內小夥伴在Web前端、NodeJS開發、UI設計、移動APP等大前端領域都有所實踐和積累。

目前團隊主要支援騰訊新聞各業務的前端開發，業務開發之餘也積累沉澱了一些前端基礎設施，賦能業務提效和產品創新。

團隊倡導開源共建，擁有各種技術大牛，團隊Github地址：https://github.com/tnfe

本文作者zhangzheyi1，本人部落格地址:https://www.zhangzheyi1.com

image.png

優秀的css框架可以使開發變得更加快速，不再為相容性苦惱，並且一般都會有合理的佈局，作為開發可以減少對UI設計的思考。近期我們整理了一些css框架供開發者選擇和使用，排名不分先後。

一、tailwind

Tailwind CSS 是一個功能類優先的 CSS 框架，它整合了諸如flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在指令碼標記語言中組合起來，構建出任何設計。

主要特性：

  • 元件化
  • 體積小，效能高
  • 響應式

image.png
傳送門：https://tailwindcss.com/

二、Tachyons

Tachyons具備了當前流行的css框架的優點，無需自己編寫大量 CSS。輕量、可定製化和擴充等。Tachyons有極其細化的原子類，只需要在類名中新增屬性新的樣式即可。不必擔心命名衝突，也無需擔心樣式覆蓋，這樣可以更能直觀的看出樣式的具體內容。

image.png

傳送門：https://tachyons.io/

三、Skeleton

如果您正在著手一個較小的專案，或者只是覺得不需要大型框架的所有實用程式，則應該使用 Skeleton。

在Skeleton css官網中，介紹了三個Skeleton的三大優勢：

  • Light as a feather at ~400 lines & built with mobile in mind.（超輕量級, 為移動端打造）
  • Styles designed to be a starting point, not a UI framework.（樣式設計為起點，而非 UI 框架）
  • Quick to start with zero compiling or installing necessary.
    （快速入門，零編譯或安裝必要）

根據Skeleton的特點和優勢，可以把它的典型應用場景歸納為：

  • css學習和demo練習；
  • 建立小型的響應式手機應用；

image.png

傳送門：http://getskeleton.com/

四、Foundation

Foundation 是由產品設計公司 ZURB 製作的自適應前端框架。
相比於其他同型別工具，Foundation的移動化方案更加出色。借鑑響應式Web設計的思路和方法，Foundation對內容結構在不同型別裝置中的的呈現方式進行了相應的預設。

image.png
傳送門：https://get.foundation/

五、bootstrap

Bootstrap仍然是最流行的 CSS 框架之一。他們提供了大量的文件、示例和演示，可以幫你快速進行響應式 Web 開發。該框架的當前版本是 Bootstrap 5，相較於V4，做出了一些改變：

  • 擁有了自己的SVG圖示庫
  • 不再支援jquery
  • 不再支援IE
  • 增加了css自定義屬性
  • 增強的網格系統
  • Forms可被更新

image.png
傳送門：https://getbootstrap.com/

六、UIkit

相較於其他通用的css框架，UIkit有一些這些框架沒有的元件，比如

  • Lightbox（利用模態對話方塊為圖片和視訊建立一個別致的燈箱）
  • Parallax（依賴於頁面滾動條位置的動態 CSS 特性）
  • Nestable（建立可以通過拖拽排序的可巢狀式列表）
  • Sortable（建立可排序的網格和列表重新來排列元素的順序）

image.png

傳送門：https://getuikit.com/

七、Semantic UI

Semantic意為語義，由於Semantic UI類在命名上清晰易懂，因此開發人員不但節省了學習的時間，也讓手頭上專案的開發更快、更直觀。此外佈局的多樣性是Semantic UI的另一個優勢。通過不同的主題，您可以輕鬆地為各種專案找到必要的元件。

Semantic UI存在一些缺點，更新頻率相較於其他熱門框架較低，並且在某些裝置執行響應能力一般。

image.png
傳送門：https://semantic-ui.com/

八、Bulma

Bulma 是一個基於 Flexbox 的現代化的 CSS 框架。它提供了隨時可用的前端元件，您可以輕鬆地組合這些元件來構建響應式 Web 介面。

image.png
和bootstrap相比，兩者最大的區別是，bulma是純css，沒有js，bootstrap有JS。這裡舉個列布局的例子：

  1. 新增columns容器
  2. 新增任意數量的column元素

無論列數是多少，每一列的寬度都相等。

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
  <div class="column">5</div>
</div>

傳送門：https://bulma.io/

九、Picnic

Picnic是一個輕量級CSS框架，壓縮後的大小不到10kb。該框架最大的特點就是具有多個互動式元件，包括柵格、表單、選項卡、工具提示等等，可以幫助開發人員快速建立響應式網站和web應用程式。

Picnic CSS是一個用Sass寫的輕量級UI框架，它能更容易的編輯和自定義變數，如顏色和長度。它還有一些不錯的純CSS寫的UI元件，如模態視窗和內容滑塊。

image.png

傳送門：https://picnicss.com/

十、NES.css

NES.css 模仿了8 位 Nintendo Entertainment System 圖形，營造出復古的遊戲外觀：

NES.css 只需要 CSS，不依賴任何 JavaScript。作為每個遊戲發燒友都會大呼：愛了！

image.png

傳送門：https://nostalgic-css.github....

GitHub：https://github.com/nostalgic-...

相關文章