最受程序员欢迎的20 个CSS框架

时间: 2020-01-29阅读: 93标签: 框架

本文为大家搜罗了 20 款截至目前最受程序员欢迎的前端CSS框架,其中有的霸榜已久,也有不少后起之秀,有的是单纯的 CSS 框架,也有的结合了 JavaScript 以提供更丰富的功能。一起来看看有没有你的菜,以下按照 GitHub Star 数量进行排序。


1. Bootstrap

Bootstrap 无疑是目前使用最广泛的 CSS 框架,GitHub 上近 14 万的 Star 数就足以说明问题。优点有很多,比如响应式设计,海量资源且简单易学。不过也有人吐槽 Bootstrap 稍显臃肿,而且在使用人数太多且不定制化的情况下,容易导致很多网站外观千篇一律。

官网:https://getbootstrap.com/

GitHub:https://github.com/twbs/


2. Animate.css

提供了极其丰富的动画效果,就像它的名字一样,可以为你的网站增添不少活力。

官网:https://daneden.github.io/

GitHub:https://github.com/daneden/


3. Semantic UI

用户友好程度非常高的响应式前端框架,拥有丰富的插件和主题,可以利用它快速搭建美观的前端页面,不过目前这个框架的维护不是很活跃。

官网:https://semantic-ui.com/

GitHub:https://github.com/


4. Bulma

相比Bootstrap,Bulma 绝对算是后起之秀了,而且其上升势头相当迅猛,这是一个基于 Flexbox 布局模型的纯粹的 CSS 开源框架,Bulma的主要特征有100%响应式设计、模块化、现代化,对其他老牌框架审美疲劳的小伙伴可以试试。

官网:https://bulma.io/

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


5. Materialize

谷歌开源的前端框架,基于谷歌的 Material Design 风格,很适合网站和安卓平台。

官网:https://materializecss.com/

GitHub:https://github.com/Dogfalo/


6. Foundation

相比其他前端框架,Foundation 除了拥有丰富的 web 应用框架之外,还有专业的电子邮件框架,而且具备超强的可读性、灵活性和可定制化的特点,使得它成为惠普、亚马逊等诸多大企业的选择,不过学习难度略高。

官网:https://foundation.zurb.com/

GitHub:https://github.com/foundation...


7. Pure.css

雅虎开源的轻量级纯 CSS 框架,基于 Normalize.css 构建,对各种浏览器的兼容性很好,开发人员可以使用其栅格设计和菜单创建高度响应式的页面布局。

官网:https://purecss.io/

GitHub:https://github.com/pure-css/p...


8. Tailwind

相比其他的 CSS 框架,Tailwind 在可定制这一点上可以说是完胜,这对于喜欢自己动手的小伙伴来说极具吸引力。
官网:https://tailwindcss.com/

GitHub:https://github.com/tailwindcs...


9. Skeleton

响应迅速的轻量级 CSS 框架,适合用于小项目。

官网:http://getskeleton.com/

GitHub:https://github.com/dhg/Skeleton


10. UIkit

轻量级且功能丰富,响应式设计,其统一的 UI 样式和灵活的自定义选项可以帮助开发人员快速搭建美观、简洁且模块化的网站页面。

官网:https://getuikit.com/

GitHub:https://github.com/uikit/uikit


11. NES.css

与众不同的像素风格有没有吸引到你?

官网:https://nostalgic-css.github....

GitHub:https://github.com/nostalgic-...


12. Spectre

正如其官网介绍的那样,Spectre.css 是一个轻量级、响应式和现代化的 CSS 框架,同样是基于 Flexbox 布局创建。

官网:https://picturepan2.github.io...

GitHub:https://github.com/picturepan...


13. Miligram

号称最轻量级的 CSS 框架,但是麻雀虽小,五脏俱全,拥有完整的 web 开发工具。

官网:https://milligram.io/

GitHub:https://github.com/milligram/...


14. Susy

基于 Sass 的轻量级栅格布局框架,可以帮助开发人员简化响应式栅格布局的开发流程。

官网:https://www.oddbird.net/susy/

GitHub:https://github.com/oddbird/susy


15. Picnic

