mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-24 10:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions
picocss/README.md

254 lines
8.5 KiB
Markdown
Raw Normal View History

docs: update README
2024-02-11 12:08:13 +07:00
<p>
<a href="https://picocss.com" target="_blank">
<picture>
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-light.svg">
<img alt="Pico CSS" src="https://raw.githubusercontent.com/Yohn/PicoCSS/HEAD/.github/logo-light.svg" width="auto" height="60">
docs: update README
2024-02-11 12:08:13 +07:00
</picture>
</a>
</p>
Create README
2019-12-09 15:14:26 +07:00
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
[![Github release](https://img.shields.io/github/v/release/Yohn/PicoCSS?color=0172ad&logo=github&logoColor=white)](https://github.com/Yohn/PicoCSS/releases/latest)
[![npm version](https://img.shields.io/npm/v/@yohns/picocss?color=0172ad)](https://www.npmjs.com/package/@yohns/picocss)
[![License](https://img.shields.io/badge/license-MIT-%230172ad)](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md)
docs: update README
2024-02-11 13:23:54 +07:00
[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
V. 2.1.0 - Yohns Fork
2024-11-27 00:38:59 -05:00
## Yohns Updated Version
I'm not sure if the original [Pico CSS](https://github.com/picocss/pico) repository is abandoned or not, but I really liked what they had to offer, and wanted to help not let this awesomely simple and easy to use front end framework disappear, so I merged as many of open pull requests that fixed some issues, and / or enhanced the project that were available at the time. I'll try to help keep it viable and do some bug fixes if any arise, and would alway appreciate anyone elses help to continue keeping this alive!
You can see the new features I, and many others have created pull requests for by going to [Yohns Pico CSS](https://yohn.github.io/PicoCSS). This page just has the demos of most of the features I have merged, or added to the project.
docs: update README
2024-02-11 11:45:39 +07:00
## Minimal CSS Framework for Semantic HTML
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default.
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
Write HTML, Add Pico CSS, and Voilà!
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 12:36:32 +07:00
## What’s new in v2?
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.
[Read more](https://picocss.com/docs/v2)
docs: update README
2024-02-11 11:45:39 +07:00
## A Superpowered HTML Reset
fix: README header spacing Fixed the extra spacing for one of the headers. Previously, it had two spaces above and 0 below which was inconsistent with other headers. Also it made my formatter angry.
2024-02-25 02:28:26 -08:00
docs: update README
2024-02-11 11:45:39 +07:00
With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
Add precompiled CSS variations
2020-10-27 11:22:03 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
- Class-light and Semantic
- Great Styles with Just CSS
- Responsive Everything
- Light or Dark Mode
- Easy Customization
- Optimized Performance
Add examples
2020-09-25 09:48:13 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
## Table of contents
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
V. 2.1.0 - Yohns Fork
2024-11-27 00:38:59 -05:00
1. [Yohns Updated Version](#yohns-updated-version)
2. [Minimal CSS Framework for Semantic HTML](#minimal-css-framework-for-semantic-html)
3. [What’s new in v2?](#whats-new-in-v2)
4. [A Superpowered HTML Reset](#a-superpowered-html-reset)
5. [Table of contents](#table-of-contents)
6. [Quick start](#quick-start)
1. [Install manually](#install-manually)
2. [Usage from CDN](#usage-from-cdn)
3. [Install with NPM](#install-with-npm)
4. [Starter HTML template](#starter-html-template)
7. [Class-less version](#class-less-version)
8. [Limitations](#limitations)
9. [Documentation](#documentation)
10. [Browser Support](#browser-support)
11. [Contributing](#contributing)
12. [Copyright and license](#copyright-and-license)
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
## Quick start
Create README
2019-12-09 15:14:26 +07:00
added composer.json, added instructions in README.md
2022-01-26 11:21:35 +01:00
There are 4 ways to get started with pico.css:
Update NPM and add unpkg CDN
2019-12-11 15:07:21 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
### Install manually
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
[Download Pico](https://github.com/Yohn/PicoCSS/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
Create README
2019-12-09 15:14:26 +07:00
Update version
2019-12-11 09:13:13 +07:00
```html
chore: update README
2023-04-10 11:59:32 +07:00
<link rel="stylesheet" href="css/pico.min.css" />
Update version
2019-12-11 09:13:13 +07:00
```
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
### Usage from CDN
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
Update NPM and add unpkg CDN
2019-12-11 15:07:21 +07:00
```html
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.min.css" />
Update NPM and add unpkg CDN
2019-12-11 15:07:21 +07:00
```
docs: update README
2024-02-11 11:45:39 +07:00
### Install with NPM
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
Update NPM and add unpkg CDN
2019-12-11 15:07:21 +07:00
```shell
V. 2.1.0 - Yohns Fork
2024-11-27 00:38:59 -05:00
npm i @yohns/picocss
chore: update README
2023-04-10 11:59:32 +07:00
```
V. 2.1.0 - Yohns Fork
2024-11-27 00:38:59 -05:00
<!--
docs: update README
2024-02-11 11:45:39 +07:00
Or
chore: update README
2023-04-10 11:59:32 +07:00
```shell
docs: update README
2024-02-11 11:45:39 +07:00
yarn add @picocss/pico
V. 2.1.0 - Yohns Fork
2024-11-27 00:38:59 -05:00
```-->
Update NPM and add unpkg CDN
2019-12-11 15:07:21 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
Then, import Pico into your SCSS file with [@use](https://sass-lang.com/documentation/at-rules/use):
```SCSS
@use "pico";
```
V. 2.1.0 - Yohns Fork
2024-11-27 00:38:59 -05:00
<!--### Install with Composer
added composer.json, added instructions in README.md
2022-01-26 11:21:35 +01:00
```shell
composer require picocss/pico
V. 2.1.0 - Yohns Fork
2024-11-27 00:38:59 -05:00
```-->
added composer.json, added instructions in README.md
2022-01-26 11:21:35 +01:00
docs: update README
2024-02-11 11:45:39 +07:00
### Starter HTML template
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
```HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark" />
<link rel="stylesheet" href="css/pico.min.css">
<title>Hello world!</title>
</head>
<body>
<main class="container">
<h1>Hello world!</h1>
</main>
</body>
</html>
```
## Class-less version
Small fixes - @mixin and @include for dark scheme - unset `--font-weight` in `hgroup`
2021-07-03 00:22:17 +07:00
docs: update README
2024-02-11 11:52:40 +07:00
Pico provides a `.classless` version.
docs: update README
2024-02-11 11:45:39 +07:00
In this version, `<header>`, `<main>`, and `<footer>` inside `<body>` act as containers to define a centered or a fluid viewport.
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
Minor Release (v1.3.1)
2021-07-10 10:58:06 +07:00
Use the default `.classless` version if you need centered viewports:
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
```html
feat: update README
2024-01-28 20:14:56 +07:00
<link
rel="stylesheet"
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.classless.min.css"
feat: update README
2024-01-28 20:14:56 +07:00
/>
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
```
Or use the `.fluid.classless` version if you need a fluid container:
```html
chore: update README
2023-04-10 11:59:32 +07:00
<link
rel="stylesheet"
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.fluid.classless.min.css"
chore: update README
2023-04-10 11:59:32 +07:00
/>
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
```
Then just write pure HTML, and it should look great:
```html
feat: update README
2024-01-28 20:14:56 +07:00
<!doctype html>
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
<html lang="en">
<head>
chore: update README
2023-04-10 11:59:32 +07:00
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
feat: update README
2024-01-28 20:14:56 +07:00
<meta name="color-scheme" content="light dark" />
chore: update README
2023-04-10 11:59:32 +07:00
<link
rel="stylesheet"
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.1.3/css/pico.classless.min.css"
chore: update README
2023-04-10 11:59:32 +07:00
/>
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
<title>Hello, world!</title>
</head>
<body>
<main>
<h1>Hello, world!</h1>
</main>
</body>
</html>
```
docs: update README
2024-02-11 11:45:39 +07:00
## Limitations
Pico CSS 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.
Update examples
2020-10-01 13:33:05 +07:00
docs: update README
2024-02-11 12:36:32 +07:00
[Read more](https://picocss.com/docs/usage-scenarios)
docs: Update readme
2022-09-13 08:48:30 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
## Documentation
Add examples
2020-09-25 09:48:13 +07:00
chore: update README
2023-04-10 11:59:32 +07:00
**Getting started**
Update examples
2020-10-01 13:33:05 +07:00
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
- [Yohns Pico CSS Additions](https://yohn.github.io/PicoCSS/)
docs: update README
2024-02-11 11:45:39 +07:00
- [Quick start](https://picocss.com/docs)
- [Version picker `New`](https://picocss.com/docs/version-picker)
- [Color schemes](https://picocss.com/docs/color-schemes)
- [Class-less version](https://picocss.com/docs/classless)
- [Conditional styling `New`](https://picocss.com/docs/conditional)
- [RTL](https://picocss.com/docs/rtl)
Add examples
2020-09-25 09:48:13 +07:00
chore: update README
2023-04-10 11:59:32 +07:00
**Customization**
Add examples
2020-09-25 09:48:13 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
- [CSS Variables](https://picocss.com/docs/css-variables)
- [Sass](https://picocss.com/docs/sass)
- [Colors `New`](https://picocss.com/docs/colors)
Add examples
2020-09-25 09:48:13 +07:00
chore: update README
2023-04-10 11:59:32 +07:00
**Layout**
Add examples
2020-08-08 11:03:00 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
- [Container](https://picocss.com/docs/container)
- [Landmarks & section](https://picocss.com/docs/landmarks-section)
- [Grid](https://picocss.com/docs/grid)
- [Overflow auto `New`](https://picocss.com/docs/overflow-auto)
Create README
2019-12-09 15:14:26 +07:00
chore: update README
2023-04-10 11:59:32 +07:00
**Content**
Add Limitations
2022-01-01 15:36:42 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
- [Typography](https://picocss.com/docs/typography)
- [Link](https://picocss.com/docs/link)
- [Button](https://picocss.com/docs/button)
- [Table](https://picocss.com/docs/table)
Add Limitations
2022-01-01 15:36:42 +07:00
chore: update README
2023-04-10 11:59:32 +07:00
**Forms**
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
- [Overview](https://picocss.com/docs/forms)
- [Input](https://picocss.com/docs/forms/input)
- [Textarea](https://picocss.com/docs/forms/textarea)
- [Select](https://picocss.com/docs/forms/select)
- [Checkboxes](https://picocss.com/docs/forms/checkboxes)
- [Radios](https://picocss.com/docs/forms/radios)
- [Switch](https://picocss.com/docs/forms/switch)
- [Range](https://picocss.com/docs/forms/range)
Create README
2019-12-09 15:14:26 +07:00
chore: update README
2023-04-10 11:59:32 +07:00
**Components**
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
- [Accordion](https://picocss.com/docs/accordion)
- [Card](https://picocss.com/docs/card)
- [Dropdown](https://picocss.com/docs/dropdown)
- [Group `New`](https://picocss.com/docs/group)
- [Loading](https://picocss.com/docs/loading)
- [Modal](https://picocss.com/docs/modal)
- [Nav](https://picocss.com/docs/nav)
- [Progress](https://picocss.com/docs/progress)
- [Tooltip](https://picocss.com/docs/tooltip)
Highlighting of the classless version + code cleaning
2021-07-02 23:04:17 +07:00
chore: update README
2023-04-10 11:59:32 +07:00
**About**
Create README
2019-12-09 15:14:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
- [What’s new in v2?](https://picocss.com/docs/v2)
- [Mission](https://picocss.com/docs/mission)
- [Usage scenarios](https://picocss.com/docs/usage-scenarios)
- [Brand](https://picocss.com/docs/brand)
- [Built With](https://picocss.com/docs/built-with)
Update README.md
2022-03-13 15:33:26 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
## Browser Support
Add precompiled CSS variations
2020-10-27 11:22:03 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
Pico CSS 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.
Update README.md
2022-03-13 15:34:45 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
## Contributing
Add contributing
2020-10-27 11:28:08 +07:00
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/Yohn/PicoCSS/blob/master/.github/CONTRIBUTING.md).
Add contributing
2020-10-27 11:28:08 +07:00
docs: update README
2024-02-11 11:45:39 +07:00
## Copyright and license
Update copyright and license
2021-07-24 12:24:33 +07:00
Changed spacing on form elements to be a tad smaller. It was just too big for my liking, and I feel this way is a lot easier. Added cursor back on button - it was just an arrow. Added parent-selector to the notifications, and corrected readbility of notifications. updated the version within the css files made rows only show up on css files where classes are enabled made the tooltips have a dark background - even for dark themes.
2024-12-07 19:56:51 -05:00
Licensed under the [MIT License](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md).
Reference in a new issue Copy permalink