Foundation框架
Foundation是一個響應式前端框架系列,可以輕松設計漂亮的響應式網站,應用程序和電子郵件,在任何設備上看起來都很棒。Foundation是語義,可讀,靈活且完全可定制的。我們不斷添加新的資源和代碼片段,包括這些方便的HTML模板,以幫助您入門!
特點:世界上最先進的響應式前端框架。快速為適用于任何類型設備的站點創建原型和生產代碼。
總結:Foundation 算是框架界的元老啦,都說框架去的早,而這個框架一直到現在依然這么的熱門,如果你比較介意 Bootstrap 開發撞臉的尷尬事情,那么你可以考慮使用 Foundation 。即使你使用預定義的 UI 元素, 也不會與其他網站太像,就像官方說的給開發者更靈活的框架體驗。
Bootstrap框架
Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架,使得 Web 開發更加快捷。 Bootstrap提供了優雅的HTML和CSS規范,它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎,一直是GitHub上的熱門開源項目,包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都使用了該項目。 國內一些移動開發者較為熟悉的框架,如WeX5前端開源框架等,也是基于Bootstrap源碼進行性能優化而來。
包含內容:
基本結構:Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
CSS:Bootstrap 自帶以下特性:全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class,以及一個先進的網格系統。
組件:Bootstrap 包含了十幾個可重用的組件,用于創建圖像、下拉菜單、導航、警告框、彈出框等等。
JavaScript 插件:Bootstrap包含了十幾個自定義的jQuery 插件。您可以直接包含所有的插件,也可以逐個包含這些插件。
定制:您可以定制Bootstrap的組件、LESS 變量和jQuery 插件來得到您自己的版本。
總結:Bootstrap 最大的優勢就是它非常流行,流行就代表你有問題就有很多人幫你解決問題,就代表裝逼它就是利器,還有就是界面比較和諧,容易上手,關注它的小伙伴應該發現最新 V4 版也開始支持 FlexBox 布局,這是非常好的升級體驗。 劣勢是 class 命名不夠語義化,并且各種縮寫,以至于我離了文檔就是個菜,最近開始整混合 APP,選框架的時候首選就是它,但之前搞 PC 一直沒注意,后來搞混合右鍵屬性看它的時候,瞬間一陣涼風襲來,Bootstrap 好小,小到我只好選擇別的框架。
AUI框架
AUI為一款輕量級前端UI框架,更偏重于CSS布局及樣式的構造,通俗易懂的寫法及模塊式的拼裝方便用戶自由擴展。輕小的體積、靈活的擴展性,大大提高移動端項目的體驗度和開發效率。
在目前市場上的UI框架中,大多數的框架以JS來實現過多的功能和布局。當然并不是否定JS在一個移動前端框架中的作用性,既然是前端框架側重點要更多的考慮框架本身在一個項目中的資源消耗問題及如何提高用戶的體驗度。鑒于APICloud多窗口結構及原生模塊的拼裝,所以在移動端項目中AUI強調更多的是快速布局、靈活布局的實現,結合APICloud本身特性,提高開發效率及用戶體驗。
最近剛起來的AUI,雖然作者聲稱是專為APICloud開發者設計的一套UI框架,但實際它還是解決了很多移動前端開發的普遍問題,是主要面向混合開發的 CSS 框架。看起來作者比較猖狂,各種高級 CSS3 遍地使用,這讓我也不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性,哈哈了一頓激動從前輩手上大膽認識了幾個好東西,并且框架還提供了聊天界面、計數列表等組件,解決了很多復雜的讓我罵娘的布局,現在可以直接拿走就用。
總結:這個框架對我來說有個優點就是純 CSS 框架,自己以前也就用過 Pure,自己有點 JS 能力,如果不是復雜的效果,找個純 CSS 框架自己隨便改改就可以,而現在 CSS3 也已經能夠做到動畫,效率、質量、高效全兼顧,所以還是選擇了這種 CSS 框架。有一點覺得不滿的是這框架的文檔真的好那什么,說好的高大上呢。
Amaze UI 框架
第二個介紹的是AmazeUI,據官方說是咱們中國首個HTML5跨屏前端框架。
最初使用它是因為本尊遇到了一個愛糾結細節設計,有一次她跟我的字體較上真了,結果一句頂萬句的 BOOS 夸了她,我只好根據她的想法去解決,結果最后找到了Amaze UI 框架,按照官方的話說就是 "基于社區開源項目構建的一個跨屏前端框架,以移動優先,從小屏到大屏,最終實現所有屏幕適配,適應移動互聯潮流" 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。
總結:Amaze UI 總的來說就是加入更多符合中國市場特性的元素,框架對跨屏、適配都做了的比較好的處理并且準備一了一系列的常用的網頁組件,為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。框架還對中文排版優化,兼容中國本土主流瀏覽器、輕量化,不僅適用于桌面端,還更更適合移動端、包含一些封裝好的Widgets。不過自也就我感覺 Amaze UI 文檔是否有點太那什么了,比如 “人們不會在乎jQuery的那點流量。”,說實的在這真沒啥,不過我從來不會說出來( 哈哈 ),代碼和設計上感覺沒太多突出的點。
Pure框架
一組小的,響應迅速的CSS模塊,您可以在每個Web項目中使用它們。
特點:
CSS占用空間極小。
純凈是微不足道的。整套模塊的時鐘頻率為3.8KB *縮小和壓縮。在考慮移動設備的情況下,對我們來說保持文件大小很小很重要,并且仔細考慮了每一行CSS。如果您決定僅使用這些模塊的子集,則可以節省更多字節。
你的CSS基礎
Pure構建于Normalize.css之上,為原生HTML元素以及最常見的UI組件提供布局和樣式。這就是你所需要的,沒有任何瑕疵。
以移動為主題
Pure是開箱即用的響應,因此所有屏幕尺寸的元素都很棒。
堅持你的方式
Pure具有最小的樣式,并鼓勵您在其上編寫應用程序樣式。它旨在讓您不受約束,并輕松覆蓋樣式。
創建響應式布局
通過使用Grids,Menus等,可以輕松地為所有屏幕尺寸創建漂亮的響應式布局。我們讓您輕松上手。看看幾個不同的布局,并用堅如磐石的基礎開始您的下一個Web項目。
這個框架是我在做管理系統時接觸的,選擇使用也是因為框架小巧,并且是純 CSS,沒有太多的牽扯,好用來與其他框架快速結合使用。
注公眾號 “OpenSourceDaily” ,每天推薦給你優秀開源項目
大多數人想到Web開發時,通常會想到HTML或JavaScript,往往忽略了CSS,根據Wikipedia的說法,CSS既是網頁中最重要也是最常被遺忘的部分之一,盡管它是萬維網的三大基礎技術之一。
今天就和大家分享9個流行的、強大的前端開源框架,幫助你輕松構建漂亮的網站前端。
1、Bootstrap
Bootstrap無疑是最流行的CSS框架,它是最早的Web前端框架,由Twitter開發。Bootstrap還提供了許多示例來幫助你入門。
使用Bootstrap,你可以將不同的組件和布局組合在一起,從而創建有趣的頁面設計。它還提供了大量詳細的文檔。目前在Github上已經有1100多個貢獻者,19000多個提交。(Github地址:https://github.com/twbs/bootstrap)
2、PatternFly
PatternFly是Red Hat的開源CSS框架,和Bootstrap不同的是,Bootstrap是為那些想要創建漂亮網站的人而設計的,而PatternFly主要專注于企業應用程序開發人員,提供諸如條形圖、圖表、導航之類的組件,實際上Red Hat就是使用它創建了OpenShift。
除了靜態HTML,PatternFly還支持ReactJS框架,這是Facebook開發的流行JavaScript框架。PatternFly具有許多適用于企業級應用程序的高級組件,如條形圖,圖表,模式和布局。
PatternFly在GitHub上一共有1,050多個提交和44個貢獻者。(Github地址:https://github.com/patternfly/patternfly)
3、Material Components for the web
Material Components for the web(MDC Web),是谷歌專為Web設計的全新前端框架。MDC Web可幫助開發人員執行Material Design,組件由谷歌的核心工程師團隊和UX設計人員開發。這些組件可以建立可靠的開發工作流程,以構建美觀且功能強大的Web項目。
MDC Web在Github上共有5700多個提交和349個貢獻者。(Github地址:https://github.com/material-components/material-components-web)
4、Pure
Bootstrap,Patternfly和MDC Web是功能非常強大的CSS框架,但它們可能非常繁瑣和復雜。如果你想要一個輕量級的CSS框架,可以嘗試Pure.css,它本身更接近于CSS編程,但又可以幫助你構建一個不錯的網頁。Pure是具有最小占用空間的輕量級CSS框架,它由Yahoo開發,根據BSD許可是開源的。
Pure在Github上共有565多個提交和59個貢獻者。(Github地址:https://github.com/pure-css/pure)
5、Foundation
Foundation聲稱是世界上最先進的響應式前端框架。它提供了用于構建專業網站的高級功能和教程。許多公司,組織都使用該框架,并且該框架具有大量可用的文檔。
Foundation在Github上有將近17000個提交和1000個貢獻者。(Github地址:https://github.com/foundation/foundation-sites)
6、Bulma
Bulma是一個基于Flexbox的開源框架,可根據MIT許可證開源。Bulma是一個非常輕量級的框架,因為它只需要一個CSS文件。Bulma擁有簡潔明了的文檔,可輕松選擇你想要的主題。它還具有許多Web組件,你可以在設計中使用它們。
Bulma在Github上有1400多個提交和300個貢獻者。(Github地址:https://github.com/jgthms/bulma)
7、Skeleton
如果說還有什么框架比Pure更加輕量級,那一定是Skeleton。Skeleton庫只有大約400行,并且該框架僅提供一些基本的CSS框架組件。盡管如此,Skeleton還是提供了詳細的文檔來幫助你快速上手。
Skeleton在Github上共有167個提交和22個貢獻者,但它不是最活躍的項目,它最新一次的更新是在2014年。(Github地址:https://github.com/dhg/Skeleton)
8、Materialize
Materialize 是一個基于 Material Design風格的一個現代化的響應式前端框架,解決了最繁重的工作,結合你的自定義組件,為你提供默認的樣式。Materialize的文檔頁面非常全面,并且很容易遵循。其組件頁面包括按鈕,卡片,導航等。
Materialize在Github上共有3800多個提交和250個貢獻者。(Github地址:https://github.com/Dogfalo/materialize)
9、Bootflat
Bootflat是從Twitter的Bootstrap派生的開源CSS框架。與Bootstrap相比,Bootflat更簡單,并且更加輕量級。Bootflat的文檔似乎幾乎受到了IKEA的啟發,大部分都是圖像,沒有太多的文字。
Bootflat是在MIT許可證下開源的,在Github上有159個提交和8個貢獻者。(Github地址:https://github.com/bootflat/bootflat.github.io)
今天的項目大家覺得怎么樣嗎?如果你喜歡,請在文章底部留言、點贊或關注轉發,你的支持就是我持續更新的最大動力!
OpenSourceDaily - 送給愛開源的你
聯網的迅速發展,讓軟件行業成了更多年輕人的就業選擇。HTML5簡單易學、門檻低,是Web時代前端開發超好用的工具,除此之外,web前端開發人員的就業薪資也遠遠高于其他行業。
資料顯示,初級web前端開發人員的平均薪資在8K-10K左右,擁有一定工作經驗的人薪資普遍達到15K-20K。如此廣闊的前景當然吸引了無數專業或非專業人士的加入。web前端用途范圍廣,下面小千就來給大家分享常見的HTML5框架。
web前端開發中常見的HTML5框架有哪些?
Siimpler
Siimpler 是個簡單的 HTML 開發框架,他可以通過選擇你自己喜歡的部分,來幫助你迅速又簡單地創建 HTML5 開發結構。網絡設計者們也可以通過使用 Siimpler 框架類的文件和文件夾來無縫的開始一個 Web 項目。
Ionic
Ionic 是個神奇的框架和強大前端開源系統,使用先進的Web技術,比如CSS、HTML 和 JS 來創建令人驚嘆的手機應用。
Foundation
Foundation 是世界上精妙的前端響應框架,同時,它可以兼容所有的瀏覽器和網絡設備。Foundation 擁有移動友好型的用戶接口,設置了許多關鍵特性。
Enyo
Enyo是一個開源的 Jaa 框架,該框架能夠讓你創建頂級的 HTML5 應用程序,該應用程序能夠運行在各種各樣的電子設備上,比如說手機、臺式機、筆記本、電視以及Web應用。
LimeJS
針對于所有的新的桌面瀏覽器和觸屏設備,LimeJS 對于有用戶經驗的游戲開發者而言是較好的和較強大的開發框架。
Bootstrap
Bootstrap能讓所有開發者都能迅速上手、所有設備都可以適配、所有項目都適用。此外,bootstrap的官網也有很多教程提供。
juery UI
juery UI 主要分為交互、微件和效果庫3個部分,主打代碼開源,操作繼承了juery 的簡單特性,兼容各主流桌面瀏覽器。
web前端是當下很多企業都會用到的軟件開發,HTML5是移動互聯網前端的主流開發語言,目前還沒有任何一種前端開發技術能夠取代HTML5。因此,無論是PC端還是APP端的應用,前端樣式都離不開HTML5。
從手機與電腦上網的使用率來看,從事HTML5或者Web相關的開發工作,就業前景還是比較可觀的。而且,現在的網站開發都往移動設備上轉移,所以HTML5或者Web前端是眾望所歸。
這7個框架,你都會用嗎?
*請認真填寫需求信息,我們會在24小時內與您取得聯系。