diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index f6071980..01f5dd34 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -4,19 +4,19 @@ 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: +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 feature requests. [Suggest any ideas you have using our discussion forums](https://github.com/picocss/pico/discussions/categories/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.** +**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/categories/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 `npm run build`. -**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 [`/docs/*.html`](https://github.com/picocss/pico/tree/master/docs) files directly. Edit the source files in [`/docs/src`](https://github.com/picocss/pico/tree/master/docs/src), then recompile the docs files with `npm run build`. diff --git a/.github/examples.jpg b/.github/examples.jpg new file mode 100644 index 00000000..240c0349 Binary files /dev/null and b/.github/examples.jpg differ 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-light.svg deleted file mode 100644 index e5d38f92..00000000 --- a/.github/logo-light.svg +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/.github/logo.svg b/.github/logo.svg new file mode 100644 index 00000000..5d47017a --- /dev/null +++ b/.github/logo.svg @@ -0,0 +1 @@ + diff --git a/.gitignore b/.gitignore index b5ce3fa4..bde7d4c5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,32 +1,5 @@ -# OS or Editor folders -._* -.cache -.DS_Store -.idea -.project -.settings -.tmproj -*.esproj -*.sublime-project -*.sublime-workspace -nbproject -Thumbs.db -/.vscode/ - -# Numerous always-ignore extensions -*.diff -*.err -*.log -*.orig -*.rej -*.swo -*.swp -*.vi -*.zip -*~ - -# Folders to ignore -/node_modules/ - -# Pico -.pico +node_modules/ +tests/ +.nvmrc +.prettierrc.js +*.DS_Store diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index de753c53..00000000 --- a/.prettierrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "printWidth": 100 -} diff --git a/LICENSE.md b/LICENSE.md index 94af9b15..275ca7e9 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019-2024 Pico +Copyright (c) 2019-2023 Pico Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 18323435..39c20235 100644 --- a/README.md +++ b/README.md @@ -1,127 +1,99 @@ -

- - - - - 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) +

Pico CSS

-## Minimal CSS Framework for Semantic HTML +

+ Minimal CSS Framework for semantic HTML
+ Elegant styles for all native HTML elements without .classes and dark mode automatically enabled.

+ Examples · + 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à! +[![Standard gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Standard%20CSS)](https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css) +[![Classless gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.classless.min.css?compression=gzip&color=1095c1&label=Classless%20CSS)](https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css) +[![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest) +[![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico) +[![License](https://img.shields.io/badge/license-MIT-%231095c1)](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) -## What’s new in v2? +https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4 -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. +**Class-light and semantic** +Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico. -[Read more](https://picocss.com/docs/v2) +**Great styles with just one CSS file** +No dependencies, package manager, external files, or JavaScript. -## A Superpowered HTML Reset +**Responsive everything** +Elegant and consistent adaptive spacings and typography on all devices. -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 +**Light or Dark mode** +Shipped with two beautiful color themes, automatically enabled according to the user preference. ## Table of contents -- [Quick start](#quick-start) +- [Usage](#usage) - [Class-less version](#class-less-version) +- [Examples](#examples) - [Limitations](#limitations) - [Documentation](#documentation) - [Browser Support](#browser-support) - [Contributing](#contributing) - [Copyright and license](#copyright-and-license) -## Quick start +## Usage -There are 4 ways to get started with pico.css: +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/v1-dev.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 ``` -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 +**Install with Composer** ```shell composer require picocss/pico ``` -### Starter HTML template - -```HTML - - - - - - - - Hello world! - - -
-

Hello world!

-
- - -``` - ## Class-less version -Pico provides a `.classless` version. +Pico provides a `.classless` version ([example](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)). -In this version, `
`, `
`, and `