10個(gè)好用的的css框架
時(shí)間:2023-09-01 02:00:01 | 來源:網(wǎng)站運(yùn)營
時(shí)間:2023-09-01 02:00:01 來源:網(wǎng)站運(yùn)營
10個(gè)好用的的css框架:優(yōu)秀的css框架可以使開發(fā)變得更加快速,不再為兼容性苦惱,并且一般都會(huì)有合理的布局,作為開發(fā)可以減少對UI設(shè)計(jì)的思考。近期我們整理了一些css框架供開發(fā)者選擇和使用,排名不分先后。
一、tailwind
Tailwind CSS 是一個(gè)功能類優(yōu)先的 CSS 框架,它集成了諸如
flex,
pt-4,
text-center 和
rotate-90 這樣的的類,它們能直接在腳本標(biāo)記語言中組合起來,構(gòu)建出任何設(shè)計(jì)。
主要特性:
傳送門:tailwindcss.com/
二、Tachyons
Tachyons具備了當(dāng)前流行的css框架的優(yōu)點(diǎn),無需自己編寫大量 CSS。輕量、可定制化和拓展等。Tachyons有極其細(xì)化的原子類,只需要在類名中添加屬性新的樣式即可。不必?fù)?dān)心命名沖突,也無需擔(dān)心樣式覆蓋,這樣可以更能直觀的看出樣式的具體內(nèi)容。
傳送門:tachyons.io/
三、Skeleton
如果您正在著手一個(gè)較小的項(xiàng)目,或者只是覺得不需要大型框架的所有實(shí)用程序,則應(yīng)該使用 Skeleton。
在Skeleton css官網(wǎng)中,介紹了三個(gè)Skeleton的三大優(yōu)勢:
- Light as a feather at ~400 lines & built with mobile in mind.(超輕量級(jí), 為移動(dòng)端打造)
- Styles designed to be a starting point, not a UI framework.(樣式設(shè)計(jì)為起點(diǎn),而非 UI 框架)
- Quick to start with zero compiling or installing necessary.
(快速入門,零編譯或安裝必要)
根據(jù)Skeleton的特點(diǎn)和優(yōu)勢,可以把它的典型應(yīng)用場景歸納為:
- css學(xué)習(xí)和demo練習(xí);
- 創(chuàng)建小型的響應(yīng)式手機(jī)應(yīng)用;
傳送門:getskeleton.com/
四、Foundation
Foundation 是由產(chǎn)品設(shè)計(jì)公司 ZURB 制作的自適應(yīng)前端框架。 相比于其他同類型工具,F(xiàn)oundation的移動(dòng)化方案更加出色。借鑒響應(yīng)式Web設(shè)計(jì)的思路和方法,F(xiàn)oundation對內(nèi)容結(jié)構(gòu)在不同類型設(shè)備中的的呈現(xiàn)方式進(jìn)行了相應(yīng)的預(yù)設(shè)。
傳送門:get.foundation/
五、bootstrap
Bootstrap仍然是最流行的 CSS 框架之一。他們提供了大量的文檔、示例和演示,可以幫你快速進(jìn)行響應(yīng)式 Web 開發(fā)。該框架的當(dāng)前版本是 Bootstrap 5,相較于V4,做出了一些改變:
- 擁有了自己的SVG圖標(biāo)庫
- 不再支持jquery
- 不再支持IE
- 增加了css自定義屬性
- 增強(qiáng)的網(wǎng)格系統(tǒng)
- Forms可被更新
傳送門:getbootstrap.com/
六、UIkit
相較于其他通用的css框架,UIkit有一些這些框架沒有的組件,比如
- Lightbox(利用模態(tài)對話框?yàn)閳D片和視頻創(chuàng)建一個(gè)別致的燈箱)
- Parallax(依賴于頁面滾動(dòng)條位置的動(dòng)態(tài) CSS 特性)
- Nestable(創(chuàng)建可以通過拖拽排序的可嵌套式列表)
- Sortable(創(chuàng)建可排序的網(wǎng)格和列表重新來排列元素的順序)
傳送門:getuikit.com/
七、Semantic UI
Semantic意為語義,由于Semantic UI類在命名上清晰易懂,因此開發(fā)人員不但節(jié)省了學(xué)習(xí)的時(shí)間,也讓手頭上項(xiàng)目的開發(fā)更快、更直觀。此外布局的多樣性是Semantic UI的另一個(gè)優(yōu)勢。通過不同的主題,您可以輕松地為各種項(xiàng)目找到必要的組件。
Semantic UI存在一些缺點(diǎn),更新頻率相較于其他熱門框架較低,并且在某些設(shè)備運(yùn)行響應(yīng)能力一般。
傳送門:semantic-ui.com/
八、Bulma
Bulma 是一個(gè)基于 Flexbox 的現(xiàn)代化的 CSS 框架。它提供了隨時(shí)可用的前端組件,您可以輕松地組合這些組件來構(gòu)建響應(yīng)式 Web 界面。
和bootstrap相比,兩者最大的區(qū)別是,bulma是純css,沒有js,bootstrap有JS。這里舉個(gè)
列布局的例子:
- 添加
columns
容器 - 添加任意數(shù)量的
column
元素
無論列數(shù)是多少,每一列的
寬度都
相等。
<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> 復(fù)制代碼
傳送門:bulma.io/
九、Picnic
Picnic是一個(gè)輕量級(jí)CSS框架,壓縮后的大小不到10kb。該框架最大的特點(diǎn)就是具有多個(gè)交互式組件,包括柵格、表單、選項(xiàng)卡、工具提示等等,可以幫助開發(fā)人員快速創(chuàng)建響應(yīng)式網(wǎng)站和web應(yīng)用程序。
Picnic CSS是一個(gè)用
Sass寫的輕量級(jí)UI框架,它能更容易的編輯和自定義變量,如顏色和長度。它還有一些不錯(cuò)的純CSS寫的UI組件,如模態(tài)窗口和內(nèi)容滑塊。
傳送門:picnicss.com/
十、NES.css
NES.css 模仿了8 位 Nintendo Entertainment System 圖形,營造出復(fù)古的游戲外觀:
NES.css 只需要 CSS,不依賴任何 JavaScript。作為每個(gè)游戲發(fā)燒友都會(huì)大呼:愛了!
傳送門:nostalgic-css.github.io/NES.css/
GitHub:github.com/nostalgic-c…
我建了一個(gè)前端小白交流群,私信我,進(jìn)入交流群。我會(huì)給大家分享我收集整理的各種學(xué)習(xí)資料,組織大家一起做項(xiàng)目練習(xí),幫助大家匹配一位學(xué)習(xí)伙伴互相監(jiān)督學(xué)習(xí),歡迎加入作者:騰訊TNTWeb前端團(tuán)隊(duì)
鏈接:10個(gè)好用的的css框架
來源:稀土掘金