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

2024-06-16 22:49:16

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

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

CSS大道至简--读《CSS禅意花园》
CSS大道至简只承认一个个确实存在的东西,凡干扰这一具体存在的空洞的普遍性概念都是无用的累赘和废话,应当一律取消.如无必要,勿增实体. ---奥卡姆剃刀周末找了两个主题研究了一下:CSS 正则表达 ...
github密码格式_如何使用GitHub构建一个简单的网页（不用框架版本）
1.申请GitHub账号进入GitHub官网,点击右上角的Sign up进行注册, 注册很简单,只要填写好用户名,邮箱,密码就行(已注册的用户名,邮箱不能再进行注册) 下面有一个你是人类的验证(照着 ...
一个简单好用的日志框架NLog
之前我介绍过如何使用log4net来记录日志,但最近喜欢上了另一个简单好用的日志框架NLog. 关于NLog和log4net的比较这里就不多讨论了,感兴趣的朋友可以参看.NET日志工具介绍和log4n ...
Unity PureMVC 之 PureMVC 框架的下载，以及一个简单应用学会使用 PureMVC 框架
Unity PureMVC 之 PureMVC 框架的下载,以及一个简单应用学会使用 PureMVC 框架目录 Unity PureMVC 之 PureMVC 框架的下载,以及一个简单应用学会 ...
一个简单且完整的PyTorch框架
PyTorch framework 该框架适合懂一点PyTorch但没有完整加载自己数据跑过实验的人,以及完整跑过实验但代码写的不优雅的人.可以在该框架上直接迁移到自己任务上,只需要更改dataloa ...
一个简单好用的后台框架模板
一个无刷新的简单好用的后台框架模板下载地址:https://www.lmcjl.com/index/javascript/jqueryview?id=39 里面还有很多的模板与工具,希望可以帮助到您
只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局
下面进入正题:布局是网页设计的基础中的基础,一个好的布局可以让人一目了然,一个失败的布局会让协同人员抓狂.所以前端开发,从布局开始. 首先分析一下图片的布局 ,分析各个色块之间的嵌套关系如图所示:红 ...
ReactHooks——制作一个简单的瀑布流(css)
瀑布流数据 export const TRAVEL_DATA = [{classname:"animate__bounceInLeft",imgsrc: img1,},{clas ...
css首字下沉_一个简单CSS首字下沉
css首字下沉您不会没有注意到我们在新博客设计中使用的首字母缩略词效果,以及大多数浏览器显示的第一行大写字母(除了Safari,我将在稍后说明的原因). 有很多hacky方法可以实现这种效果,但是最 ...

最新文章

热门文章