Web 开发工程师在开发页面样式的时候需要花费大量的时间开发,其中最头疼的还是浏览器的兼容性问题,最省事的是使用 CSS 框架,幸运的是一些大神编写了一套精美的 CSS 框架并开源出来,那么有哪些不错的 CSS 框架呢?我收集了一些资料和数据来和大家讨论,下面我就说说 Github 上 star 最多的 10 大 CSS框架。
Bootstrap
Github star 数量 127269。
Bootstrap 是最受欢迎的 CSS 框架,被认为是拥有最好的响应性的CSS框架。专为前端开发而设计,有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。
Semantic-UI
Github star 数量 42797。
<span data-type="color" style="color:rgba(0, 0, 0, 0.87)"><span data-type="background" style="background-color:rgb(255, 255, 255)">Semantic 是一个开发框架,可以使用人性化的 HTML 帮助创建漂亮的响应式布局。</span></span>Semantic UI 旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读,更容易理解。
Materialize
Github star 数量 33902。
<span data-type="color" style="color:rgb(34, 34, 34)"><span data-type="background" style="background-color:rgb(255, 255, 255)">Materialize是一款基于Material Design设计的前端框架,支持自适应,现代感十足。</span></span>
Bulma
Github star 数量 29755。
Bulma是一个基于 Flexbox 的现代化的 CSS 框架,其响应式、模块化、开源免费,可以轻松用来实现各种简单或者复杂的内容布局,Bulma 最大的特点是轻量、无依赖、简单、易用,所有样式都基于 class,即使不懂 CSS 也可以轻而易举的做出美观的网页。
Foundation
Github star 数量 27612。
Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。
Foundation 是一个以移动优先的流行框架。
Pure
Github star 数量 19022。
雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目。
Pure 小得不要不要的,压缩成gzip文件仅为3.7KB*。我们力求每一行代码都精简到极致,以便最大程度压缩CSS大小,更利于移动Web制作。如果您仅使用其中的一部分模块,那CSS真是小到没有朋友了!
Layui
Github star 数量 14841。
Layui 是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。
Uikit
Github star 数量 13073。
UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。UIKit 提供了全面的 HTML、CSS 及 JS 组件,它们使用简单,容易定制和扩展。
它基于 LESS 开发,代码结构清晰简单,易于扩展和维护,并且具有体积小、反应灵敏的响应式组件,你可以根据 UIKit 基本的风格样式,轻松地自定义创建出自己喜欢的主题样式。
Amaze UI
Github star 数量 12246。
Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。
Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。
相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。
Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。
jQuery UI
Github star 数量 10533。
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。
jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQueryUI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。
以上 10 个 CSS 框架中我最喜欢的是 Bulma,准确来说我是 Bulma 的粉丝,我的个人网站就使用了 Bulma。那么 10 个 CSS 框架中你用过几个呢?你最喜欢的是哪一个过呢?
感谢阅读,我是 sevdot,全栈开发工程师和终身学习者。
不喜勿喷,以人为善,比聪明更重要。
欢迎留言和关注,且接受任何宝贵的建议。
了解更多
网友评论