前端學習(css\vue\react\angular) 轉

無論是在產品設計,還是在研發上,極簡主義的應用簡直無處不在。如果你和我一樣熱衷極簡主義,那麼本文分享的內容,一定是你的“菜”。在文章中,我們將與大家分享 20 個最佳的極簡 CSS 框架,它們能夠爲你提供建站必備的組件,幫助你節省時間。Have Fun!

1. Spectre

這是一個輕量級、響應式的現代 CSS 框架,用於快速建站和擴展程序的開發。它通過最佳編碼實踐和一致性的設計語言,爲排版與元素、基於 Flexbox 的響應佈局系統、CSS 組件提供了基本樣式。

項目地址:【傳送門

2. Layers

Layers CSS是一個針對實例的 CSS 框架。它具備輕量級、零依賴等特性。

項目地址:【傳送門

3. Milligram

Milligram 提供了極簡樣式設置,便於你快速、簡潔的開啓建站之旅。雖然它不是一個 UI 框架,但它的設計理念卻是以提供優秀的性能、高效的開發效率以及最少的屬性重置而構建的。同時,它也是輕量的,在 Gzip 壓縮後,它只有 2KB 大小。

項目地址:【傳送門

4. Cutestrap

如果你在尋找功能豐富的組件,那麼 Bootstrap、Foundation 這類框架將會是你的最佳選擇。但是,如果你想選擇的框架大小是在 normalize.css 與一個完整框架範圍之間, Cutestrap 或許是個不錯的選擇。它在壓縮後僅有 8K 大小,可作爲 Bootstrap 的輕量級替代方案。

項目地址:【傳送門

5. Mobi

Mobi.css 是一個輕量級、可擴展、移動優先的 CSS 框架。它專注於細節,對於內容豐富的網頁能夠提供優質的用戶體驗。雖然,它專注移動端,但桌面客戶端的體驗也是很棒的。

項目地址:【傳送門

6. Hack

Hack 是一個極度簡易的 CSS 框架。這有一些示例,你可以瞭解下。

項目地址:【傳送門

7. Wing

一個基於極簡主義設計理念的漂亮的 CSS 框架。

項目地址:【傳送門

8. Sakura

一個易於定製的極簡 CSS 框架/主題。

項目地址:【傳送門

9. Mini

Mini 作爲一個 Gzip 壓縮後不到 7KB 大小的極簡框架,它具備響應式、易用性和定製性等特性,旨在爲你提供儘可能多的功能。由於它是輕量框架,不僅讓你創建的網站和應用程序具備更快的加載速度,而且它所提供的組件可以滿足基本的開發要求。

項目地址:【傳送門

10. Pavilion

Pavilion 是一個簡易的 CSS 框架,適合那些不喜歡使用其他框架中附帶預定義 UI 組件的開發人員。如果你正在尋找一個簡單、輕量、可訂製的,並且不會出現代碼膨脹的 CSS 框架,Pavilion 將是個不錯的選擇。

項目地址:【傳送門

11. Core CSS

這是一個構建輕量級響應式網站的前端框架,它沒有內置預設元素和動畫,只提供了一個超簡單的網格體系 – 即它的列是浮動的,行是 self-clearing,而分界點則是按邏輯均勻的分佈。你可以按照想要的工作方式,進行定製與使用。

項目地址:【傳送門

12. Siimple

Siimple 是一個助你打造扁平化網站風格的輕量、響應式的開源框架。它內置了 SASS / SCSS,爲你的網頁設計提供了簡潔的開始。

項目地址:【傳送門

13. Scooter

專注爲 Dropbox 提供基礎樣式、CSS 組件以及快速靜態原型的 SCSS 框架。

項目地址:【傳送門

14. Workless

打造更快 Web 應用程序的開源 HTML, CSS 與 JS 框架。

項目地址:【傳送門

15. Responsive

一個功能強大、對開發人員友好的,用於構建響應式網站的輕量級前端框架。

項目地址:【傳送門

16. Kouto swiss

