diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 00000000..f6071980 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,22 @@ +# Contributing to Pico + +Thanks for your interest in contributing to Pico CSS! Please take a moment to review this document before submitting a [bug report](https://github.com/picocss/pico/issues) or a [pull request](https://github.com/picocss/pico/pulls). + +## 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. + +## 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). + +[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`. + +[`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/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 00000000..38402ed2 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,21 @@ +--- +name: Bug report +about: Create a bug report if you've already asked for help with a problem and confirmed something is broken with Pico CSS. +--- + +Please search for duplicate or closed issues first. + +## Describe the issue + +### Current Behavior +A concise description of the bug. + +### Expected Behavior +A concise description of what you expected. + +### Reproduction URL +We recommend including a link to a minimal reproduction of the bug using CodePen or a similar tool. +**Please do not link to your actual project.** Instead, we need a reduced test case in a new project without any unnecessary code. + +### Environment +Example: OS, versions, browser details. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000..4dad779b --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,8 @@ +blank_issues_enabled: false +contact_links: + - name: Get 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/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-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/.gitignore b/.gitignore index 9df724b9..b5ce3fa4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,32 @@ -*.DS_Store -TODO.md -prepros-6.config +# 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 26d665a4..94af9b15 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019 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 62015664..18323435 100644 --- a/README.md +++ b/README.md @@ -1,79 +1,238 @@ +

+ + + + + 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 -**Graceful & Minimal CSS design system in pure semantic HTML.** -Elegant styles for all natives HTML elements without `.classes` and dark mode automatically enabled. +A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. -`5.6 KB` minified and gzipped +Write HTML, Add Pico CSS, and Voilà! -- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico. -- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript. -- **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices. -- **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference. +## What’s new in v2? -## Usage +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. -There are 3 ways to get started with pico.css: +[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/v1.0.4.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 -Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css. +### 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 +``` -## Examples +Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use): -- [**Class-less**](https://picocss.com/examples/classless/): Just a pure semantic HTML markup, without `.classes` -- [**Company**](https://picocss.com/examples/company/): A classic company or blog layout with a sidebar. -- [**Google Amp**](https://picocss.com/examples/google-amp/): A simple layout for Google Amp, with inlined CSS. -- [**Sign in**](https://picocss.com/examples/sign-in/): A minimalist layout for Login pages. +```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 `