昨天有個同事問我有沒有可以直接上手的前端UI框架。
那今天就給大家推薦6個簡單、視覺體驗好的前端框架
沒喫過豬肉,肯定見過豬跑!
Jquery Mobile
demo地址:
https://demos.jquerymobile.com/1.1.0/
教程地址:
https://www.codesocang.com/jquerymobile/jquerymobile/7/index.html
這個應該是最簡單的,能夠快速上手了!
jQuery Mobile 還發佈一個完整統一的jQuery移動 UI組件。支持全球主流的移動平臺。
部件是功能豐富,有狀態的插件。隨着方法和事件,有一個完整的生命週期。
如果想5分鐘就能直接上手的,Jquery Mobile首當其衝!
ColorUI
github地址:
https://github.com/weilanwl/ColorUI
官網地址:
https://www.color-ui.com/
鮮亮的高飽和色彩,專注視覺的小程序組件庫
ColorUI 是小程序組件庫,但不是純樣式庫。由於WeUI有些淡雅,可能不合某些時尚公司的風格,因此 ColorUI 也有龐大的追捧者。
github上標星高達8.8k
相信你肯定有用過使用ColorUI的小程序
如果要開發小程序,這款開源框架是一個不錯的選擇。
Material
material design風格的前端css框架
官方網站:
http://materializecss.com/
中文學習站:
http://www.materializecss.cn/
使用非常簡單,只需要引入css和js就行
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
可以使我們的頁面顏色更鮮豔,動畫效果更突出(符合Material Design的設計風格)
究竟什麼是Material Design?
設計是創造的藝術,我們的目標就是要滿足不同的人類需要。人們的需要會隨着時間發展,我們的設計,實踐,以及理念也要隨之提升。我們在自我挑戰,爲用戶創造了一個可視化語言,它整合了優秀設計的經典原則和科學與技術的創新。這就是Material Design。
關於Material Design,其親爹谷歌是這麼介紹的。
其核心思想就是把物理世界的體驗帶進屏幕。去掉現實中的雜質和隨機性,保留其最原始純淨的形態、空間關係、變化與過渡,配合虛擬世界的靈活特性,還原最貼近真實的體驗,達到簡潔與直觀的效果。
Layui
官網地址:
https://www.layui.com/
github地址:
https://github.com/sentsin/layui/
layui(諧音:類UI) 是一款採用自身模塊規範編寫的前端 UI 框架,遵循原生 HTML/CSS/JS 的書寫與組織形式,門檻極低,拿來即用。
其外在極簡,卻又不失飽滿的內在,體積輕盈,組件豐盈,從核心代碼到 API 的每一處細節都經過精心雕琢,非常適合界面的快速開發。
layui 首個版本發佈於2016年金秋,她區別於那些基於 MVVM 底層的 UI 框架,卻並非逆道而行,而是信奉返璞歸真之道。
準確地說,她更多是爲服務端程序員量身定做,你無需涉足各種前端工具的複雜配置,只需面對瀏覽器本身,讓一切你所需要的元素與交互,從這裏信手拈來。
weui
github地址
https://github.com/weui/weui
同微信原生視覺體驗一致的基礎樣式庫
WeUI是一套同微信原生視覺體驗一致的基礎樣式庫,爲微信Web開發量身設計,可以令用戶的使用感知更加統一。包含button、cell、dialog、toast、article、icon等各式元素
image
frozenui
github地址
https://github.com/frozenui/frozenui
image
FrozenUI的CSS組件庫,基於騰訊手Q樣式規範。特點FrozenUI 是一套基於移動端的UI庫,輕量、精美、遵從手機 QQ 設計規範。
適用於使用手Q規範設計的Web頁面,而針對非手Q規範的頁面,可通過修改變量定製界面主題,並且可以按需選擇需要的組件。
使用iconfont展示圖標,包含了按鈕,列表,表單,提示,彈窗等常用組件,新增文本,佈局,1px, rem,文字截斷,佔位,兩端留白,兩端對齊等解決方案,同時解決了移動端屏幕適配問題。
結語
當然如果你覺得還有更容易上手的前端ui框架,評論告訴大家把!