整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
于UI / UX設(shè)計(jì)人員而言，要制作一個(gè)在每個(gè)瀏覽器上都看起來不錯(cuò)的漂亮網(wǎng)站不是一件容易的事。在創(chuàng)建網(wǎng)站布局并使其美觀時(shí)，開發(fā)人員必須考慮所有Web瀏覽器和移動(dòng)視圖。
恐懼始終存在于內(nèi)部，如果設(shè)計(jì)在某個(gè)愚蠢的瀏覽器上某個(gè)地方可怕地崩潰，該怎么辦！多虧了 CSS使開發(fā)人員的生活變得無限輕松的框架。
CSS框架消除了大部分麻煩，如今，開發(fā)人員無法想象沒有CSS框架的代碼。這些框架不僅節(jié)省了大量時(shí)間，而且還有助于以更好，更快的方式構(gòu)建漂亮的響應(yīng)式Web應(yīng)用程序。
這些框架提供了基本結(jié)構(gòu)，包括網(wǎng)格，交互式UI模式，Web排版，工具提示，按鈕，表單元素，圖標(biāo)。提供了現(xiàn)成的解決方案，這有助于快速構(gòu)建網(wǎng)站。您不需要從頭開始，也可以重用項(xiàng)目中的代碼。
現(xiàn)在有一個(gè)問題，哪個(gè)框架最適合您？如果您不熟悉前端開發(fā)，那么選擇框架可能會(huì)有些棘手。
老實(shí)說，每個(gè)CSS框架都有其優(yōu)缺點(diǎn)，因此，這取決于您的特定需求。在本文中，我們將討論一些適用于大多數(shù)行業(yè)開發(fā)人員的流行CSS框架。
我們?cè)谶^濾這些框架時(shí)會(huì)牢記它們的優(yōu)缺點(diǎn)。讓我們討論這些框架。
1、Bootstrap
地址：https://getbootstrap.com/
您可能肯定已經(jīng)聽說過此框架，即使這是您的第一個(gè)工作。該框架是第一個(gè)推廣“智能手機(jī)優(yōu)先”理念的框架。Bootstrap是世界上最流行的CSS框架，它于2011年由Twitter引入。
Bootstrap在大規(guī)模構(gòu)建響應(yīng)式設(shè)計(jì)方面有很大幫助。當(dāng)包含相關(guān)的引導(dǎo)程序類時(shí)，它將自動(dòng)針對(duì)不同的屏幕尺寸調(diào)整設(shè)計(jì)。它提供了大量的插件和主題生成器。
該框架的當(dāng)前版本是Bootstrap 4，其中包括一些其他功能，例如新的配色方案，新的修改器，新的實(shí)用程序類。版本4是使用SASS構(gòu)建的，這意味著Bootstrap現(xiàn)在已經(jīng)支持LESS和SASS。
優(yōu)點(diǎn)：
快速成型
大型生態(tài)系統(tǒng)
大量的組件
LESS和SASS支持
簡(jiǎn)單的文檔和較低的學(xué)習(xí)曲線
由Twitter開發(fā)，因此對(duì)社區(qū)有長(zhǎng)期的長(zhǎng)期信任。
2、Foundation
地址：https://get.foundation/
開發(fā)人員說，如果編程是一種宗教，那么基金會(huì)和Bootstrap的家伙將處于障礙的兩邊。Foundation是世界上另一個(gè)使用最廣泛的一流CSS框架。許多公司（例如Facebook，eBay，Mozilla，Adobe甚至Disney）都使用它。該框架是基于Saas（如引導(dǎo)程序）構(gòu)建的。它更加復(fù)雜，靈活并且易于定制。它也帶有CLI，因此很容易與模塊捆綁器一起使用。它提供了Fastclick.js工具，可在移動(dòng)設(shè)備上更快地呈現(xiàn)。
優(yōu)點(diǎn)：
創(chuàng)建響應(yīng)式設(shè)計(jì)
強(qiáng)大的電子郵件框架
極高的靈活性
在線網(wǎng)絡(luò)研討會(huì)培訓(xùn)支持。
易于定制。
提供了完整的模塊化工具集，可讓您解決幾乎所有的界面任務(wù)
UI組件及更多：先進(jìn)的成像系統(tǒng)，定價(jià)表組件，表單驗(yàn)證，垂直時(shí)間軸布局，RTL支持等等。
3、Bulma
地址：https://bulma.io/
與其他CSS框架相比，Bulma是市場(chǎng)上相對(duì)較新的框架，但Bulma設(shè)法在短時(shí)間內(nèi)獲得了用戶的很多關(guān)注。這個(gè)免費(fèi)的開源CSS框架基于Flexbox布局模型。最好的事情是，它完全基于CSS，根本不需要javascript。全球有200,000多名開發(fā)人員在使用它。它反應(yīng)靈敏，輕巧，并且遵循“移動(dòng)優(yōu)先”的方法。
優(yōu)點(diǎn)：
所有CSS類名稱均按邏輯命名，因此易于學(xué)習(xí)和記住語法。
純CSS，無JavaScript
大社區(qū)
模塊化：使用Saas構(gòu)建，您可以通過僅導(dǎo)入所需的必要功能來設(shè)計(jì)界面。
大量組件，例如垂直對(duì)齊解決方案，布局以及媒體對(duì)象
4、Pure
地址：https://purecss.io/
由Yahoo開發(fā)的Pure是一個(gè)輕量級(jí)的響應(yīng)CSS框架。它使用Normalize.css構(gòu)建，可幫助使用網(wǎng)格和菜單創(chuàng)建響應(yīng)式布局。可以將其分為不同的CSS模塊，并且可以根據(jù)您的需求和偏好導(dǎo)入這些模塊。因此，如果僅需要網(wǎng)格系統(tǒng)，則無需導(dǎo)入整個(gè)CSS并增加站點(diǎn)的加載時(shí)間。與Bootstrap不同，它不允許創(chuàng)建固定的布局。
優(yōu)點(diǎn)：
移動(dòng)友好
完全基于CSS，因此很容易學(xué)習(xí)。
它提供5點(diǎn)，2點(diǎn)，24點(diǎn)等的變化。因此，在創(chuàng)建網(wǎng)格和列系統(tǒng)時(shí)可以更加靈活地使用它。
5、Semantic UI
地址：https://semantic-ui.com/
該框架以其令人難以置信的主題效果以及簡(jiǎn)單優(yōu)雅的設(shè)計(jì)而聞名。語義UI是使用人類友好的HTML的響應(yīng)框架，它允許您創(chuàng)建一個(gè)獨(dú)特而美觀的網(wǎng)站，而無需進(jìn)行多次更改。它提供3000多個(gè)主題變量和50多個(gè)UI組件。它還支持第三方庫，如React，Meteor，Ember，React等。
優(yōu)點(diǎn)：
友好的類名：它使用人類友好的HTML，因此可以使用自然語言進(jìn)行編碼。
與Bootstrap 4和其他框架相比更具吸引力的布局。
僅加載必要的組件，從而減少了下載時(shí)間和文件大小
廣泛的組件
6、Tailwind CSS
地址：https://tailwindcss.com/
Tailwind CSS是一個(gè)靈活且高度可定制的低級(jí)CSS框架。Tailwind用PostCSS編寫并用JavaScript配置。您將使用低級(jí)實(shí)用程序類來自定義設(shè)計(jì)，而不是使用預(yù)先構(gòu)建的組件，從而使您可以完全控制網(wǎng)站的最終制作方式。從正面尺寸到間距，從斷點(diǎn)到陰影，從顏色到邊框尺寸都可以自定義。例如，您可以為按鈕賦予藥丸，輪廓和3D外觀。您可以個(gè)性化每個(gè)方面，并且可以以獨(dú)特的樣式創(chuàng)建設(shè)計(jì)，該樣式看起來絕對(duì)不同于其他框架，例如Bootstrap或UI套件。
優(yōu)點(diǎn)：
易于定制
實(shí)用程序類
帶有響應(yīng)式選項(xiàng)
7、UI kit
地址：https://getuikit.com/
這個(gè)強(qiáng)大的CSS框架以極簡(jiǎn)主義功能而聞名。UI Kit是一個(gè)輕量級(jí)的最小CSS框架，幾乎包含其他框架的所有功能。
您可以使用最大的空白空間和許多UI組件（例如SVG圖標(biāo)，進(jìn)度條，圖像制作器等）來創(chuàng)建超干凈，優(yōu)雅且美觀的Web界面。有許多令人難以置信的組件，統(tǒng)一的樣式和自定義選項(xiàng)。您可以使用Nestable之類的組件創(chuàng)建高級(jí)界面。它使用可靠且無沖突的命名約定。您還可以使用純HTML設(shè)計(jì)復(fù)雜的基于flexbox的布局。
優(yōu)點(diǎn)：
極簡(jiǎn)主義
大量有用的UI組件集合。
與更少和更少兼容
包含JavaScript
對(duì)任何設(shè)備的適應(yīng)性
8、Materialize CSS
地址：https://materializecss.com/
如果您喜歡使用材料設(shè)計(jì)，那么您絕對(duì)應(yīng)該檢查一下這個(gè)框架。它由Google于2014年創(chuàng)建，該框架對(duì)于想要設(shè)計(jì)網(wǎng)站或Android Web應(yīng)用程序的人來說是一個(gè)很好的解決方案。許多Google產(chǎn)品都在此框架上實(shí)現(xiàn)，例如YouTube，Gmail，Google云端硬盤和Google文檔。
它帶有一些現(xiàn)成的組件和類，使您無需花費(fèi)太多精力就可以盡快完成工作。該框架使用由Bootstrap建立的基于12列網(wǎng)格的布局，響應(yīng)性動(dòng)畫和過渡，填充以及諸如燈光和陰影之類的深度效果。使用其預(yù)建的入門模板，您可以以最少的設(shè)置時(shí)間來設(shè)計(jì)網(wǎng)站。
優(yōu)點(diǎn)：
材料設(shè)計(jì)
引導(dǎo)網(wǎng)格
大量的組件選擇
輕松定制
與Sass兼容
9、Skeleton
地址：http://getskeleton.com/
顧名思義，Skeleton是最簡(jiǎn)單，響應(yīng)最少的CSS框架。它僅包含400行代碼，但是提供了在項(xiàng)目中使用的多種選擇。諸如網(wǎng)格，版式，按鈕，表單，列表，媒體查詢，表格等功能使您可以輕松創(chuàng)建復(fù)雜的網(wǎng)站。我們已經(jīng)在CSS框架中提到了它，但是更少的代碼行沒有將自身定義為CSS框架，庫甚至模塊。它實(shí)際上是一個(gè)樣板，對(duì)小型項(xiàng)目或作為UI / UX開發(fā)人員開始其職業(yè)的人都非常有用。它僅帶有有限數(shù)量的標(biāo)準(zhǔn)HTML元素，但這足以開始使用簡(jiǎn)單而優(yōu)雅的網(wǎng)站。
優(yōu)點(diǎn)：
移動(dòng)友好
簡(jiǎn)單易學(xué)
10、Miligram
地址：https://milligram.io/
顧名思義，這是另一個(gè)輕量級(jí)CSS框架，旨在更快地創(chuàng)建網(wǎng)站。框架的大小僅為2Kb，但它具有許多功能和Web開發(fā)工具來滿足您的需求。它為開發(fā)人員提供了靈活性，并允許他們使用CSS3規(guī)范提供的所有功能。您還可以使用幾行自定義CSS進(jìn)行擴(kuò)展。
優(yōu)點(diǎn)：
基于Flexbox網(wǎng)格
超級(jí)設(shè)計(jì)主題
我們已經(jīng)提到了一些CSS框架，這些框架在開發(fā)人員中非常流行，但是您也可以嘗試其他一些CSS框架。其他一些流行的框架包括Susy，Animate.css，Paper CSS，NES.css，Base，Tent CSS，Simple Grid，Spectre，Mustard UI，Picnic CSS，Mini.css，Gumby等。
多年開發(fā)老碼農(nóng)福利贈(zèng)送：網(wǎng)頁制作，網(wǎng)站開發(fā)，web前端開發(fā)，從最零基礎(chǔ)開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動(dòng)端小程序項(xiàng)目實(shí)戰(zhàn)【視頻＋工具＋電子書＋系統(tǒng)路線圖】都有整理，需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址，送給每一位對(duì)編程感興趣的小伙伴
同瀏覽器對(duì)網(wǎng)頁默認(rèn)的組件解析樣式不一致，而且不夠美觀，網(wǎng)頁樣式開發(fā)需要大量時(shí)間，今天介紹一款優(yōu)雅的 CSS 框架。
Pico.css 是一個(gè)簡(jiǎn)單輕量化的 CSS UI 框架，最大的特點(diǎn)是樣式都基于 HMTL 原始的標(biāo)簽名和內(nèi)置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護(hù)性強(qiáng)，能夠幫助開發(fā)者構(gòu)建自己的 UI 系統(tǒng)，也可以直接用于快速的小型項(xiàng)目中。
Pico-css 官網(wǎng)
截止發(fā)文日期，Pico.css 在 Github 上已經(jīng)有高達(dá) 3898 個(gè) Star。
引入 Pico.css 最簡(jiǎn)單直接的方式就是下載后直接引入一個(gè)樣式文件：
Pico-css cdn 引入
當(dāng)然也可以通過 npm 安裝：
Pico-css npm 安裝
然后就可以編寫 html 代碼了。
想要做一個(gè)輸入框和提交表單，往往需要這樣的代碼：
常規(guī)實(shí)現(xiàn) form 表單代碼
而使用 Pico.css，只需要：
Pico-css 實(shí)現(xiàn)表單
Pico.css 內(nèi)置了很多基礎(chǔ)的組件，包括常用表單控件、表格、彈窗、導(dǎo)航菜單、卡片等，代碼非常簡(jiǎn)潔，比如實(shí)現(xiàn)一個(gè)美觀的進(jìn)度條，只需要這點(diǎn)代碼：
Pico-css 實(shí)現(xiàn)進(jìn)度條
Pico.css 內(nèi)置了淺色和深色兩套主題，使用方法非常簡(jiǎn)單，給父級(jí)元素添加屬性data-theme。
切換主題
官網(wǎng)還有很多代碼例子，比如編寫一個(gè)美觀大氣的登錄界面，html 代碼十分簡(jiǎn)潔，仿佛回到了剛剛開始學(xué)習(xí) html 語法的時(shí)代。
登錄界面
通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標(biāo)簽名、內(nèi)置的屬性以及自定義屬性來命中，這樣就規(guī)避了常規(guī)的只使用 class 來區(qū)分的“命名地獄”，是一種非常好的網(wǎng)頁編程思路。
Pico-css 源碼
面向?qū)兇?HTML 有極致追求的開發(fā)者，Pico.css 還提供了 classless 版本，這個(gè)版本將一個(gè) class 都沒有，完全使用元素標(biāo)簽名和屬性編寫網(wǎng)頁。
在項(xiàng)目中使用 Pico.css 源自于一次快速的營(yíng)銷頁需求，需要做簡(jiǎn)單的幾個(gè)帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點(diǎn)笨重了，如果使用當(dāng)前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個(gè)簡(jiǎn)單的頁面，沒有必要用中大型項(xiàng)目的標(biāo)配，考慮到目前市面上大多數(shù) UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會(huì)讓頁面加載變慢，而且會(huì)導(dǎo)致更長(zhǎng)的樣式計(jì)算時(shí)間，最終還是找到了適合這樣場(chǎng)景的 Pico.css。
css 樣式的寫法很自由，目前前端開發(fā)存在一個(gè)趨勢(shì)，為了做精美的界面，需要花費(fèi)大量的時(shí)間來寫樣式，為了樣式可以復(fù)用，絞盡腦汁給 class 起名字，甚至網(wǎng)上還有各種 class 命名規(guī)范，這可能導(dǎo)致了大量的樣式被覆蓋，很多時(shí)候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護(hù)。
Pico.css 的出現(xiàn)給這樣的開發(fā)現(xiàn)狀提供了一種新思路，不僅可以直接用在實(shí)際項(xiàng)目中，也能夠作為構(gòu)建自己的 UI 庫的基礎(chǔ)樣式。
Pico.css 是一個(gè)免費(fèi)開源的項(xiàng)目，源碼基于 MIT 開源協(xié)議托管在 Github 上，任何個(gè)人和公司都可以免費(fèi)下載使用。
關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。
↓↓點(diǎn)擊查看本次分享的網(wǎng)址。
Pico.css - 簡(jiǎn)單優(yōu)雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標(biāo)簽來做界面｜那些免費(fèi)的磚
app 內(nèi)嵌H5頁面，個(gè)人中心頁面模板，包含 列表 按鈕 圖片 icon 搜索 布局 上傳 對(duì)話框 。
手機(jī)演示地址：http://www.17sucai.com/preview/10221/2017-01-20/ceshi/index.html — my-read.html — my-secure.html — my-put.html — my-up.html
手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22887
手機(jī)版大氣信息管理系統(tǒng)界面模板
手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22475
藍(lán)色的手機(jī)登錄模板
手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/22480
蘋果風(fēng)格
手機(jī)演示地址：http://www.17sucai.com/pins/demoshow/20946
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
