DOCSEARCHbyAlgolia
Submit Docs

Pico CSS

repository·main·Indexed 12 days ago

https://github.com/picocss/pico

A minimalist, lightweight CSS framework for semantic HTML that provides a responsive design system and acts as a superpowered reset. Version 2.1.1 supports standard and classless versions, with installation options via NPM, Yarn, Composer, CDN, or manual download.

Tokens
862
Snippets
6
Records
7
Agent score
47%

What's inside Pico CSS

  1. Understand Pico CSS limitations

    main
    Pico CSS is a minimalist framework designed as a "superpowered HTML reset." It does not include utility classes (like Tailwind's .mt-4 or .text-center). For large-scale projects requiring specific layout utilities, you should use Pico as a foundation and extend it using SCSS or custom CSS.

  2. Use the Class-less version of Pico CSS

    main

    The .classless version of Pico is designed for pure HTML projects where you want styles applied directly to semantic elements without adding custom classes.

    In this mode, <header>, <main>, and <footer> elements inside the <body> act as containers to define the viewport.

    • Use the standard classless version for centered viewports.
    • Use the fluid classless version for fluid (full-width) containers.
    <!-- Standard Classless (Centered) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />

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

  3. Use Pico CSS via CDN

    main

    You can quickly add Pico CSS to any project by linking to the jsDelivr CDN in your HTML <head>.

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

  5. Install Pico CSS via NPM or Yarn

    main

    To use Pico CSS in a modern web development workflow, install the @picocss/pico package using your preferred package manager. After installation, you can import it into your SCSS files using the @use rule to enable easy customization via SASS.

    npm install @picocss/pico
# or
yarn add @picocss/pico
    @use "pico";

  7. Starter HTML template for Pico CSS

    main

    When using the standard version of Pico, use this template to ensure proper responsive behavior and color scheme support. Note the use of meta name="color-scheme" content="light dark" to support both modes.

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