Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/picocss/pico
Minimal CSS Framework for semantic HTML
https://github.com/picocss/pico
css css-framework dark-mode dark-theme lightweight minimal minimalist minimalistic native-html scss scss-framework semantic
Last synced: 11 days ago
JSON representation
Minimal CSS Framework for semantic HTML
- Host: GitHub
- URL: https://github.com/picocss/pico
- Owner: picocss
- License: mit
- Created: 2019-11-15T09:42:54.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-09-08T05:15:28.000Z (2 months ago)
- Last Synced: 2024-10-14T21:41:44.943Z (25 days ago)
- Topics: css, css-framework, dark-mode, dark-theme, lightweight, minimal, minimalist, minimalistic, native-html, scss, scss-framework, semantic
- Language: CSS
- Homepage: https://picocss.com
- Size: 8.51 MB
- Stars: 13,586
- Watchers: 81
- Forks: 394
- Open Issues: 80
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - picocss/pico - Minimal CSS Framework for semantic HTML (CSS)
- my-awesome-list - pico
- Awesome-CSS-Resources - pico:
- jimsghstars - picocss/pico - Minimal CSS Framework for semantic HTML (CSS)
- fucking-awesome-css-frameworks - Repo
- awesome-css-frameworks - Repo
- StarryDivineSky - picocss/pico
README
[](https://github.com/picocss/pico/releases/latest)
[](https://www.npmjs.com/package/@picocss/pico)
[](https://github.com/picocss/pico/blob/master/LICENSE.md)
[](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 `` inside `` act as containers to define a centered or a fluid viewport.
Use the default `.classless` version if you need centered viewports:
```html
```
Or use the `.fluid.classless` version if you need a fluid container:
```html
```
Then just write pure HTML, and it should look great:
```html
Hello, world!
Hello, world!
```
## 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](https://picocss.com/docs/usage-scenarios)
## Documentation
**Getting started**
- [Quick start](https://picocss.com/docs)
- [Version picker `New`](https://picocss.com/docs/version-picker)
- [Color schemes](https://picocss.com/docs/color-schemes)
- [Class-less version](https://picocss.com/docs/classless)
- [Conditional styling `New`](https://picocss.com/docs/conditional)
- [RTL](https://picocss.com/docs/rtl)
**Customization**
- [CSS Variables](https://picocss.com/docs/css-variables)
- [Sass](https://picocss.com/docs/sass)
- [Colors `New`](https://picocss.com/docs/colors)
**Layout**
- [Container](https://picocss.com/docs/container)
- [Landmarks & section](https://picocss.com/docs/landmarks-section)
- [Grid](https://picocss.com/docs/grid)
- [Overflow auto `New`](https://picocss.com/docs/overflow-auto)
**Content**
- [Typography](https://picocss.com/docs/typography)
- [Link](https://picocss.com/docs/link)
- [Button](https://picocss.com/docs/button)
- [Table](https://picocss.com/docs/table)
**Forms**
- [Overview](https://picocss.com/docs/forms)
- [Input](https://picocss.com/docs/forms/input)
- [Textarea](https://picocss.com/docs/forms/textarea)
- [Select](https://picocss.com/docs/forms/select)
- [Checkboxes](https://picocss.com/docs/forms/checkboxes)
- [Radios](https://picocss.com/docs/forms/radios)
- [Switch](https://picocss.com/docs/forms/switch)
- [Range](https://picocss.com/docs/forms/range)
**Components**
- [Accordion](https://picocss.com/docs/accordion)
- [Card](https://picocss.com/docs/card)
- [Dropdown](https://picocss.com/docs/dropdown)
- [Group `New`](https://picocss.com/docs/group)
- [Loading](https://picocss.com/docs/loading)
- [Modal](https://picocss.com/docs/modal)
- [Nav](https://picocss.com/docs/nav)
- [Progress](https://picocss.com/docs/progress)
- [Tooltip](https://picocss.com/docs/tooltip)
**About**
- [What’s new in v2?](https://picocss.com/docs/v2)
- [Mission](https://picocss.com/docs/mission)
- [Usage scenarios](https://picocss.com/docs/usage-scenarios)
- [Brand](https://picocss.com/docs/brand)
- [Built With](https://picocss.com/docs/built-with)
## 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](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md).
## Copyright and license
Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).