建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是CUGGZ，今天來分享 GitHub 上一些熱門的 CSS 框架!
成都創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、周村網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為周村等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
1、Bootstrap
Bootstrap是 Twitter 推出的基于HTML、CSS、JavaScript 開發(fā)的簡(jiǎn)潔、直觀、強(qiáng)悍的CSS開發(fā)框架，使得 Web 開發(fā)更加快捷。Bootstrap 提供了優(yōu)雅的HTML和CSS規(guī)范，它由動(dòng)態(tài)CSS語言Less寫成。Bootstrap 推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目。
Bootstrap 的優(yōu)點(diǎn)：
流行框架： Bootstrap 是最流行的開源項(xiàng)目之一。在遇到問題時(shí)可以很容易的找到解決方案。
功能齊全： 它不僅是一個(gè)開發(fā)框架，還是一個(gè)預(yù)構(gòu)建的動(dòng)態(tài)模板，包含很多現(xiàn)成的組件。這可以使任何開發(fā)人員，即使沒有前端經(jīng)驗(yàn)，也可以更輕松地開發(fā)結(jié)構(gòu)良好的頁面。
可定制： 可以輕松定制 Bootstrap?？梢允褂?npm 安裝項(xiàng)目，導(dǎo)入需要的部分，并使用 CSS 變量自定義幾乎所有內(nèi)容。
成熟且受支持： Bootstrap 最初由 Twitter 退出，現(xiàn)在由數(shù)百名開發(fā)人員組成的社區(qū)維護(hù)，確保穩(wěn)定發(fā)布和長(zhǎng)期支持。
Bootstrap 的缺點(diǎn)：
難以覆蓋： Bootstrap 具有非常具體的設(shè)計(jì)和外觀，如果想要不同的風(fēng)格，就很難覆蓋。由于它廣泛的使用 CSS 中的!important規(guī)則，因此可能很難覆蓋默認(rèn)值。
依賴 jQuery： 與其他僅支持 CSS 的框架不同，Bootstrap 4 的許多交互功能都依賴于 jQuery。這使得將它與 React 或 Vue 等 JavaScript 框架一起使用變得更加困難，但也不是不可能。不過，在 Boostrap 5 中刪除了 jQuery 依賴項(xiàng)。
依賴繁重： Bootstrap 在項(xiàng)目中非常繁重，盡管可以只導(dǎo)入需要的部分，但它不像其他框架那樣輕量級(jí)或模塊化。
GitHub：https://github.com/twbs/bootstrap。
2、 Foundation
Foundation 是一個(gè)用于開發(fā)響應(yīng)式的 HTML, CSS 和 JavaScript 框架。它是一個(gè)易用、強(qiáng)大而且靈活的框架，用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用，是一個(gè)移動(dòng)優(yōu)先的流行框架。
實(shí)際上，F(xiàn)oundation 不僅僅是一個(gè) CSS 框架，而是一系列前端開發(fā)工具。這些工具可以一起使用，也可以完全獨(dú)立使用。
Foundation 的優(yōu)點(diǎn)：
通用風(fēng)格： 與 Bootstrap 不同，F(xiàn)oundation 沒有為其組件使用獨(dú)特的風(fēng)格。其廣泛的模塊化和靈活的組件具有最小的樣式，并且可以輕松定制。
功能齊全： Foundation 提供了很多內(nèi)置組件。還可以訪問由開發(fā)團(tuán)隊(duì)或社區(qū)創(chuàng)建的預(yù)定義的 HTML 模板，可以根據(jù)需求去使用這些模板。
電子郵件設(shè)計(jì)： oundation for Emails 可以為任何客戶端創(chuàng)建響應(yīng)式電子郵件模板，包括舊版本的 Microsoft Outlook。
動(dòng)畫： Foundation 可以輕松地與 ZURB 的 Motion UI 庫集成，讓我們可以使用內(nèi)置效果來創(chuàng)建過渡和動(dòng)畫。
Foundation 的缺點(diǎn)：
學(xué)習(xí)成本高： Foundation 有很多特性，比其他框架復(fù)雜得多。在進(jìn)行前端布局時(shí)，它提供了很大的自由度，所以我們就需要了解這一切是如何工作的。
依賴 Javascript： Foundation 的許多功能都依賴于 Javascript，使用 jQuery 或 Zepto。Zepto 是一個(gè)與 jQuery 使用相同語法但占用空間更小的庫。這使得 Foundation 不太適合 React 或 Angular 項(xiàng)目。Zepto 也是一個(gè)鮮為人知的庫，沒有多少開發(fā)人員熟悉。
GitHub：https://github.com/foundation/foundation-sites。
3、 Bulma
Bulma 是一個(gè)免費(fèi)的開源CSS框架，它提供了現(xiàn)成的前端組件，可以輕松地組合這些組件來構(gòu)建響應(yīng)式 Web 界面。Bulma 框架最大的特點(diǎn)就是簡(jiǎn)單好用。所有樣式都基于class，只需為 HTML 元素指定class，樣式將立刻生效。
Bulma 的優(yōu)點(diǎn)：
美學(xué)設(shè)計(jì)： Bulma 它采用簡(jiǎn)潔現(xiàn)代的設(shè)計(jì)，即使不更改默認(rèn)設(shè)置，最終也會(huì)得到一個(gè)漂亮的網(wǎng)頁。
現(xiàn)代： CSS 的 flexbox 布局使得創(chuàng)建響應(yīng)式布局變得更加容易，而 Bulma 是最早基于 flexbox 實(shí)現(xiàn)的框架之一。
對(duì)開發(fā)人員友好： Bulma 旨在為開發(fā)人員提供出色的體驗(yàn)?？紤]到這一點(diǎn)，Bulma 提供了易于使用和記憶的命名約定。
易于定制： Bulma 的顏色、填充和許多默認(rèn)屬性都可以使用 SASS 進(jìn)行定制。這樣，可以在幾分鐘內(nèi)設(shè)置項(xiàng)目的默認(rèn)值。
沒有 Javascript： Bulma 不包含 JavaScript 功能。由于它是純 CSS 的，因此可以輕松地與 Vue 或 React 等 Javascript 框架集成。
Bulma 的缺點(diǎn)：
獨(dú)特的風(fēng)格： Bulma的獨(dú)特風(fēng)格是一把雙刃劍。由于它非常獨(dú)特，如果它被過度使用，最終會(huì)得到看起來非常相似的網(wǎng)站，就像 Bootstrap 一樣。
不太完整： Bulma 在許多情況下都在與 Boostrap 競(jìng)爭(zhēng)，但在可訪問性和其他企業(yè)級(jí)功能方面并不完整。
GitHub：https://github.com/jgthms/bulma。
4、 Tailwind
Tailwind CSS 是一個(gè)功能類優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的類，它們能直接在HTML中組合起來，構(gòu)建出任何設(shè)計(jì)。
Tailwind 的優(yōu)點(diǎn)：
原子 CSS： Tailwind 通過提供強(qiáng)大的實(shí)用程序類使常見的樣式易于實(shí)現(xiàn)。這種方法有時(shí)被稱為原子 CSS，其中 HTML 元素的類清楚地描述了它的外觀。只需使用指定的class，樣式即可生效。
沒有設(shè)計(jì)： Tailwind 沒有預(yù)制組件或特定的設(shè)計(jì)語言。所以不必覆蓋現(xiàn)有樣式，在自定義設(shè)計(jì)時(shí)可以提高工作效率。
可重用組件： Tailwind 允許創(chuàng)建自己的自定義組件，可以在整個(gè)項(xiàng)目中重用這些組件，還可以在官網(wǎng)上找到一些組件示例。
強(qiáng)大的 PostCSS/SASS 集成： 要充分利用 Tailwind，需要安裝并將其導(dǎo)入 SASS 或 PostCSS 項(xiàng)目。這使可以利用 Tailwind 的所有功能來編寫更有效的 CSS。
Tailwind 的缺點(diǎn)：
學(xué)習(xí)成本高： 對(duì)于經(jīng)驗(yàn)不足的開發(fā)人員來說，Tailwind 并不是最佳選擇。由于它不提供預(yù)制組件，因此需要充分了解前端技術(shù)的工作原理。Tailwind 的學(xué)習(xí)成本較高，必須學(xué)習(xí)相關(guān)語法才能使用該框架高效工作。
不能直接使用： Tailwind 可以作為捆綁的 CSS 文件添加到項(xiàng)目中。但如果這樣添加框架，它的許多功能將不可用，并且將無法使用壓縮版本(壓縮版 27 KB、原始版 348 KB )。要充分利用 Tailwind，需要知道如何使用 Webpack、Gulp 或其他前端構(gòu)建工具。
GitHub：https://github.com/tailwindlabs/tailwindcss。
5、 UIkit
UIkit 是 YOOtheme 團(tuán)隊(duì)開發(fā)的一款輕量級(jí)、模塊化的前端框架，可快速構(gòu)建強(qiáng)大的前端界面。UIKit提供了全面的HTML、CSS、JavaScript組件。它基于LESS開發(fā)，代碼結(jié)構(gòu)清晰簡(jiǎn)單，易于擴(kuò)展和維護(hù)，并且具有體積小、反應(yīng)靈敏的響應(yīng)式組件，可以根據(jù) UIKit 基本的風(fēng)格樣式，輕松地自定義創(chuàng)建出自己喜歡的主題樣式。
UIkit 的優(yōu)點(diǎn)：
數(shù)十個(gè)組件： UIKit 通過數(shù)十個(gè)組件，可以實(shí)現(xiàn)復(fù)雜的前端布局。它包括所有典型的實(shí)用程序和組件，并且可以訪問高級(jí)元素，如導(dǎo)航欄、畫布外邊欄和視差設(shè)計(jì)等。
可擴(kuò)展： UIKit 可以使用 LESS 或 SASS 預(yù)處理器輕松定制和擴(kuò)展。
基于 UI 的定制器： UIKit 提供了一個(gè)基于 Web 的定制器，可以實(shí)時(shí)定制設(shè)計(jì)，然后將 SASS 或 LESS 變量復(fù)制到項(xiàng)目中。
UIkit 的缺點(diǎn)：
不適合小型項(xiàng)目： 不建議經(jīng)驗(yàn)不足的開發(fā)人員使用 UIKit，因?yàn)樗且粋€(gè)復(fù)雜的框架，需要深入了解。它非常適合高級(jí)應(yīng)用程序，但對(duì)于小型項(xiàng)目可能太復(fù)雜了。
社區(qū)較?。?/strong> 它不像其他框架那樣受歡迎，遇到問題可能較難找到答案。
GitHub：https://github.com/uikit/uikit。
6、 Milligram
Milligram 提供了最小的樣式設(shè)置，以快速和干凈為起點(diǎn)。壓縮后只有 2kb!它為更好的性能和更高的生產(chǎn)力而設(shè)計(jì)，需要重置的屬性更少，代碼更簡(jiǎn)潔。
Milligram 的優(yōu)點(diǎn)：
極簡(jiǎn) CSS 框架： Milligram 易于設(shè)置和上手。盡管它提供了強(qiáng)大的功能來提高生產(chǎn)力，但它在壓縮后僅有 2 KB。
無默認(rèn)樣式： 與其他框架不同，Milligram 沒有默認(rèn)樣式。在實(shí)現(xiàn)自定義樣式時(shí)，無需重置或覆蓋不符合目標(biāo)的屬性。
易于學(xué)習(xí)： 上手非常簡(jiǎn)單，閱讀官方文檔足以入門。
Milligram 的缺點(diǎn)：
無模板： Milligram 沒有提供預(yù)制的模板。
社區(qū)較?。?/strong> Milligram 有一個(gè)小而緊密的社區(qū)。尋找社區(qū)的支持并不像使用更流行的 CSS 框架那么容易。
GitHub：https://github.com/milligram/milligram。
7、Pure
Pure.css是美國(guó)雅虎公司出品的一組輕量級(jí)、響應(yīng)式純CSS模塊，適用于任何Web項(xiàng)目。這個(gè)框架非常小，在使用所有模塊時(shí)壓縮后只有 3.7 KB。
Pure 的優(yōu)點(diǎn)：
輕量： 每一行 CSS 都經(jīng)過仔細(xì)考慮和編寫，以使框架輕量級(jí)和高性能。
可定制： 可以以模塊化方式導(dǎo)入 Pure 并僅實(shí)現(xiàn)需要的內(nèi)容。
支持良好： 與社區(qū)項(xiàng)目不同，Pure 得到 Yahoo 的支持，這使得該項(xiàng)目成為長(zhǎng)期使用的安全選擇。
現(xiàn)成的組件： Pure 帶有響應(yīng)式和為現(xiàn)代網(wǎng)絡(luò)構(gòu)建的預(yù)制組件。
Pure 的缺點(diǎn)：
不適用于小團(tuán)隊(duì)： Pure 不適合經(jīng)驗(yàn)不足或者小型的團(tuán)隊(duì)，因?yàn)樾枰獎(jiǎng)?chuàng)建自己的設(shè)計(jì)來使用該框架。
GitHub：https://github.com/pure-css/pure。
8、Tachyons
Tachyons與其他流行的前端框架不同，Tachyons旨在將CSS規(guī)則分解為小型的、可管理的、以及可復(fù)用的部件。Tachyons可以幫助開發(fā)人員創(chuàng)建出具有高度可讀性、能夠快速加載和響應(yīng)的網(wǎng)站，而且無需使用大量CSS代碼。
Tachyons 的優(yōu)點(diǎn)：
即用型組件： 盡管 Tachyons 專注于提供出色的實(shí)用程序類以提高生產(chǎn)力，但官方文檔也包含許多即用型組件。
多樣化： Tachyons 提供可用于不同設(shè)置的功能模板，例如靜態(tài) HTML、Rails、React、Angular 等。
可重復(fù)使用： Tachyon 是創(chuàng)建可擴(kuò)展設(shè)計(jì)系統(tǒng)的絕佳選擇。該框架允許創(chuàng)建可重用的屬性來構(gòu)建多樣化和靈活的組件。
Tachyons 的缺點(diǎn)：
主要用于 PostCSS： PostCSS 是使用 Tachyons 的主要方式，但不像 LESS 或 SASS 那樣廣泛使用。Tachyons 確實(shí)提供了 SASS 的集成，但它并未得到廣泛使用和支持。
GitHub：https://github.com/tachyons-css/tachyons。
9、Materialize
Materialize是一個(gè)使用CSS，JavaScript和HTML創(chuàng)建的UI組件庫。實(shí)現(xiàn)UI組件有助于構(gòu)建有吸引力，一致和功能的網(wǎng)頁和網(wǎng)絡(luò)應(yīng)用程序，同時(shí)堅(jiān)持現(xiàn)代網(wǎng)絡(luò)設(shè)計(jì)原則，如瀏覽器可移植性，設(shè)備獨(dú)立性和優(yōu)雅的降級(jí)。它有助于創(chuàng)建更快，更美觀，更靈敏的網(wǎng)站。它的靈感來自Google Material Design。
Materialize 的優(yōu)點(diǎn)：
功能齊全： Materialize CSS 提供了很多預(yù)制組件，還帶有更高級(jí)的 Javascript 功能來支持交互。
移動(dòng)友好： 可以使用框架的類似移動(dòng)設(shè)備的組件(例如浮動(dòng)導(dǎo)航欄和滑動(dòng)交互)創(chuàng)建漸進(jìn)式 Web 應(yīng)用程序。
Materialize 的缺點(diǎn)：
嚴(yán)格的設(shè)計(jì)語言： 如果想做一些不接近材料設(shè)計(jì)的事情，最好避免使用 Materialise。
獨(dú)立項(xiàng)目： Materialise 有一個(gè)活躍的社區(qū)，但它是一個(gè)小型且獨(dú)立的項(xiàng)目，沒有企業(yè)支持。
GitHub：https://github.com/Dogfalo/materialize。
當(dāng)前標(biāo)題：九個(gè)幫你提高開發(fā)效率的現(xiàn)代CSS框架
文章鏈接：http://fisionsoft.com.cn/article/dheesdd.html
