diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index f6071980..09337663 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -5,18 +5,16 @@ 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/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. +- 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. ## Pull requests Good pull requests, patches, improvements, and new features are a fantastic help. -**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). +**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). -[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`. +[`dev`](https://github.com/picocss/pico/tree/dev) branch is open to pull requests. -[`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 +**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 diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 4dad779b..6cabc57b 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/categories/help + url: https://github.com/picocss/pico/discussions/discussions/new?category=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/categories/ideas + url: https://github.com/picocss/pico/discussions/discussions/new?category=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 deleted file mode 100644 index 9d7fd7a3..00000000 --- a/.github/logo-dark.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.github/logo-light.svg b/.github/logo.svg similarity index 94% rename from .github/logo-light.svg rename to .github/logo.svg index e5d38f92..6d1d4b1f 100644 --- a/.github/logo-light.svg +++ b/.github/logo.svg @@ -1,10 +1,17 @@ - +

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

+ Minimal CSS Framework for semantic HTML +

-## Minimal CSS Framework for Semantic HTML +

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

-A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. +

+ Documentation +

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

Hello world!

-
- - -``` +Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)). -## Class-less version - -Pico provides a `.classless` version. - -In this version, `
`, `
`, and `