專注於 Stylus 的完整 CSS 框架。它的靈感源自流行的預處理工具庫,例如 nib、compass、bourbon.

項目地址:【傳送門

17. Concise

Concise 爲你的網站設計提供了堅實的基礎。它提供了一套僅包含基礎樣式的簡潔框架,幷包含了大量開箱即用的功能。同時,你也可以通過使用內核的附加組件進行功能性擴展。

項目地址:【傳送門

18. Penguin

Penguin 是一個由 Sass 構建的輕量級、可擴展的前端框架,用於啓動任何項目。

項目地址:【傳送門

19. Base

一個穩固的響應式 HTML 與 CSS 框架。

項目地址:【傳送門

20. Caramel

Caramel 是一個簡單、現代的完全響應式 Web 框架。你僅需要編寫一次代碼,即可獲得在多平臺上相同的效果。

項目地址:【傳送門

 

 

推薦21個頂級的Vue UI庫!(ps: http://blog.talkingdata.com/?p=5993)

Markdown

 

最近,隨着“星球大戰”(指 GitHub 的 Star 數量大比拼)的爆發,Vue.js 在 GitHub 上的 Star 數超過了 React。雖然 NPM 的下載量仍然落後於 React,但 Vue.js 的受歡迎程度似乎在持續增長。

Markdown

1、Vuetify

Star 數爲 11K,提供了 80 多個 Vue.js 組件,這些組件是根據谷歌 Material Design 指南實現的。Vuetify 支持所有平臺上的瀏覽器,包括 IE11 和 Safari 9+(使用 polyfill),並提供了 8 個 vue-cli 模板。

地址: https://github.com/vuetifyjs/vuetify

2、Quasar

Star 數超過 6K,是構建 Vue.js 響應式網站、PWA、混合移動應用和 Electron 應用的流行框架。Quasar 還支持諸如 HTML/CSS/JS 壓縮、緩存清除、搖樹優化(tree shaking)、源映射、代碼分割和延遲加載、ES6 轉碼等功能。

地址:https://github.com/quasarframework/quasar

3、Element

Star 數將近 28K,是一款面向 Web 的 Vue.js 2.0 UI 工具包。它擁有一個強大的社區和 350 個貢獻者,提供了豐富的可定製組件,以及完整的樣式指南和更多的資源。 地址:https://github.com/ElemeFE/element

4、Vue Material

Star 數差不多 6K,是一個實了谷歌 Material Design 的簡單庫。該庫還提供了一個 webpack 樣板、用於 Nuxt.js 的 SSR 模板和一個單獨的 HTML 文件(通過這個文件開始使用框架)。這裏有一些入門的例子https://codesandbox.io/s/github/vuematerial/examples/tree/master/examples/quick-start。

地址: https://github.com/vuematerial/vue-material

5、Keen-UI

Star 數將近 3.5 K,一組 Vue 組件的集合,在設計上受到了谷歌 Material Design 的啓發。Keen-UI 並不是一個 CSS 框架,它不包含網格系統、排版樣式等。相反,它關注的是基於 Javascript 的交互式組件。

地址:https://github.com/JosephusPaye/Keen-UI

6、Buefy

Star 數 3K 左右,基於 Bulma(https://bulma.io)提供了一組輕量級的 UI 組件。Vue.js 和 Bulma 是這個庫唯一的兩個內部依賴。它的大小約爲 60KB(壓縮後的大小,並且包含了 Bulma)。你可以查看實時文檔網站(https://buefy.github.io/#/documentation/start)並在 Codepen 上運行代碼。

地址: https://github.com/buefy/buefy

7、Bootstrap Vue

Star 數超過 5K,爲 Vue.js 提供了 Bootstrap 4 組件和網格系統的實現,並提供了自動 WAI-ARIA 可訪問性標記。

地址: https://github.com/bootstrap-vue/bootstrap-vue

8、Muse-UI

Star 數超過 6K,是另一個 Vue 2.0 MD 庫,提供了 40 多個 UI 組件和可定製主題。文檔主要使用中文撰寫,不過大多數組件是自解釋的,文檔只起到輔助作用。該項目在積極的開發和維護當中。 地址:https://github.com/museui/muse-ui

9、AT-UI

Star 數接近 1.5 K,一個模塊化的前端 UI 框架,用於開發基於 Vue.js 的 Web 界面,適用於桌面應用程序。它提供了 NPM+Webpack+Babel 的前端開發工作流和獨立的 CSS 樣式,值得一試。

地址: https://github.com/at-ui/at-ui

10、Vux

Star 數超過 13K,是一個流行的社區庫,基於 WeUI 和 Vue 2.0。該庫還支持 webpack+vue-loader+vux 的工作流。它的文檔也是中文的。

地址: https://github.com/airyland/vux

11、iView

Star 數將近 16K,提供了數十種用 Vue.js 構建的 UI 組件和小部件,並採用了乾淨而優雅的設計。iView 被廣泛採用,社區也在積極維護,並提供了 CLI 工具用於以可視化的方式創建項目。這個也值得一試。

地址: https://github.com/iview/iview

12、Uiv

Star 數“僅”550 左右,用於 Vue 2 的 Bootstrap 3 組件庫。所有組件加起來差不多 20KB,唯一的外部依賴是 Vue 和 Bootstrap CSS,支持基於 Webpack 的工作流。 地址:https://github.com/wxsms/uiv

13、Vuikit

Star 數 1K 左右,一個用於網站界面的響應式的 Vue UI 庫,設計風格乾淨而統一。該庫作爲由 Yarn 工作區管理的“monorepo”而構建,但圖標和主題可作爲單獨的包發佈。

地址: https://github.com/vuikit/vuikit

14、Onsen UI+Vue

基於流行的 Onsen-UI 框架,封裝了核心 Web 組件並暴露了 Vue 風格的 API。Onsen UI 組件也被設計爲能夠主動對 prop 做出反應。

地址: https://onsen.io/v2/guide/vue/

15、Semantic UI+Vue

這個項目基本上是 Semantic-UI 框架與 Vue.js 的集成。該庫仍在開發當中,提供了一個類似於 Semantic-UI 的 API 以及一組可定製的主題。

地址: https://semantic-ui-vue.github.io/

16、Fish-UI

Star 數“僅”爲 500 左右,貢獻者也只有 3 個,但 fish-ui 提供了一個基於 Vue 的 Web 工具包,其中包含整潔乾淨的組件。該庫支持 ES2015+Webpack 工作流。它的文檔不是很全,但它的設計不容忽視。

地址: https://github.com/myliang/fish-ui

17、Mint UI

Star 數超過 11K,爲 Vue.js 提供 UI 元素,提供了用於構建移動應用程序的 CSS 和 JS 組件。當全部導入時,壓縮後的代碼只有月 30KB(JS+CSS),當然它也支持單個組件的導入。

地址: https://github.com/ElemeFE/mint-ui/

18、Framework7 Vue

這個集成提供了幾乎所有的 Framework7 元素和組件,並集成了 Framework7 Router,按照 Vue 的方式來渲染頁面。該庫正處於積極的開發和維護當中。 地址:https://framework7.io/vue/

19、Cube UI

Star 數超過 3K,是用於 Vue.js 移動應用程序的 UI 組件庫。所有組件都經過了單元測試,並且該庫還支持按需進行後期編譯和組件導入。這個庫仍在積極開發中。

地址: https://github.com/didi/cube-ui

20、Vueblu

Star 數約 1.5K,是基於 Vue 2.0 和 Bulma 的 UI 組件庫,用於構建中臺和後臺辦公產品。它支持 ES2015 和 NPM+Webpack+Babel 工作流,並提供可自定義主題。

地址: https://github.com/chenz24/vue-blu

21、Ant Design Vue

Star 數約 1.5K,用於開發具有數十個 Ant Design 實現組件的企業級後端產品,並支持基於 Webpack 調試的構建解決方案(支持 ES6)。請注意,它的開發已經停止了一段時間。

地址: https://github.com/okoala/vue-antd

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章