search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.89k stars 410 forks source link
css css-framework dark-mode dark-theme lightweight minimal minimalist minimalistic native-html scss scss-framework semantic

readme

Pico CSS

[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=0172ad&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest) [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=0172ad)](https://www.npmjs.com/package/@picocss/pico) [![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/picocss/pico/blob/master/LICENSE.md) [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss) ## 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](https://picocss.com/docs/v2) ## A Superpowered HTML Reset With just the right amount of everything, Pico is great starting point for a clean and lightweight design system. - Class-light and Semantic - Great Styles with Just CSS - Responsive Everything - Light or Dark Mode - Easy Customization - Optimized Performance ## Table of contents - [Quick start](#quick-start) - [Class-less version](#class-less-version) - [Limitations](#limitations) - [Documentation](#documentation) - [Browser Support](#browser-support) - [Contributing](#contributing) - [Copyright and license](#copyright-and-license) ## Quick start There are 4 ways to get started with pico.css: ### Install manually [Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `` of your website. ```html ``` ### Usage from CDN Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css. ```html ``` ### Install with NPM ```shell npm install @picocss/pico ``` Or ```shell yarn add @picocss/pico ``` Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use): ```SCSS @use "pico"; ``` ### Install with Composer ```shell composer require picocss/pico ``` ### Starter HTML template ```HTML Hello world!

Hello world!

``` ## Class-less version Pico provides a `.classless` version. In this version, `
`, `
`, and `