DOCSEARCHbyAlgolia
Submit Docs

Pico CSS

repository·main·Indexed 41 days ago

https://github.com/yohn/picocss

A minimalist, lightweight CSS framework version 2.2.10 that prioritizes semantic HTML. It acts as a 'superpowered reset' to provide a responsive design system without requiring heavy use of custom classes. Offers a standard version and a .classless version for pure HTML projects, with support for SASS customization and automatic light/dark mode switching.

Tokens
840
Snippets
5
Records
6
Agent score
2%

What's inside Pico CSS

  1. Understand Pico CSS limitations

    main
    Pico CSS is a minimalist framework designed as a "superpowered HTML reset." It prioritizes semantic HTML and does not provide a large library of utility classes (like Tailwind CSS). For large-scale projects, you should use the SASS integration to customize the framework via SCSS or standard CSS to build complex layouts.

  3. Use the Pico CSS Class-less version

    main

    Pico CSS offers a .classless version designed for pure HTML projects where you want to avoid adding custom classes. In this mode, semantic elements like <header>, <main>, and <footer> act as containers to define the viewport.

    There are two variants:

    1. Default .classless: Provides centered viewports.
    2. .fluid.classless: Provides a fluid (full-width) container.

    Note: Ensure you include <meta name="color-scheme" content="light dark" /> in your <head> to support automatic light/dark mode switching.

    <!-- Centered Viewport -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css" />

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

  4. Install Pico CSS via NPM

    main

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

    npm i @yohns/picocss
    @use "pico";

  5. Starter HTML template for Pico CSS

    main

    Use this boilerplate to ensure proper responsive behavior, color scheme support, and container layout when starting a new project.

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

  6. Use Pico CSS via CDN

    main

    For quick prototyping or projects without a build step, you can link directly to the precompiled Pico CSS file hosted on jsDelivr. This is the fastest way to get started.

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