业余时间开发了 aqua.css——一个轻量级纯 CSS 框架

2020-03-27 14:52:19 +08:00
 alphardex

官网: https://aquacss.netlify.com/

前言

当今,大部分前端都过度注重于 JS 框架的学习,而忽略了原生的 HTML 和 CSS 。写的组件大部分都是过度封装,维护起来非常吃力,并且可扩展性也差。但是,倘若学好了 HTML 和 CSS,很多组件也就可以摆脱 JS,从而让 UI 能充分地表现自己,而不是在一坨翔山上艰难地爬行。

aqua.css

aqua.css 是笔者开发的一个轻量级的纯 CSS 框架。她有 3 大特征:易用、易定制、有趣。

易用

诸如 React 、Vue 之类框架一概不需掌握,参照组件 demo 复制粘贴就能跑出效果来。

易定制

阅读本项目源码你会发现许多 CSS 变量,它们往往决定了组件的色彩,如果你想“换肤”,只需用不同的颜色变量覆盖即可

有趣

本项目用到了很多有趣且实用的 CSS 技巧,非常适合学习

5008 次点击
所在节点    分享创造
25 条回复
xiaoz
2020-03-27 15:10:25 +08:00
已收藏,支持开源。
iwuzhuo
2020-03-27 15:23:27 +08:00
支持。 建议:希望能做到和 bootstrap 之类的框架兼容,这类 css 框架非常是用来弥补 bootstrap 框架的不足
guolaopi
2020-03-27 15:55:27 +08:00
已收藏 + star,谢谢分享
guolaopi
2020-03-27 15:58:12 +08:00
另外,官网显示的 Gauge 仪表盘组件在 FireFox 显示不正常,FireFox 版本 74.0
B1ankCat
2020-03-27 16:47:51 +08:00
我和设计师差了一双能识别出颜色的眼睛
B1ankCat
2020-03-27 16:48:33 +08:00
@B1ankCat 嗯,还有能画出圆的手
hzlzh
2020-03-27 16:51:38 +08:00
看起来很不错啊。
Loading 加载 的 dom 有些多,是否可以尝试一下用伪元素来精简呢?
YunYouJun
2020-03-27 17:19:59 +08:00
兹辞,素晴爱了。
guolaopi
2020-03-27 17:22:27 +08:00
dialog 在 FireFox 也不正常,报错了:TypeError: document.querySelector(...).showModal is not a function
suruis
2020-03-27 18:39:50 +08:00
已收藏,学习学习。
Justin13
2020-03-27 18:58:28 +08:00
支持,特别佩服精通 CSS 的大神,我愿称之为“绝活”
aydd2004
2020-03-27 19:15:02 +08:00
已收藏 周末用一下看看
seekfire
2020-03-27 21:48:52 +08:00
不错,支持一下
dyxang
2020-03-28 08:29:17 +08:00
喔,不正经 css ( bushi ),请问那个阿库娅的图哪来的?😏
tyrik
2020-03-28 08:50:07 +08:00
厄里斯的胸部是垫出来的!
alphardex
2020-03-28 09:19:26 +08:00
Austin2035
2020-03-28 09:57:16 +08:00
厉害,大佬厉害。
greatghoul
2020-03-28 12:53:47 +08:00
为美好的世界献上祝福!
40EaE5uJO3Xt1VVa
2020-03-28 14:17:06 +08:00
大佬大佬爱了爱了,就等这种。期待更多样式
haozi3156666
2020-03-28 16:05:59 +08:00
优秀啊

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/656793

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX