diff --git a/.github/logo.svg b/.github/logo.svg new file mode 100644 index 00000000..6d1d4b1f --- /dev/null +++ b/.github/logo.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index cfb1f79a..6776df7e 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,33 @@ -

+ + +

- +

-

Pico.css

-

- 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 -[![Standard gzipped CSS](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=Standard%20CSS)](https://unpkg.com/@picocss/pico@latest/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://unpkg.com/@picocss/pico@latest/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) +

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

-https://user-images.githubusercontent.com/23470684/126863110-94061cf1-36ea-4697-94bd-2e1071a95a2f.mp4 +

+ Documentation +

+ +# Pico.css **Class-light and semantic** Pico uses simple native HTML tags as much as possible. Less than 10 .classes are used in Pico. @@ -35,18 +41,17 @@ Elegant and consistent adaptive spacings and typography on all devices. **Light or Dark mode** Shipped with two beautiful color themes, automatically enabled according to the user preference. -## Table of contents +# Table of contents - [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) -## Usage +# Usage There are 4 ways to get started with pico.css: @@ -55,7 +60,7 @@ There are 4 ways to get started with pico.css: [Download Pico](https://github.com/picocss/pico/archive/refs/heads/master.zip) and link `/css/pico.min.css` in the `` of your website. ```html - + ``` **Install from CDN** @@ -63,13 +68,17 @@ There are 4 ways to get started with pico.css: Alternatively, you can use [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css. ```html - + ``` **Install with NPM** ```shell -npm install @picocss/pico +npm install @picocss/pico@next +``` + +```shell +yarn add @picocss/pico@next ``` **Install with Composer** @@ -78,7 +87,7 @@ npm install @picocss/pico composer require picocss/pico ``` -## Class-less version +# Class-less version Pico provides a `.classless` version ([example](https://picocss.com/examples/classless)). @@ -87,24 +96,30 @@ In this version, `header`, `main` and `footer` act as containers. Use the default `.classless` version if you need centered viewports: ```html - + ``` Or use the `.fluid.classless` version if you need a fluid container: ```html - + ``` Then just write pure HTML, and it should look great: ```html - + - - - + + + Hello, world! @@ -115,93 +130,78 @@ Then just write pure HTML, and it should look great: ``` -## Examples - -Minimalist templates to discover Pico in action: - -[![Examples](https://picocss.com/img/examples.jpg?v1.3.3)](https://picocss.com/#examples) - -- **[Preview](https://picocss.com/examples/preview/)** - A starter example with all elements and components used in Pico - -- **[Right-to-left (RTL) preview](https://picocss.com/examples/preview-rtl/)** -A starter example in Arabic with all the elements and components used in Pico - -- **[Class-less](https://picocss.com/examples/classless/)** - Just a pure semantic HTML markup, without `.classes` - -- **[Basic template](https://picocss.com/examples/basic-template/)** - A basic custom template for Pico using only CSS custom properties (variables) - -- **[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 - -- **[Pico + Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)** - Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico - -All examples are open-sourced in [picocss/examples](https://github.com/picocss/examples). - -## Limitations +# Limitations Pico can be used without custom CSS for quick or small projects. However, it’s designed as a starting point, like a “reset CSS on steroids”. As Pico does not integrate any helpers or utilities `.classes`, this minimal CSS framework requires SCSS or CSS knowledge to build large projects. -## Documentation +# Documentation **Getting started** -- [Usage](https://picocss.com/docs/) -- [Themes](https://picocss.com/docs/themes.html) -- [Customization](https://picocss.com/docs/customization.html) -- [Class-less version](https://picocss.com/docs/classless.html) -- [RTL](https://picocss.com/docs/rtl.html) + +- [Quick start](https://v2.picocss.com/docs) +- [Color schemes](https://v2.picocss.com/docs/color-schemes) +- [Class-less version](https://v2.picocss.com/docs/classless) +- [RTL](https://v2.picocss.com/docs/rtl) + +**Customization** + +- [CSS Variables](https://v2.picocss.com/docs/css-variables) +- [Theme generator](https://v2.picocss.com/docs/theme-generator) +- [Sass](https://v2.picocss.com/docs/sass) +- [Colors New](https://v2.picocss.com/docs/colors) **Layout** -- [Containers](https://picocss.com/docs/containers.html) -- [Grids](https://picocss.com/docs/grid.html) -- [Horizontal scroller](https://picocss.com/docs/scroller.html) -**Elements** -- [Typography](https://picocss.com/docs/typography.html) -- [Buttons](https://picocss.com/docs/buttons.html) -- [Forms](https://picocss.com/docs/forms.html) -- [Tables](https://picocss.com/docs/tables.html) +- [Container](https://v2.picocss.com/docs/container) +- [Landmarks & section](https://v2.picocss.com/docs/landmarks-section) +- [Grid](https://v2.picocss.com/docs/grid) +- [Horizontal scroller](https://v2.picocss.com/docs/scroller) + +**Content** + +- [Typography](https://v2.picocss.com/docs/typography) +- [Link](https://v2.picocss.com/docs/link) +- [Button](https://v2.picocss.com/docs/button) +- [Table](https://v2.picocss.com/docs/table) + +**Forms** + +- [Overview](https://v2.picocss.com/docs/forms) +- [Input](https://v2.picocss.com/docs/forms/input) +- [Textarea](https://v2.picocss.com/docs/forms/textarea) +- [Select](https://v2.picocss.com/docs/forms/select) +- [Checkboxes](https://v2.picocss.com/docs/forms/checkboxes) +- [Radios](https://v2.picocss.com/docs/forms/radios) +- [Switch](https://v2.picocss.com/docs/forms/switch) +- [Range](https://v2.picocss.com/docs/forms/range) **Components** -- [Accordions](https://picocss.com/docs/accordions.html) -- [Cards](https://picocss.com/docs/cards.html) -- [Dropdowns](https://picocss.com/docs/dropdowns.html) -- [Modal](https://picocss.com/docs/modal.html) -- [Navs](https://picocss.com/docs/navs.html) -- [Progress](https://picocss.com/docs/progress.html) -**Utilities** -- [Loading](https://picocss.com/docs/loading.html) -- [Tooltips](https://picocss.com/docs/tooltips.html) +- [Accordion](https://v2.picocss.com/docs/accordion) +- [Card](https://v2.picocss.com/docs/card) +- [Dropdown](https://v2.picocss.com/docs/dropdown) +- [Group New](https://v2.picocss.com/docs/group) +- [Loading](https://v2.picocss.com/docs/loading) +- [Modal](https://v2.picocss.com/docs/modal) +- [Nav](https://v2.picocss.com/docs/nav) +- [Progress](https://v2.picocss.com/docs/progress) +- [Tooltip](https://v2.picocss.com/docs/tooltip) -## Browser Support +**About** + +- [What’s new in v2?](https://v2.picocss.com/docs/v2) +- [Mission](https://v2.picocss.com/docs/mission) +- [Usage scenarios](https://v2.picocss.com/docs/usage-scenarios) +- [Brand](https://v2.picocss.com/docs/brand) + +# Browser Support Pico is designed and tested for the latest stable Chrome, Firefox, Edge, and Safari releases. It does not support any version of IE, including IE 11. -## Contributing +# Contributing If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/picocss/pico/blob/master/.github/CONTRIBUTING.md). -## Copyright and license +# Copyright and license -Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md). - -**Relevant third-party tools and resources we depend on:** - -Website and docs: -- [TypeIt](https://typeitjs.com/): JavaScript animated typing utility (Licensed [GPL-3.0](https://github.com/alexmacarthur/typeit/blob/master/LICENSE)) -- [Font Awesome](https://fontawesome.com/): Icons (Licensed [CC BY 4.0](https://fontawesome.com/license/free)) - -Pico Library: -- [Feather](https://feathericons.com/) Icons (Licensed [MIT](https://github.com/feathericons/feather/blob/master/LICENSE)) -- [Normalize.css](https://necolas.github.io/normalize.css/): CSS reset (Licensed [MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) -- [Sanitize.css](https://csstools.github.io/sanitize.css/): Cross-browser default styling (Licensed [CC0 1.0 Universal](https://github.com/csstools/sanitize.css/blob/main/LICENSE.md)) +Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md). \ No newline at end of file diff --git a/package.json b/package.json index a6c7c6fb..eddb7cbf 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,9 @@ "type": "git", "url": "git+https://github.com/picocss/pico.git" }, + "publishConfig": { + "tag": "next" + }, "keywords": [ "css", "css-framework",