Pico.css大道至简返璞归真--一个简单轻量化的CSS框架

Pico.css是什么?

Pico.css是一个简单轻量化的CSS UI框架,最大的特点是样式都基于HTML原始的标签名和内置的属性,少用甚至是不用class来定义样式,写出来的代码语义清晰,可维护性强,能够帮助开发者构建自己的UI系统,也可以直接用于快速的小型项目中。Pico.css在Github上已经有高达8.8KStar。

为什么要使用Pico.css?

现代的前端框架都很重,使用之前需要搭建各种环境,安装很多的依赖,编写完代码还要打包等等。有的时候只是需要一个简单的页面,也要如此重的操作吗?
前几天我打算写一个博客的主题,也就是几个静态页面,我的初衷就是快速实现,不要杀鸡使用牛刀,偶然搜到pico,简单看了下文档,被其漂亮简约的UI,简谱简单的使用方法吸引了,毅然决定使用她。

怎么使用Pico.css

Download Pico and link /css/pico.min.css in the of your website.
下载并把pico.min.css引入到你的站点。
或者使用CDN:

<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@1.*/css/pico.min.css">

然后呢?你只需要写你的纯正的HTML即可!

例如:

<button>Button</button>
<input type="submit">

效果:
在这里插入图片描述
在使用中,你尽情的使用HTML原生的标签,而不必担心整个站点的样式,该框架还提供了明暗两种主题,可以一键切换:data-theme="light"

最后,https://picocss.com/去发挥你的创意吧。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这里不提提纳里

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值