pico README

The project's README from github.com/picocss/pico. As one markdown file: README.md.

Pico CSS

Github release npm version License X (formerly Twitter)

Minimal CSS Framework for Semantic HTML

A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.

Write HTML, Add Pico CSS, and Voilà!

What’s new in v2?

Pico v2.0 features better accessibility, easier customization with SASS, a complete color palette, a new group component, and 20 precompiled color themes totaling over 100 combinations accessible via CDN.

Read more

A Superpowered HTML Reset

With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.

Table of contents

Quick start

There are 4 ways to get started with pico.css:

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

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

Usage from CDN

Alternatively, you can use jsDelivr CDN to link pico.css.

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

Install with NPM

npm install @picocss/pico

Or

yarn add @picocss/pico

Then, import Pico into your SCSS file with @use:

@use "pico";

Install with Composer

composer require picocss/pico

Starter HTML template

<!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>

Class-less version

Pico provides a .classless version.

In this version, <header>, <main>, and <footer> inside <body> act as containers to define a centered or a fluid viewport.

Use the default .classless version if you need centered viewports:

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

Or use the .fluid.classless version if you need a fluid container:

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

Then just write pure HTML, and it should look great:

<!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/npm/@picocss/pico@2/css/pico.classless.min.css"
    >
    <title>Hello, world!</title>
  </head>
  <body>
    <main>
      <h1>Hello, world!</h1>
    </main>
  </body>
</html>

Limitations

Pico CSS can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities .classes, this minimal CSS framework requires SCSS or CSS knowledge to build large projects.

Read more

Documentation

Getting started

Customization

Layout

Content

Forms

Components

About

Browser Support

Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11.

Contributing

If you are interested in contributing to Pico CSS, please read our contributing guidelines.

Licensed under the MIT License.

pico (picocss/pico)

Searching Database…

16.8K ·GitHub
archived
这是什么?Pico 是一个面向语义化 HTML 的极简 CSS 框架:只需一个样式表,就能让普通的 HTML 元素默认呈现出响应式、美观的效果。采用 MIT 许可证,理念是让你直接写 HTML,而不是堆砌 class。
那它只是又一个 CSS reset 吗?不止是 reset——README 把它称为一套干净、轻量的设计系统的起点。它直接给语义化元素设置样式,所以你写的 HTML 几乎不需要 class。
怎么把它加到我的网站上?四种方式:下载并引入 css/pico.min.css、从 jsDelivr CDN 加载、通过 npm 安装后用 @use 导入 SCSS,或者用 Composer 安装。
它需要 JavaScript 或构建步骤才能用吗?不需要——它就是纯 CSS:没有 JavaScript、没有依赖,走 CDN 或手动引入的路线也不用构建。只有当你为了自定义而选择 npm 方式时才会用到 SCSS。
大项目里不写自定义 CSS 也能用它吗?不太行——Pico 没有提供任何辅助工具或 utility class,所以大项目还得靠你自己的 SCSS 或 CSS 功底。把它当成地基来用,就像一份「加强版 reset CSS」。
Pico 还在积极维护吗?没有——GitHub 仓库已经归档、只读,不会再收到更新。通过 CDN 或 npm 使用的 2 版本仍然完全可用,但请把该项目视为已冻结。
相比一张空白样式表,选 Pico 的理由是什么?开箱即得每个语义化元素的干净响应式样式,你的起点是一套轻量的设计系统基础,而不是一个空的 CSS 文件——而且它足够小巧,方便你用 SASS 自定义。
有没有可以快速上手的入门模板?有——快速开始部分链接了一个 HTML 起步模板:复制下来、加上 Pico,你马上就能看到语义化 HTML 以框架默认样式渲染出来的效果。
Creator
picocss
Size
10.1 MB
Stars
16.8K
Age
6y
Commits · 90 Days