语义 HTML 的最小 CSS 框架 Pico 为何能火?
ccwgpt 2024-11-21 11:21 20 浏览 0 评论
大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
1.什么是 Pico
Pico 一个极简、轻量级的入门工具包，优先考虑语义语法，默认情况下使每个 HTML 元素响应灵敏且优雅，并自称是最小的 CSS 框架。
Minimal CSS Framework for Semantic HTML随着 Pico v2.0 发布，Pico 具有更好的可访问性、更容易使用 SASS 进行自定义、完整的调色板、新的组件以及 20 个预编译颜色主题，总计超过 100 种可通过 CDN 访问的组合。
Pico 的典型特点包括：
- 轻量级和语义化：Pico 凭借简单性而蓬勃发展，直接设计 HTML 标签，总共使用不到 10 个 .class。同时，Pico 还为狂野的 HTML 纯粹主义者提供了无类版本。
- 使用纯 CSS 编写样式：这种情况，Pico 可以无缝支持，无需依赖项、包管理器、外部文件或 JavaScript，通过纯 HTML 标记实现优雅且简单的样式。
- 一切都保持响应式：在每台设备上都能轻松优雅， Pico 本身会根据屏幕宽度缩放字体大小和间距，从而在不同设备上呈现一致且优雅的外观，不需要额外的类或配置。
- 支持浅色或深色模式：Pico 提供两种开箱即用的中性配色方案，即浅色和深色，同时会自动适应用户偏好的颜色方案，而无需使用 JavaScript。
- 支持轻松定制：使用超过 130 个 CSS 变量自定义 Pico，或使用 SASS 进行更深层次的定制。 支持在 20 多 种颜色主题之间切换，并使用 30 多个模块化组件进行组合，以根据品牌的外观和感觉定制 UI。
- 优化的性能： 与需要大量类覆盖和 JavaScript 的庞大且过于复杂的框架不同，Pico 使 HTML 保持精简，通过避免过多的 CSS 特异性来减少内存使用，并减少加载的文件。
目前 Pico 在 Github 通过 MIT 协议开源，有超过 11.8k 的 star、2k 的项目依赖量、50 + 代码贡献者，妥妥的前端优质开源项目。
2.如何使用 Pico
classless 版本
Pico 的 .classless 版本拥抱极简主义，这是偏爱简约方法的狂野 HTML 纯粹主义者的语义选项。在此版本中，<body> 内的 <header>、<main> 和 <footer> 充当定义居中或流体视口的容器。
/* Containers */
body > header,
body > main,
body > footer {
...
}下面两种布局方式完全一样：
<!-- With pico.min.css -->
<body>
<main class="container">
<h1>Hello, world!</h1>
</main>
</body><!-- With pico.classless.min.css -->
<body>
<main>
<h1>Hello, world!</h1>
</main>
</body>支持浅色或深色模式
Pico CSS 具有浅色和深色两种配色方案，可根据用户偏好自动启用:
section {
background-color: var(--pico-background-color);
color: var(--pico-color);
}自适应
所有印刷元素都具有响应能力，并且可以跨设备和视口优雅地缩放。
支持自定义
使用 130 多个 CSS 变量自定义 Pico 的设计系统，以创建独特的外观和感觉。
Pico 包含许多自定义属性（变量），可以轻松访问常用值，例如：字体系列、字体大小、边框半径、边距、填充等。所有 CSS 变量都以 pico- 为前缀，以避免与其他 CSS 框架或自己的变量发生冲突。 可以通过使用 SASS 重新编译 CSS 文件来删除或自定义此前缀。
可以在 :root 选择器中定义 CSS 变量以全局应用更改，或覆盖特定选择器上的 CSS 变量以在本地应用更改。
<style>
:root {
--pico-border-radius: 2rem;
--pico-typography-spacing-vertical: 1.5rem;
--pico-form-element-spacing-vertical: 1rem;
--pico-form-element-spacing-horizontal: 1.25rem;
}
h1 {
--pico-font-family: Pacifico, cursive;
--pico-font-weight: 400;
--pico-typography-spacing-vertical: 0.5rem;
}
button {
--pico-font-weight: 700;
}
</style>更多关于Pico新特性可以参考文末的资料，本文不再过多展开。
参考资料
https://github.com/picocss/pico
https://athemes.com/collections/best-css-frameworks/
相关推荐
- 腾讯开源框架TarsCpp-rpc设计分析-server(二)
-
2Tars协议2.1是什么借用官方说法：TARS编码协议是一种数据编解码规则，它将整形、枚举值、字符串、序列、字典、自定义结构体等数据类型按照一定的规则编码到二进制数据流中。对端接收到二进制数据流...
- 微服务调用为什么用RPC框架，http不更简单吗?
-
简单点，HTTP是协议，RPC是概念！实现RPC可以基于HTTP协议（Feign），TCP协议(Netty)，RMI协议（Soap），WebService（XML—RPC）框架。传输过程中，也因为序列...
- go-zero:开箱即用的微服务框架（gin框架微服务）
-
go-zero是一个集成了各种工程实践的Web和rpc框架，它的弹性设计保障了大并发服务端的稳定性，并且已经经过了充分的实战检验。go-zero在设计时遵循了“工具大于约定和文档”的理...
- SOFARPC :高性能、高扩展性、生产级的 Java RPC 框架
-
#暑期创作大赛#SOFARPC是一个高性能、高扩展性、生产级的JavaRPC框架。在蚂蚁金服，SOFARPC已经使用了十多年，已经发展了五代。SOFARPC致力于简化应用程序之间的RPC...
- 自研分布式高性能RPC框架及服务注册中心ApiRegistry实践笔记
-
痛点1.bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级。2.eureka已经闭源，且框架设计较重，同时引入eureka会自行引入较多sprin...
- Rust语言从入门到精通系列 - Tonic RPC框架入门实战
-
Rust语言是一种系统级语言，被誉为“没有丧失性能的安全语言”。Rust语言的优势在于其内存安全机制，在编译时就能保证程序的内存安全。Tonic模块是Rust语言的一个RPC（RemoteProce...
- 腾讯开源框架TarsCpp-rpc设计分析-client(一)
-
前言Tars是腾讯开源的微服务平台，包含了一个高性能的rpc框架和服务治理平台，TarsCpp是其C++版本。对于以C++为主要开发语言，同时还想深入了解rpc和微服务框架具体实现的同学来说，Tars...
- 设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架
-
为啥要开发RPC框架事情是这样的，在开发这个RPC框架之前，我花费了不少时间算是对Dubbo框架彻底研究透彻了。冰河在撸透了Dubbo2.x和Dubbo3.x的源码之后，本来想给大家写一个Dubbo源...
- rpc框架使用教程，超级稳定好用，大厂都在使用
-
rpc是什么远程调用协议如何使用导入依赖<dependency><groupId>org.apache.dubbo</groupId><art...
- Layui 框架实战:动态加载 Select 与二级联动全解析
-
在现代Web开发中，下拉选择框（Select）是用户输入数据时不可或缺的组件。很多时候，我们需要的选项并非静态写死在HTML中，而是需要根据业务逻辑从后端动态获取。更有甚者，我们可能需要实现“...
- 15个能为你节省数百小时的前端设计神器，从UI库到文档生成
-
无论你是刚开始开发之旅的新手，还是疲于应付生产期限的资深程序员，有一个真理始终不变：正确的工具能彻底改变你的工作流程。多年来，我测试了数百个开发工具——有些实用，大多数平庸。但有一批免费网站经受住了时...
- Layui与WinForm通用权限管理系统全解析
-
嘿，小伙伴们，今天咱们来聊聊Layui和WinForm这两个框架在通用权限管理系统中的应用。别担心，我会尽量用简单易懂的语言来讲解，保证让大家都能跟上节奏！首先说说Layui。Layui是一个前端UI...
- 纯Python构建精美UI!MonsterUI让前端开发效率飙升
-
“无需CSS知识，告别类名记忆，11行代码实现专业级卡片组件”在传统Web开发中，构建美观界面需要同时掌握HTML、CSS、JavaScript三剑客，开发者不得不在多种语言间频繁切换。即使使用Boo...
- WebTUI:将终端用户界面(TUI)之美带到浏览器的CSS库
-
在当今Web技术飞速发展的时代，界面设计愈发复杂多样。然而，随着现代化工具的广泛使用，一些开发者开始回归极简风格，追求一种简洁而富有韵味的设计。WebTUI正是这样一款CSS库，它将经典的终...
- 人教版二年级下册生字描红汇总(拼音+笔顺+描红)，可打印!
-
可定制内容，评论区留言。本次整理的为人教版二年级下册所有生字，共计300个；写字是小学阶段一项重要的基本功训练，把汉字写得正确、工整、美观，可以提高运用汉字这一交际工具的准确性和效率。对小学生进行写字...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 腾讯开源框架TarsCpp-rpc设计分析-server(二)
- 微服务调用为什么用RPC框架，http不更简单吗?
- go-zero:开箱即用的微服务框架（gin框架微服务）
- SOFARPC :高性能、高扩展性、生产级的 Java RPC 框架
- 自研分布式高性能RPC框架及服务注册中心ApiRegistry实践笔记
- Rust语言从入门到精通系列 - Tonic RPC框架入门实战
- 腾讯开源框架TarsCpp-rpc设计分析-client(一)
- 设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架
- rpc框架使用教程，超级稳定好用，大厂都在使用
- Layui 框架实战:动态加载 Select 与二级联动全解析
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)