13 个有趣且实用的 CSS 框架/组件-低调大师

13 个有趣且实用的 CSS 框架/组件

2022-05-23 850

前端的同学们对 CSS 肯定不会陌生，这部分内容控制着网页的外观。今天我们给大家整理了一些有趣的 CSS 组件，这些组件能增强网页的排版、让网页实现多种风格，甚至可以检查页面的 Bug ！

1、赫蹏

赫蹏（hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，预置古文、诗词样式，提供移动端支持；可以为网站的读者带来更好的文章阅读体验。

项目地址：https://www.oschina.net/p/heti

2、Pixel Art to CSS

Pixel Art to CSS 是一个基于 React 的在线像素绘画编辑器，你可以用这个编辑器绘制像素版的图片或者 GIF 动图，绘制完毕后可以一键获取对应像素图的 CSS 代码。

项目地址：https://www.oschina.net/p/pixel-art-react

3、css-checker

css-checker 可用于检查 css 样式是否有重复，并在几秒钟内找到具有高度相似的 css classes 之间的差异，从而避免文件之间出现冗余或相似的 css 样式组件，同时适用于本地开发和 CI 等自动化流程。

项目地址：https://www.oschina.net/p/css-checker

4、bttn.css

bttn.css 是一个 CSS 按钮样式库，包含一系列精美的按钮样式。引入 bttn.css 文件后，在按钮元素中添加对应 css 类即可为按钮加入对应样式：

项目地址：https://www.oschina.net/p/bttn-css

5、Animate.css

Animate.css 是一个有趣的，跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，让网页变得更加灵动。Animate.css 可以与 Javascript 结合使用，制作一些更有趣的循环动画效果。

项目地址：https://www.oschina.net/p/animate-css

6、NES.css

NES.css 是一款 NES 红白机风格的 CSS 框架，可以使用它实现红白机风格的按钮，字体，对话框。只含 CSS ，不依赖任何 JavaScript。

项目地址：https://www.oschina.net/p/nes-css

7、PSone.css

psone.css 是一个 PS1 游戏机风格的 CSS 框架，使用它可以实现复古 PS1 风格的网页元素。

项目地址：https://www.oschina.net/p/psone-css

8、98.css

98.css 是一个用于模仿 Windows 98 界面的 CSS 库，满满的怀旧风...

项目地址：https://www.oschina.net/p/98-css

9、MVP.css

MVP.css 包含 HTML 元素的开箱即用 CSS 样式，也就是说用户甚至可以不懂 CSS ，只需在 HTML 中引用该框架，即可为 HTML 元素附加如下的样式：

项目地址：https://www.oschina.net/p/mvp-css

10、Charts.css

Charts.css 是一个将 HTML 元素样式转化为可视化图表的开源 CSS 框架，用简单的 CSS 类即可将数据转换为漂亮的图表和图形。它支持使用媒体查询进行自适应缩放、支持多种图表类型、无 JS 代码带来的额外性能开销。

项目地址：https://www.oschina.net/p/charts-css

11、Pure.css

Pure 是一个小型响应式 CSS 框架，它包含一组响应式 CSS 模块，为原生 HTML 元素以及最常见的 UI 组件提供响应式布局和样式。通过 Pure 可以使用 Grids、Menus 等组件快速构建网页的基础布局 —— PC/移动双端、所有屏幕大小都适配的自适应布局。如图：

项目地址：www.oschina.net/p/pure-css

12、Bulma.css

Bulma 是一个基于 Flexbox 的现代 CSS 框架，它提供了现成的响应式前端组件，使用组件可以轻松创建一个 100% 响应式的页面，对移动端极为友好。

项目地址：https://www.oschina.net/p/bulma

13、css.gg

css.gg 是一个开源的 CSS、SVG 和 Figma UI 图标库，可用于 SVG Sprite、样式组件、NPM 和 API。

项目地址：https://www.oschina.net/p/css-gg

本文所介绍的软件均来自 Awesome 软件系列之《有趣且实用的 CSS 框架、组件》：https://www.oschina.net/project/awesome?columnId=3 。

小编在此系列中摘录了部分开源 CSS 框架/组件作介绍，旨在抛砖引玉。如果你还了解其他有趣、实用的 CSS 组件，欢迎在评论区留言分享，我们将采纳大家的建议，持续更新 Awesome 系列的内容。

其他 Awesome 系列

微信关注我们

原文链接：https://my.oschina.net/shoumenchougou/blog/5530549

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

关于代码评审(CodeReview)那些不得不说的事儿

在一个成熟的团队中，CodeReview是整个研发流程中不可或缺的一步，而那些即将走向成熟的团队可能对CodeReview有很多的误解和问题，也不清楚CodeReview该如何去做，本文笔者将结合自己的经验和知识，谈谈我对CodeReview流程的一些理解和建议。什么是CodeReview CodeReview 国内也称代码评审或者代码审查，也简称CR，是指在软件开发过程中，工程师对其他人所写代码做审阅（后文统称CodeReview），以达到控制代码质量的目的。通常的流程都是由代码写作者发起，请团队内其他人审阅代码，其他人对代码提出改进建议，再由代码写作者修改重新提交，直至代码通过大家的审阅为止。为什么要做CodeReview？其实很多人都不是很重视CodeReview，因为CodeReview的效果短期很难看到，也很难量化衡量。就如同运动一样，偶尔过量的运动不仅对身体无益，可能还会起反作用，不过长期的坚持肯定会让你更健康，但能让你健康多少很难量化，不过前一段时间github上爆火的项目《程序猿延寿指南》里给出了可参考的数据，每周3次45分钟挥拍运动可以减少全因死亡...

2022-05-23

406

Zadig on Github Zadig on Gitee 与 Zadig 结缘星云科技的核心成员来自贝贝集团，贝贝同样是一家科技型企业，在过去几年的发展中已经形成了一套自己的研发体系，在 Zadig 的发展早期（当时产品还叫 KodeRover），我们就有过接触，不过因为当时机会还不成熟，暂时没有引入。但 Zadig 团队及其产品已经给我们留下了很深的印象，因此当我们在星云科技搭建研发体系时，首先想到的就是结合 Zadig 来构建我们的持续交付系统。赵文路,运维 Leader，星云科技业务发展迅猛、挑战重重业务初期，采用单体应用 + 前后端分离，通过 Docker 先把业务运行起来，部分业务无法使用 Docker 的，直接采用 jar 包启动的方式，先保证应用正常运行来满足业务诉求。后来增加了 Docker-Compose，初步实现运维代码化工作。随着业务逐步发展壮大，Docker-Compose + 多虚拟机的方式越来越力不从心，面临诸多挑战：核心模块逐步拆分为多个服务，每个服务都需要高可用部署，并调控实例数量涉及到前后端、负载均衡、日志收集、编译部署多个环节...

2022-05-23

570

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。