diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 01f5dd34..f6071980 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. [Suggest any ideas you have using our discussion forums](https://github.com/picocss/pico/discussions/categories/ideas) 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.** +**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`. +[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`. -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`. +**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/examples.jpg b/.github/examples.jpg deleted file mode 100644 index 240c0349..00000000 Binary files a/.github/examples.jpg and /dev/null differ 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-light.svg b/.github/logo-light.svg new file mode 100644 index 00000000..e5d38f92 --- /dev/null +++ b/.github/logo-light.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.github/logo.svg b/.github/logo.svg deleted file mode 100644 index 5d47017a..00000000 --- a/.github/logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/.gitignore b/.gitignore index bde7d4c5..b5ce3fa4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,32 @@ -node_modules/ -tests/ -.nvmrc -.prettierrc.js -*.DS_Store +# 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 diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..de753c53 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "printWidth": 100 +} diff --git a/LICENSE.md b/LICENSE.md index 275ca7e9..94af9b15 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019-2023 Pico +Copyright (c) 2019-2024 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 39c20235..18323435 100644 --- a/README.md +++ b/README.md @@ -1,99 +1,127 @@ -

- - +

+ + + + + Pico CSS +

-

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
- Elegant styles for all native HTML elements without .classes and dark mode automatically enabled.

- Examples · - Documentation -

+## Minimal CSS Framework for Semantic HTML -## Pico CSS +A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. -[![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) +Write HTML, Add Pico CSS, and Voilà! -https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4 +## 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. + +- Class-light and Semantic +- Great Styles with Just CSS +- Responsive Everything +- Light or Dark Mode +- Easy Customization +- Optimized Performance ## Table of contents -- [Usage](#usage) +- [Quick start](#quick-start) - [Class-less version](#class-less-version) -- [Examples](#examples) - [Limitations](#limitations) - [Documentation](#documentation) - [Browser Support](#browser-support) - [Contributing](#contributing) - [Copyright and license](#copyright-and-license) -## Usage +## Quick start -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/v1-dev.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 ``` -**Install with Composer** +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 ([example](https://codesandbox.io/s/github/picocss/examples/tree/master/v1-classless)). +Pico provides a `.classless` version. -In this version, `header`, `main` and `footer` act as containers. +In this version, `
`, `
`, and `