最受欢迎的10大CSS框架

1099 篇文章 1 订阅
723 篇文章 8 订阅

Web 开发工程师在开发页面样式的时候需要花费大量的时间开发,其中最头疼的还是浏览器的兼容性问题,最省事的是使用 CSS 框架,幸运的是一些大神编写了一套精美的 CSS 框架并开源出来,那么有哪些不错的 CSS 框架呢?
我收集了一些资料和数据来和大家讨论,下面我就说说 Github 上 star 最多的 10 大 CSS框架。

Bootstrap

Github star 数量 140K。

GitHub 地址:https://github.com/twbs/bootstrap

Bootstrap 是最受欢迎的 CSS 框架,被认为是拥有最好的响应性的CSS框架。专为前端开发而设计,有助于构建web设计理念、移动优先项目、网格系统、排版和按钮等。

Semantic-UI

Github star 数量 47.8K。

GitHub 地址:https://github.com/Semantic-Org/Semantic-UI

Semantic 是一个开发框架,可以使用人性化的 HTML 帮助创建漂亮的响应式布局。Semantic UI 旨在使网站构建过程更加语义化。核心特征是利用自然语言原理使代码更易于阅读,更容易理解。

Materialize

Github star 数量 37.5K。

GitHub 地址:https://github.com/Dogfalo/materialize

Materialize是一款基于Material Design设计的前端框架,支持自适应,现代感十足。

Bulma

Github star 数量 39.6K。

GitHub 地址:https://github.com/jgthms/bulma

Bulma 是一个基于 Flexbox 的现代化的 CSS 框架,其响应式、模块化、开源免费,可以轻松用来实现各种简单或者复杂的内容布局,Bulma 最大的特点是轻量、无依赖、简单、易用,所有样式都基于 class,即使不懂 CSS 也可以轻而易举的做出美观的网页。

更多详细介绍:http://www.sevdot.com/articles/7

Foundation

Github star 数量 28.6K。

GitHub 地址:https://github.com/zurb/foundation-sites

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

Foundation 是一个以移动优先的流行框架。

Pure

Github star 数量 20.8K。

GitHub 地址:https://github.com/pure-css/pure

雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目。

Pure 小得不要不要的,压缩成gzip文件仅为3.7KB*。我们力求每一行代码都精简到极致,以便最大程度压缩CSS大小,更利于移动Web制作。如果您仅使用其中的一部分模块,那CSS真是小到没有朋友了!

Layui

Github star 数量 21.5K。

GitHub 地址:https://github.com/sentsin/layui

Layui 是一款采用自身模块规范编写的情怀型前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。

Uikit

Github star 数量 13.5K。

UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。UIKit 提供了全面的 HTML、CSS 及 JS 组件,它们使用简单,容易定制和扩展。

它基于 LESS 开发,代码结构清晰简单,易于扩展和维护,并且具有体积小、反应灵敏的响应式组件,你可以根据 UIKit 基本的风格样式,轻松地自定义创建出自己喜欢的主题样式。

Amaze UI

Github star 数量 13.4K。

GitHub 地址:https://github.com/amazeui/amazeui

Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。

相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果;兼顾国内主流浏览器及 App 内置浏览器兼容支持。

Amaze UI 面向 HTML5 开发,使用 CSS3 来做动画交互,平滑、高效,更适合移动设备,让 Web 应用更快速载入。

jQuery UI

Github star 数量 10.8K。

GitHub 地址:https://github.com/jquery/jquery-ui

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。

jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQueryUI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。

很好用的CSS,960 Grid System Version 1.5 2010-05-11 Created by Nathan Smith. See the official site for more info: http://960.gs/ ============================================================================ Thank you for downloading the 960 Grid System. I hope it helps to streamline web development workflow. Enclosed in the bundle are printable sketch sheets and template files for Adobe Fireworks and Photoshop, OmniGraffle and Visio. Also included is a lightweight CSS file, which contains the grid dimensions. To use this file, simply include the 960.css in the <head> of the HTML page. You may also use the reset.css and text.css files, or opt to leave them out. Here is an example of the XHTML code necessary to incorporate the CSS files: <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> </head> It is worth noting that these styles do not automatically make up a finished site design. They are simply a starting point, ideally for rapid prototyping or as a basis for creating your own designs. You should not feel constrained by the way I have built the initial code. If you disagree with how something has been done, feel free to revise it for the needs of your particular site. The files in the 960 Grid System are free of charge, licensed under GPL/MIT. ============================================================================ Note that if you are building a site in a language which reads from right to left, use the CSS files that begin with "rtl_" instead. Denote the language: <html lang="..." dir="rtl"> Be sure to replace "..." with the appropriate two-letter abbreviation of the language you are using. Example: lang="he" for Hebrew, lang="ar" for Arabic. ============================================================================ Special thanks to Eric Meyer for his comprehensive browser reset stylesheet. http://meyerweb.com/eric/tools/css/reset/
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值