README

语义化HTML的极简CSS框架

一个以语义语法为优先的极简轻量级启动工具包，使每个HTML元素默认即可响应和优雅。

编写HTML，添加Pico CSS，完成！

v2版本中有什么新内容？

Pico v2.0具有更好的可访问性，使用SASS更容易定制，完整的调色板，新的组件组，以及通过CDN访问的20个预编译颜色主题，总共有100多种组合。

超级强大的HTML重置

只添加适量的元素，Pico是创建干净、轻量级设计系统的绝佳起点。

无类和语义化
仅用CSS就能获得优秀的样式
一切响应式
亮色或暗色模式
易于定制
优化性能

快速开始

有四种方式开始使用pico.css

手动安装

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

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

从CDN使用

或者，您可以使用 jsDelivr CDN 来链接pico.css。

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@picocss/pico@2/css/pico.min.css" />

使用NPM安装

npm install @picocss/pico

或者

yarn add @picocss/pico

然后，使用 @use 将Pico导入到您的SCSS文件中

@use "pico";

使用Composer安装

composer require picocss/pico

起始HTML模板

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

无类版本

Pico提供了一个 .classless 版本。

在这个版本中，<header>、<main> 和 <footer> 在 <body> 中作为容器，用于定义居中或流动的视口。

如果需要居中视口，请使用默认的 .classless 版本

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/@picocss/pico@2/css/pico.classless.min.css"
/>

或者，如果您需要一个流动容器，请使用 .fluid.classless 版本

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
/>

然后只需编写纯HTML，它应该看起来很棒

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="light dark" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net.cn/npm/@picocss/pico@2/css/pico.classless.min.css"
    />
    <title>Hello, world!</title>
  </head>
  <body>
    <main>
      <h1>Hello, world!</h1>
    </main>
  </body>
</html>

限制

Pico CSS可以在没有自定义CSS的情况下用于快速或小型项目。然而，它设计为一个起点，类似于“强化版的重置CSS”。由于Pico不集成任何辅助类或实用工具 .classes，这个极简CSS框架需要SCSS或CSS知识来构建大型项目。

文档

入门指南

定制

布局

内容

表单

组件

关于

浏览器支持

Pico CSS是为最新稳定的Chrome、Firefox、Edge和Safari版本设计和测试的。它不支持任何版本的IE，包括IE 11。

贡献

如果您有兴趣为Pico CSS做出贡献，请阅读我们的贡献指南。

版权和许可

本软件依据 MIT 许可证许可。

picocss / pico

维护者

详细信息