Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged PR, removed SCSS warnings, added rows, columns, :user-valid, labels to groups and more #638

Open
wants to merge 66 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
66 commits
Select commit Hold shift + click to select a range
dada435
Add date to list of excluded input types.
y2kbugger Apr 23, 2024
0810f1e
fix: Card in modal does not use modal styling
Zurga Apr 26, 2024
455339f
Allow use of card component with `role="article"`
lukas-kasticky May 25, 2024
72e4699
fix: don't count hidden rows in table stripes
feored Aug 3, 2024
6fabc27
Update _tooltip.scss
panda-madness Aug 6, 2024
c3bcecb
refactor: move nested declarations after non-nested declarations
nstringham Aug 18, 2024
f516207
chore: build
nstringham Aug 18, 2024
dc7f6d0
Fix several typos throughout the project
preist Sep 27, 2024
6f3abc2
Fix details inside drop-down being rendered as dropdown
mwargan Sep 28, 2024
b3a731b
Update _loading.scss not to affect form elements itself
coezbek Oct 31, 2024
c77d19e
Merge pull request #5 from nstringham/mixed-sass-declarations
Yohn Nov 10, 2024
93d9675
Merge pull request #10 from Zurga/fix/modal_with_card
Yohn Nov 10, 2024
de9b7d4
Merge pull request #9 from y2kbugger/main
Yohn Nov 10, 2024
2fc4ad2
Merge pull request #7 from feored/fix-striped-table
Yohn Nov 10, 2024
9ef9bfe
Merge pull request #3 from coezbek/main
Yohn Nov 10, 2024
bdf50fe
Merge pull request #2 from preist/fix-typos
Yohn Nov 10, 2024
e1348d0
Merge pull request #4 from mwargan/patch-1
Yohn Nov 10, 2024
fe62017
Merge pull request #8 from panda-madness/patch-1
Yohn Nov 10, 2024
9617cb1
Merge branch 'main' into pr/Yohn/6
Yohn Nov 10, 2024
4825b26
closes Yohn/PicoCSS/pull/1 and Yohn/PicoCSS/pull/11
Yohn Nov 10, 2024
a085c20
surpressimg sass warnings
Yohn Nov 10, 2024
2c8e70a
Merge pull request #13 from Yohn/Surpressing-sass-warnings
Yohn Nov 10, 2024
84ed38e
Added Notifications 12
Yohn Nov 10, 2024
fe78285
Finally stopped all the sass compile warnings, changed the tab-size t…
Yohn Nov 10, 2024
b1fcd44
Added <label> compatibility to groups
Yohn Nov 12, 2024
26e82a6
Created build-dev script to only build 1 css file for quicker testing…
Yohn Nov 12, 2024
359e51e
Added a Timeline feature, removed the margin-bottom from `article > h…
Yohn Nov 12, 2024
7602474
Added form validation
Yohn Nov 13, 2024
b611b52
Got the file validation and previewer lines up nicer
Yohn Nov 13, 2024
42b62b1
V. 2.1.0 - Yohns Fork
Yohn Nov 27, 2024
68a9fb9
Update css urls
Yohn Nov 27, 2024
fdf5c83
Enabled multiline tooltips, and disabled dotted lines for tooltips wh…
Yohn Nov 30, 2024
02c9fb6
Support web components/shadow DOM.
rcoup Dec 2, 2024
a8bbc68
Merge pull request #15 from lukas-kasticky:dev
Yohn Dec 3, 2024
5d2e82d
Merge pull request #16 from rcoup/web-components-host
Yohn Dec 3, 2024
7f28ea0
Updated Docs
Yohn Dec 3, 2024
137d6bf
Remove pointer cursor #14
Yohn Dec 3, 2024
7ce5b5c
rebuilt css files, For some reason was having issues with the line en…
Yohn Dec 3, 2024
3548875
Changed spacing on form elements to be a tad smaller. It was just too…
Yohn Dec 8, 2024
8b6c0ef
Update README.md
Yohn Dec 10, 2024
a937be4
Update README.md
Yohn Dec 10, 2024
f25840f
- Updated form validation to not validate when form[novalidate]
Yohn Dec 10, 2024
bfdf6db
Update index.html
Yohn Dec 10, 2024
5e37f38
Support RTL for group component border radius styles
remohammadi Dec 11, 2024
6359082
Add RTL support for Accordion Marker
remohammadi Dec 11, 2024
828d1f3
Merge pull request #18 from remohammadi/main
Yohn Dec 12, 2024
b7100d2
Merged RTL pull request into css files, and updated docs for hamburge…
Yohn Dec 13, 2024
8a7b25a
Improved visibility of loading icon in light mode on contrast backgro…
Yohn Dec 13, 2024
64373c2
RTL Dropdown Nav corrected thanks to @64bitint
Yohn Dec 14, 2024
0104f7d
tweaks to safari bug with nav dropdowns
Yohn Dec 14, 2024
9faf591
sass is removing the "\200B" value and leaving it blank? I put a spac…
Yohn Dec 14, 2024
27ccea2
sass compiler was removing the value: "\200B" for the :where(navs li).
Yohn Dec 14, 2024
130b1cd
Final iOS 18.2 bug fix for [dir=rtl] dropdowns
Yohn Dec 14, 2024
a6325b8
corrected dropdown arrow colors for secondary, contrast, and primary.…
Yohn Dec 15, 2024
3cfdc97
Corrected Dropdown > Submenu formatting and alignment
Yohn Dec 15, 2024
dbd9c5a
Cards keep style with form tag wrapped around header and footer in ar…
Yohn Dec 15, 2024
e0abc58
Version 2.2.1
Yohn Dec 21, 2024
cd0d303
Update CDN CSS url to use 2.2.1
Yohn Dec 21, 2024
3c52bb3
Removed unused docs and docs/js files
Yohn Dec 22, 2024
b801937
Create node.js.yml
Yohn Dec 22, 2024
8be4490
Update and rename .github/workflows/node.js.yml to .github/auto-build…
Yohn Dec 22, 2024
03188f3
Create GitHub Action to BuildCSS.yml
Yohn Dec 23, 2024
b83c181
Build CSS
github-actions[bot] Dec 23, 2024
e30f662
Create FUNDING.yml
Yohn Dec 23, 2024
a5ebfad
Build CSS
github-actions[bot] Dec 23, 2024
324f6fc
Update BuildCSS.yml
Yohn Dec 23, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
33 changes: 33 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

# JavaScript and JSON files
[*.{js,json}]
indent_size = 2

# SCSS files
[*.scss]
indent_size = 2

# Markdown files
[*.md]
trim_trailing_whitespace = false

# Package files
[package.json]
indent_size = 2

# Config files
[*.{yml,yaml}]
indent_size = 2
16 changes: 8 additions & 8 deletions .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,22 +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).
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/Yohn/PicoCSS/issues) or a [pull request](https://github.com/Yohn/PicoCSS/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.
The [issue tracker]((https://github.com/Yohn/PicoCSS/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/Yohn/PicoCSS/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/Yohn/PicoCSS/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).
We recommend that you first [suggest your feature idea in our discussion forums](https://github.com/Yohn/PicoCSS/discussions/categories/ideas).

[`dev`](https://github.com/picocss/pico/tree/dev) branch is open for pull requests on `v2`.
[`dev`](https://github.com/Yohn/PicoCSS/tree/dev) branch is open for pull requests on `v3`.

[`v1-dev`](https://github.com/picocss/pico/tree/v1-dev) branch is open to pull requests on `v1`.
[`main`](https://github.com/Yohn/PicoCSS/tree/main) branch is open to 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 `yarn build`.
**Do not edit [`/css`](https://github.com/Yohn/PicoCSS/tree/master/css) files directly.** Edit the source files in [`/scss`](https://github.com/Yohn/PicoCSS/tree/master/scss), then recompile the [`/css`](https://github.com/Yohn/PicoCSS/tree/master/css) files with `npm run build`.
15 changes: 15 additions & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# These are supported funding model platforms

github: [Yohn] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
#patreon: # Replace with a single Patreon username
#open_collective: # Replace with a single Open Collective username
#ko_fi: # Replace with a single Ko-fi username
#tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
#community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
#liberapay: # Replace with a single Liberapay username
#issuehunt: # Replace with a single IssueHunt username
#lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
#polar: # Replace with a single Polar username
#buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
#thanks_dev: # Replace with a single thanks.dev username
custom: ['http://cash.me/$yohnjohn84'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
6 changes: 3 additions & 3 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
blank_issues_enabled: false
contact_links:
- name: Get Help
url: https://github.com/picocss/pico/discussions/categories/help
url: https://github.com/Yohn/PicoCSS/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.
url: https://github.com/Yohn/PicoCSS/discussions/categories/ideas
about: Suggest any ideas you have using our discussion forums.
1 change: 1 addition & 0 deletions .github/auto-build-maybe.yml.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

45 changes: 45 additions & 0 deletions .github/workflows/BuildCSS.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
name: Build CSS

on:
push:
branches:
- main
paths:
- 'scss/**'
pull_request:
branches:
- main
paths:
- 'scss/**'

jobs:
build:
runs-on: ubuntu-latest

permissions:
contents: write

steps:
- name: Checkout repository
uses: actions/checkout@v2

- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '20'

- name: Install dependencies
run: npm install

- name: Build CSS
run: npm run build

- name: Commit and push changes
run: |
git config --global user.name 'github-actions[bot]'
git config --global user.email 'github-actions[bot]@users.noreply.github.com'
git add .
git commit -m 'Build CSS'
git push
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,8 @@ Thumbs.db

# Pico
.pico
package-lock.json
/docs/orig
/scss/components/_offcanvas.scss
docs/js/DialogManager.js
docs/modal.html
2 changes: 1 addition & 1 deletion .node-version
Original file line number Diff line number Diff line change
@@ -1 +1 @@
18.19.0
20
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
18.19.0
20
69 changes: 42 additions & 27 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
<p>
<a href="https://picocss.com" target="_blank">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
<img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
<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">
</picture>
</a>
</p>

[![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)
[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss)
[![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)
<!-- [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/picocss.svg?style=social&label=Follow%20%40picocss)](https://twitter.com/picocss) -->

## 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.

## Minimal CSS Framework for Semantic HTML

Expand All @@ -38,57 +43,66 @@ With just the right amount of everything, Pico is great starting point for a cle

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

## Quick start

There are 4 ways to get started with pico.css:

### Install manually

[Download Pico](https://github.com/picocss/pico/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.
[Download Pico](https://github.com/Yohn/PicoCSS/archive/refs/heads/main.zip) and link `/css/pico.min.css` in the `<head>` of your website.

```html
<link rel="stylesheet" href="css/pico.min.css" />
```

### Usage from CDN

Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@picocss/pico) to link pico.css.
Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/[email protected]/css/pico.min.css" />
```

