diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 09337663..f6071980 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -5,16 +5,18 @@ Thanks for your interest in contributing to Pico CSS! Please take a moment to re ## Bug reports The [issue tracker]((https://github.com/picocss/pico/issues)) is the preferred channel for bug reports, but please respect the following restrictions: -- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/new?category=help) instead. -- Please do not use the issue tracker for feature requests. [Suggest any ideas you have using our discussion forums](https://github.com/picocss/pico/discussions/new?category=ideas) instead. +- Please do not use the issue tracker for personal support requests. [Open a question in our discussion forums](https://github.com/picocss/pico/discussions/categories/help) instead. +- Please do not use the issue tracker for feature requests. Instead, use our discussion forums to [suggest any ideas](https://github.com/picocss/pico/discussions/categories/ideas) you have. ## Pull requests Good pull requests, patches, improvements, and new features are a fantastic help. -**Please ask first before starting work on any significant new features.** -We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/new?category=ideas). +**Please ask before starting work on any significant new features.** +We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas). -[`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests. +[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`. -**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `npm run build`. \ No newline at end of file +[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`. + +**Do not edit [`/css`](https://github.com/picocss/pico/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/picocss/pico/tree/master/scss), then recompile the [`/css`](https://github.com/picocss/pico/tree/master/css) files with `yarn build`. \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 6cabc57b..4dad779b 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,8 +1,8 @@ blank_issues_enabled: false contact_links: - name: Get Help - url: https://github.com/picocss/pico/discussions/discussions/new?category=help + url: https://github.com/picocss/pico/discussions/categories/help about: If you can't get something to work the way you expect, open a question in our discussion forums. - name: Feature Request - url: https://github.com/picocss/pico/discussions/discussions/new?category=ideas + url: https://github.com/picocss/pico/discussions/categories/ideas about: Suggest any ideas you have using our discussion forums. \ No newline at end of file diff --git a/.github/logo-dark.svg b/.github/logo-dark.svg new file mode 100644 index 00000000..9d7fd7a3 --- /dev/null +++ b/.github/logo-dark.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.github/logo.svg b/.github/logo-light.svg similarity index 94% rename from .github/logo.svg rename to .github/logo-light.svg index 6d1d4b1f..e5d38f92 100644 --- a/.github/logo.svg +++ b/.github/logo-light.svg @@ -1,17 +1,10 @@ - +

- - +

+ + + + + Pico CSS +

-

- Minimal CSS Framework for semantic HTML -

+[![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) +[![X (formerly Twitter)](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://x.com/picocss) -

- Pico CSS is a minimalist and lightweight starter kit that prioritizes semantic HTML, making every HTML tag responsive and elegant by default. -

+## Minimal CSS Framework for Semantic HTML -

- Documentation -

+A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. -# Pico.css +Write HTML, Add Pico CSS, and Voilà! -**Class-light and semantic** -Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico. +## What’s new in v2? -**Great styles with just one CSS file** -No dependencies, package manager, external files, or JavaScript. +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. -**Responsive everything** -Elegant and consistent adaptive spacings and typography on all devices. +[Read more](https://picocss.com/docs/v2) -**Light or Dark mode** -Shipped with two beautiful color themes, automatically enabled according to the user preference. +## A Superpowered HTML Reset -# Table of contents +With just the right amount of everything, Pico is great starting point for a clean and lightweight design system. -- [Usage](#usage) +- 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) @@ -40,52 +46,83 @@ Shipped with two beautiful color themes, automatically enabled according to the - [Contributing](#contributing) - [Copyright and license](#copyright-and-license) -# Usage +## Quick start There are 4 ways to get started with pico.css: -**Install manually** +### Install manually -[Download Pico](https://github.com/picocss/pico/archive/refs/heads/v2.zip) and link `/css/pico.min.css` in the `` of your website. +[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `` of your website. ```html - + ``` -**Install from CDN** +### 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** +### Install with NPM ```shell -npm install @picocss/pico@next +npm install @picocss/pico ``` +Or + ```shell -yarn add @picocss/pico@next +yarn add @picocss/pico ``` -**Install with Composer** +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 ``` -# Class-less version +### Starter HTML template -Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)). +```HTML + + + + + + + + Hello world! + + +
+

Hello world!

+
+ + +``` -In this version, `header`, `main` and `footer` act as containers. +## Class-less version + +Pico provides a `.classless` version. + +In this version, `
`, `
`, and `