现在有很多前端框架,功能强大十分适合企业级超复杂型的项目。但是如果我们只是做一个小项目呢? 是不是很繁琐!! 我找到了一个github上开源的项目,这个超小型CSS样式库 可以让我们保持网页设计的优雅和简单!虽然简单但是一切恰到好处的,Pico.css 是一个简洁、轻量级的设计系统的绝佳解决方案。

Pico.css

大多数流行的 CSS 框架体积庞大、过度封装太过内卷,层出不穷的前端技术没让人感到学习吃力。而且如果没有超覆盖的样式,就很难自定义。
语义html元素不需要大量的包装器和 CSS 类。
大而复杂的 CSS 文件会增加内存使用并导致更长的样式计算。
基础 HTML 元素不应该需要打包大量依赖项。

Pico.css 的特点

语义化
Pico 尽可能使用简单的原生 HTML 标签。Pico 中使用的 .classes 少于 10 个。

只需一个 CSS 文件
没有依赖项、包管理器、外部文件或 JavaScript。即可实现出色的css样式

响应式

自适应所有设备屏幕尺寸,保持优雅一致的间距和排版。

浅色和深色 两种模式
附带两个优雅的 的 浅色和深色主题,根据用户偏好可以自动启用。

快速上手

有 3 种方法可以开始使用 pico.css:

手动安装

下载 Pico.css 并链接/css/pico.min.css到您的网站。<head></hedad>

<link rel="stylesheet" href="css/pico.min.css">

从 CDN 安装

或者,您可以使用unpkg CDN链接 pico.css

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

使用 NPM 安装

npm install @picocss/pico

入门 HTML 模板

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/pico.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello, world!</h1>
    </main>
  </body>
</html>

官方示例:https://picocss.com/#examples

开发文档:https://picocss.com/docs/

Github地址:https://github.com/picocss/pico

开源协议:MIT

最后修改日期: 2022年3月17日

作者

留言

撰写回覆或留言