### Install with NPM

```shell
npm install @picocss/pico
npm i @yohns/picocss
```

<!--
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

Expand Down Expand Up @@ -121,7 +135,7 @@ Use the default `.classless` version if you need centered viewports:
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected]/css/pico.classless.min.css"
/>
```

Expand All @@ -130,7 +144,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
```html
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected]/css/pico.fluid.classless.min.css"
/>
```

Expand All @@ -145,7 +159,7 @@ Then just write pure HTML, and it should look great:
<meta name="color-scheme" content="light dark" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
href="https://cdn.jsdelivr.net/npm/@yohns/[email protected]/css/pico.classless.min.css"
/>
<title>Hello, world!</title>
</head>
Expand All @@ -167,6 +181,7 @@ Pico CSS can be used without custom CSS for quick or small projects. However, it

**Getting started**

- [Yohns Pico CSS Additions](https://yohn.github.io/PicoCSS/)
- [Quick start](https://picocss.com/docs)
- [Version picker `New`](https://picocss.com/docs/version-picker)
- [Color schemes](https://picocss.com/docs/color-schemes)
Expand Down Expand Up @@ -231,8 +246,8 @@ Pico CSS is designed and tested for the latest stable Chrome, Firefox, Edge, and

## 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).
If you are interested in contributing to Pico CSS, please read our [contributing guidelines](https://github.com/Yohn/PicoCSS/blob/master/.github/CONTRIBUTING.md).

## Copyright and license

Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md).
Licensed under the [MIT License](https://github.com/Yohn/PicoCSS/blob/master/LICENSE.md).
13 changes: 9 additions & 4 deletions composer.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "picocss/pico",
"name": "yohn/picocss",
"description": "Minimal CSS Framework for semantic HTML.",
"keywords": [
"css",
Expand All @@ -14,17 +14,22 @@
"scss-framework",
"semantic"
],
"homepage": "https://picocss.com",
"homepage": "https://github.com/Yohn/PicoCSS",
"authors": [
{
"name": "Lucas Larroche",
"email": "[email protected]",
"homepage": "https://lucaslarroche.com",
"role": "Developer"
},
{
"name": "John Brittain III",
"homepage": "https://github.com/Yohn/PicoCSS",
"role": "Developer"
}
],
"support": {
"issues": "https://github.com/picocss/pico/issues/"
"issues": "https://github.com/Yohn/PicoCSS/issues/"
},
"license": "MIT"
}
}
Loading