Picnic 也是一个轻量级 CSS 框架,该框架最大的特点就是具有多个交互式组件,包括栅格、表单、选项卡、工具提示等等,可以帮助开发人员快速创建响应式网站和web应用程序。

官网:https://picnicss.com/

GitHub:https://github.com/franciscop...


16. mini

从名字就可以看出,mini.css 也是极其轻量级的 CSS 框架,压缩后不足 10 kB,拥有时下流行的响应式网格和现代化组件,可以再各种设备上获得良好的效果。

官网:https://minicss.org/

GitHub:https://github.com/Chalarange...


17. Paper Css

Paper CSS 是一个使用 LESS 构建的 CSS 框架,可以搭建出别具一格手写风格的页面。
官网:https://www.getpapercss.com/

GitHub:https://github.com/papercss/p...


18. Base

又是一个轻量级单功能强大的响应式 CSS 框架,可以为网站提供坚实的基础。
官网:https://getbase.org/

GitHub:https://github.com/getbase/base


19. Simple Grid

见名知意,Simple Grid是一个轻量级 CSS 网格框架,具备12列栅格设计样式,可以帮助你快速构建响应式网站。

官网:http://simplegrid.io/

GitHub:https://github.com/zachacole/...


20. Tent Css

不依赖任何 JavaScript 的纯 CSS 框架,具备搭建网站页面的基础结构,简洁高效。

官网:https://css.sitetent.com/

GitHub:https://github.com/sitetent/t...


好了,以上就是本文的全部内容了,希望对你有所帮助。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/7415

React 还是 Vue:选哪个?

毫无疑问,React 和 Vue 的目标市场非常相似:两者都是基于组件的轻量级库,都是用来构建仅关注视图层的用户界面。两者都可以用在简单的项目中,也可以使用顶尖的工具链扩展到复杂的应用程序上。于是乎,许多 Web 开发人员都在犹豫到底该用哪个框架。它们之间有明显的差距吗?

vue和angular如何选择?

如今,已有许多开发人员开始使用Vue.js来取代Angular和React.js。那么对于Angular和Vue.js,开发者该如何选择呢?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。vue是一个渐进式的框架,是一个轻量级的框架,也不算是一个框架

前端常用框架优缺点总结

JQuery是一个优秀的javascript框架 ,JQuery宗旨是Write Less Do More ,JQuery是轻量级的js库;Zepto.js针对移动端浏览器;Bootstrap用于开发响应式布局、移动设备优先的web项目

在Vue框架下使用Fullcalendar

Fullcalendar是一个非常受欢迎的日历日程处理的js组件,它功能强大,文档齐全,可定制化高,可与你的项目无缝对接。本站之前有很多文章介绍了Fullcalendar(v3)的使用。今天我们来看看如何在Vue框架下使用Fullcalendar。

前端哪些前端框架有前景?

前端什么技术越来越重要?哪些前端框架有前景?近年来,Web前端市场前景火爆吸引了很多人加入其中,互联网更迭迅速,未来前端有哪些技术会越来越重要呢?下面就给大家分享几个比较有前景的前端框架。

Ember.js和Vue.js对比,哪个框架更优秀?

JavaScript最初是为Web应用程序创建的。但是随着前端技术的发展,大多数开发人员更喜欢使用基于JavaScript的框架。它简化了你的代码以及使你能完成更多全栈工作,您几乎可以在任何框架中使用JavaScript。

React VS Vue选哪个更好?

Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。 2020 年将会是为你的 Web 项目选择正确的 javascript 框架的又一个年头。如果你正在阅读本文,相信你对下一个程序的技术栈感到困惑。

通过框架设计理解React、Angular、Vue区别

我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们可以从框架设计上入手试着分析它们

基于框架搭建与布局系统

我们在开发一个系统的时候,最重要的就是选择系统开发框架,其次选择UI,有了框架会使我们接下来的开发就游刃有余,大大提升我们的开发效率。那么我们如何选择框架?

请停止学习框架

我们都是程序员,我们需要与技术保持同步。每一天我们都要学习编程语言、框架与库。我们了解的现代开发工具越多越好,比如Angular,React,Riot,Vue,Ember,Knockout

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全