mirror of
https://github.com/picocss/pico.git
synced 2025-02-23 00:01:58 -05:00
Pico.css
Graceful & Minimal CSS design system in pure semantic HTML.
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.
5.6 KB minified and gzipped
- Class-light and semantic: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.
- Great styles with just one CSS file: No dependencies, package manager, external files or JavaScript.
- Responsive everything: Elegant and consistent adaptatives spacings and typography on all devices.
- Light or Dark mode: Shipped with two beautiful color themes, automatically enabled according to the user preference.
Usage
There are 3 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">
Install from CDN
Alternatively, you can use the unpkg CDN to link pico.css.
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
Install with NPM
npm install @picocss/pico
Examples
- Class-less: Just a pure semantic HTML markup, without
.classes - Company: A classic company or blog layout with a sidebar.
- Google Amp: A simple layout for Google Amp, with inlined CSS.
- Sign in: A minimalist layout for Login pages.
Documentation
Getting started
Layout
Elements
Components