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/去发挥你的创意吧。