picocss / pico Goto Github PK

View Code? Open in Web Editor NEW

12.4K 80.0 358.0 8.99 MB

Minimal CSS Framework for semantic HTML

Home Page: https://picocss.com

License: MIT License

SCSS 1.75% JavaScript 0.04% CSS 98.21%

css css-framework dark-theme dark-mode semantic minimal lightweight scss-framework native-html minimalist

pico's People

Contributors

Stargazers

Watchers

Forkers

shahxeb taasan jimgregory loloicci boazblake siloam dimied nuxodin darkfoe703 sivaraj-v xsampah narze naabbasi oricis kingrathi viworx ch99q mdanlowski gsalaun1 dejurin fitztrev mrseidel ravikkr18 jgarte triptych dosycorps gustlywind xen0byte lloydeverett blessedonekobo hachesilva-forks junaya designtips 50north4west ftonato zenull kingyeahwei stvhanna layaxx maleksandrov iuriimattos2 munmun6392 olavfosse gricosm jluisfg i-fork lyrl kaleidea bj0815 gabalis masa-shin herrbertling bsaif86 maitrepylos kiranmantha mopamo amiralbl3ndic jubishop onur shmuel-web jeffbaumes tusharnankani thelucasmoore zangbob feikeq changzhiwin indexw squ fengfeng34qy chenyangfinance fsfish nuan123 johnnyma ws1993 binsarjr chunsoninteresting yash-5575 ljdigital-control trexcheng hqdmyjsw 0xbul1 x-fox linya-ironman mcjrr danielcherubini gkemp94 cjperes kevin811103 sanyuesiyuewuyue agstar ajunlonglive leomp12 mdevoldere reinerba vardumper microdustor 0xforked meatflavourdev pmunch hpdx

pico's Issues

Flickering night mode toggler icon (Firefox Nightly - Android)

YouCut_20211215_200742815.mp4

As per the video, the toggler icon flickers at random in Firefox Nightly for Android.

Issue not present in chrome for Android.

Is it possible to have a vertical nav sidebar with no modifications to the CSS?

doing aside>nav eats up half the screen in a container

Built in padding doesn't apply in React (or Next.js).

I want to begin by saying that I love this project. It looks great, and it's really easy to use.

Unfortunately, I've found a bug.

In both React and Next.js, all content is placed inside a wrapper <div> inside <body>.

For example:

<!-- React -->

<body>
  <div id="root">
    <!-- all content goes here -->
  </div>
</body>

<!-- Next.js -->

<body>
  <div id="__next">
    <!-- all content goes here -->
  </div>
</body>

This breaks the responsive vertical padding on <header>, <main>, and <footer>, as defined here in the documentation, and here in the source code.

The fix for this is pretty simple, but it involves putting edge cases for React and Next.js into the framework, which might be something you don't want to do.

I'm proposing changing this part of layout/_sectioning.scss (line 21):

body {
  // ...
}

to this:

body, #__next, #root {
  // ...
}

Of course, the CSS version of the framework would also need to be updated.

I'm currently using patch-package to make these patches in my own project.

I'm ready to make a pull request if you'd be happy with it, but if not, that's fine too.

Feature request - file upload component

I would be interested in a component that supports drag-and-drop file upload. Typically you can either select a file for upload by browsing or drop an existing file onto a "drop" area. I believe the component is universal enough to warrant consideration. It's usability depends quite a bit on the styling and hence why this is a good candidate for inclusion.

Fixed Aside

Enabling a fixed width aside similar to the docs could be a good feature. Using the .grid class would make the main content and the aside the same width by default.

invalid state slider for checkbox switches

Hello,

While I was testing the pico, I noticed the default error state for the switches seem a little off.

Perhaps something like this would be more appropriate?

[type="checkbox"][role="switch"][aria-invalid] {
    --background-color: var(--switch-color);
    --border-color: var(--switch-background-color);
    --color: var(--form-element-invalid-border-color);
    width: 2.25em;
    height: 1.25em;
    border: var(--border-width) solid var(--border-color);
    border-radius: 1.25em;
    background-color: var(--background-color);
    line-height: 1.25em;
}

Button vs Link with role=button

I found that a button has a margin bottom but a link with role=button does not.

e.g.

<button>I have margin bottom</button>

<a href="#" role="button">I have no margin bottom</a>

Is this wanted or a bug?

[Change Request] Do not use hgroup

Hello.
First of all, thanks for the amazing product, it is a breeze to use for prototyping applications!

I am using the hgroup tag for grouping heading tags together as explained in the documentation but something bugs me: hgroup is not an HTML5 standard.
This is problematic because it makes using it very complicated with Vuejs for example: using hgroup with Vue + Vite results in build errors (TS2604).

Maybe for this specific use case it could be better of using non purely semantic but instead relying on classes?

i.e., this:

<hgroup>
    <h1>Hello</h1>
    <h2>World</h2>
</hgroup>

could become this:

<div class="headings">
    <h1>Hello</h1>
    <h2>World</h2>
</div>

Thanks again! 🚀

checkbox invalid state

Hello, I'm probably doing something wrong but this is what I get when I invalidate checkboxes:

I investigated a bit, and noticed this css padding the aria-invalid:

input[aria-invalid],
select[aria-invalid],
textarea[aria-invalid] {
    padding-right: 2rem;
    background-position: center right 0.75rem;
    background-repeat: no-repeat;
    background-size: 1rem auto;
}

I ended up overriding the checkboxes:

input[aria-invalid][type="checkbox"] {
    padding-right: 0rem;
    background: none;
}

Do you think the original css should be modified with a :not() ? for checboxes? I will test the radio buttons shortly.

Disable button via javascript

Hello,
I love picocss, because it is minimal and have everything it needs, semantic html and few classes.
But I am struggling to enable/disable an anchor button via Javascript.
If I set "disabled" on the tag it works, but then setting via Javascript is not working.

Here is a CodePen:
https://codepen.io/camillo777/pen/MWpMNdP

Here is a minimal code to test it:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
    <title>Basic template • Pico.css</title>
    <meta name="description" content="A basic custom template for Pico using only CSS custom properties (variables). Built with Pico CSS.">
    <link rel="shortcut icon" href="https://picocss.com/favicon.ico">
    <link rel="canonical" href="https://picocss.com/examples/basic-template/">

     <!-- Pico.css -->
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">

  </head>

  <body>

    <main class="container">

      <!-- Preview -->
      <section id="preview">
        <h2>Preview</h2>
        <p>Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas.</p>
        <p>
          <a id="button1" onclick="toggleButton2()" role="button">Link</a>
          <a id="button2" disabled role="button">Link</a>
        </p>
      </section>
      
    </main>

    <script>
    function toggleButton2() {
      var btn2 = document.getElementById('button2');
      if (btn2.disabled) btn2.disabled = false;
      else btn2.disabled = true;
      //btn2.prop('disabled', false);
      //$('#button-save').removeProp ( 'disabled' );
      //$('#button-save').removeClass('disabled');
      //$('#button-save').attr("data-toggle", "modal");
    } 

    </script>

  </body>

</html>

Thank you
Camillo

Margins on article

Hi,

The margins on <article> seem to be quite large on devices such as Laptops and Desktop. ON Mobile it looks great. Is there a reason these are as large as they are on larger devices? It really reduces the screen real estate for something like what you see on https://twtxt.net/ if you view this in a Browser on Desktop.

Or am I doing something horribly wrong? :)

Example attached.

Summary in nested accordions are always styled as open

summary should perhaps be more specific (& > summary on line 62)?

pico/scss/components/_accordion.scss

Lines 60 to 62 in ddabc3e

 &[open] { 

 summary {

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
    <title>Nested accordions</title>
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css" />
  </head>
  <body>
    <main>
      <article>
        <details>
          <summary>Summary</summary>
          Hello!
          <details>
            <summary>Summary always looks open</summary>
            Hello!
          </details>
        </details>
      </article>
    </main>
  </body>
</html>

[Feature Request] dialog (modal)

<dialog> is an official HTML element.
Mayber use aria-modal to indicate it's a modal.

Some other classless libraries has this like Water.css.

Add pico to the list of awesome-css-frameworks

https://github.com/troxler/awesome-css-frameworks

[Feature request] CSS variables for label font-weight

If we have a login page, or general form such as this:

It would be great to be able to control the form control font-weights so they stand out a bit more.

Currently the labels are using:

So if --font-weight is adjusted, all the fonts on the page are changed.

Could we have different kinds of variables for labels on forms to control the weights in pico without having to override styles?

Why not use tailwindcss implement?

great, but Why not use tailwindcss implement?

This can bring a lot of customization flexibility

[Feature Request] toasts/alert

add toasts/alert component by using role="alert" or/and role="alertdialog"
I think it's in the spirit of the framework to keep the sementics of the html code

Any example about how to change fonts and spacing so forms and tables are not so big on PC screens?

I just have one day using Pico, looking for simplicity to build a WebApps light foundation for mobile and desktop, I like it very much, the introduction was very good, but I am not familiar with the latest advances in CSS, I don't know about compiling a CSS or using variables (where should I use them?), my first guess is going into pico.css and change it but where to look? I would like to reduce a bit the size of forms, of its buttons and the size of tables on PC screens.

This is a Pico/DataTable frontend consuming a C++ microservice, which is our real occupation here, but I want to have something light on the front-end. We left the debug turned on in case you wanna see the conversation with the microservice, just open Chrome devtools/console.

Our very first PICO demos

Customers view:
https://cppserver.com/demo/custview.htm

Basic form, adds a record in a database via microservice:
https://cppserver.com/demo/categadd.htm

I think PICO is a wonderful idea for those of us who feel overwhelmed by Bootstrap.

Regards,
Martin

bug: `Extend` element not visible in sidebar (docs)

Issue & Description

Facing an issue with visibility in the docs.

As we can see, when every detail is expanded in the accordion, on the side Navbar - The Extend element and We love .classes underneath are hidden.

System Details

OS: Windows
Version: Windows 10
Browser: Microsoft Edge
- Side Note: Facing the same problem in Google Chrome

Steps to reproduce

Go to https://picocss.com/docs
Open all elements in the accordion, on the sidebar.
Scroll to the bottom.

pico_docs.mp4

Expected behavior

The Extend element and We love .classes should be visible.

Potential Fix

A simple max-height fix should do the job.

pico/docs/scss/layout/_aside.scss

Line 14 in c5d85ae

max-height: calc(100vh - 5.5rem);

Changing max-height from max-height: calc(100vh - 5.5em) to max-height: calc(100vh - 11em) fixes it.

pico_fix.mp4

Would love to create a PR :D

cc: Thanks to @HarshKapadia2 for sending this across via this tweet.

Allow aria-busy on submit buttons

Hi!

I've got a form with a submit button that I'd like to show a loading indicator https://picocss.com/docs/#loading when I submit the form, but I can see in the source that input's aren't allowed to have the indicator https://github.com/picocss/pico/blob/master/scss/utilities/_loading.scss#L12

<form>
<input type="submit" value="Submit" aria-busy="true" />
</form>

Is there anything I can do to make this work?

Feature Request: Dropdown <nav> tags

I think this is really a great framework, thanks for the efforts. One thing I would love to work on is ability for dropdowns in <nav> tags, like this example from water.css: https://jsfiddle.net/ethanpil/xja0nug7/1/

I am happy to create a PR for this but I want to see if this is something the pico.css team would be interested in merging before I spend time on it...

[Feature Request] Browser compatibility?

Would be nice to have in the Docs what the Browser compatibility is like (especially because you are using Grid and :not for an example)

thanks.

Placeholder & ellipsis text

All field placeholders could be enhanced with text ellipsis:

input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file])::placeholder {
    text-overflow:ellipsis
}

[Feature Request] Admonitions

This is a great and clean CSS.

Any chance of having Admonitions.
Something like in Jupyter will be great: https://jupyterbook.org/content/content-blocks.html.

How about displaying related css code as well in docs?

Is is possible to show relevant css code also along with html code in docs?
It will enable people to learn css and also copy css code that they needed rather than entire css file.

great work.

Thanks

Input goes over valid/invalid icon

When marking an input as (in)valid, the text goes over the icon if it is long enough.

SVG in menu blocks documentation on Firefox

The SVG icon in the menu on the documentation page completely blocks the screen on Firefox 68.12 ESR.
Here is the screenshot:

I think the problem is the Github icon has its height set to 1rem. On MDN, rem is not among the list of valid SVG length property units (which would explain why I'm getting several height errors in my browser console when I load the docs).

FWIW, if I change 1rem to 1em, the docs load OK.

Correction for the Switch button

When checked, the circle of the switch button is positioned on the edge without a thin space as when it isn't checked.

This little amendment corrects this:

[type="checkbox"][role="switch"]:checked::before {
    margin-left: auto;
    ...
}

Now, to allow sizing changes for these kinds of buttons (switch & radio) -no Framework offer it-, adding this make the trick:

[type="checkbox"], [type="radio"] {
    font-size: inherit;
}

Theme links

The padding around the "Theme" links is a little excessive.

Here is some corrections:

nav a {
    display: inline-block;
    margin: calc(var(--spacing) * -1.5) calc(var(--spacing) * -.5);
    padding: calc(var(--spacing) * .3) calc(var(--spacing) * .5) calc(var(--spacing) * .5)
}

[Change Request] Remove explicit background-color on tr element

Hi,

What do you think about removing the explicit background-color: var(--background-color) on the <tr> element?

Right now tables don't play nicely with <article> in dark mode, as the background colors differ, the table sticks out quite abruptly.
In light mode, the main section of an <article> is already white, so the white background color doesn't make a difference.

Could a simple solution be to let <tr> be transparent, but keep:

table[role="grid"] tbody tr:nth-child(2n+1) {
  background-color: var(--table-row-stripped-background-color);
}

At first glance it seems to maintain existing behaviour in light mode, and give a similar aesthetic also in dark mode inside an <article>

Update form elements to use `:invalid` for HTML5 pattern and validation requirements

See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid

Right now, there is aria-invalid="false" and aria-invalid="true" but those aren't automatically applied by the browser when a form element has invalid input. Ideally, if I don't have a valid email in an email input, it will gain the same look as the aria-invalid="true" styles.

Add more layouts

add more layouts or templates for Scaffold

Possible to use pico inside custom container class

This looks great. Minimal and nice design. Thanks for creating this.

I was thinking to create a setting page with pico but using it inside CMS like WordPress back-end would certainly cause issues as WordPress default styles will interfere or vice-versa.

I think it would be great if there is some easy way to use a single "custom container" class to make pico work only inside that.

for example.

HTML

<div class="pico-container">
<h1>Plugin Settings</h1>
<form>
<input type="text" name="name" />
<input type="submit" value="Submit" />
</form>
</div>

CSS

.pico-container {}
.pico-container h1 {}
.pico-container input {}
.pico-container input[type=submit]{}

That way, WordPress default styles will not interfere with my setting page as well as pico will not cause any issues outside .pico-container class.

tfoot topborder

What about tfoot solid top border, same as thead border-bottom:

tfoot {
   th, td {
     border-top: 3px solid var(--table-border-color);
  }
}

Date and Time components are not compatible to rtl languages

Add a submit button for Search field

Maybe the Search field need a Submit button:

<!-- Search -->
<label for="search">Search
	<input type="search" id="search" name="search" placeholder="Search">
	<input aria-label="Find" type="submit" name="search_submit" value=""> 
</label>

And the corresponding rules:

input[type="search"] + input[type="submit"]{
    position: absolute;
    z-index: 1;
    left: 0;
    width: fit-content;
    background: transparent;
    border: none
   }

html input[type="search"]~input[type="submit"]:focus{box-shadow:none}

Note: rules updated.

Custom Icons "pico-icons"

Idea

Adding minimalistic & elegant custom icons exclusive for pico to increase designers workflow, and to make it a more graceful and perfect package.

How to?

Create a pico RestAPI to avoid any excessive downloading size, even external users could use it without downloading the pico package

[Feature Request] dropdown

is it possible to add the dropdown functionality. either by adding a role, or if necessary, a class

Preview examples

Hi,
In the preview ewamples, clicking on the color picker triggers the switch below.

grid items overflow

Using a large number of grid items is causing the behavior presented in the image:

[Feature Request] Hamburger Menu

I see that the example for AMP uses the AMP Sidebar component. I would love to see a function that works nearly identically to that but built in.

Ideally it would show as a collapsed menu at when the screen size is too small to show the full nav and be fully expanded as a nav when the screen is large enough.

If you are prescribing AMP as this solution I would love a declaritive statement to that fact - or whatever method you would condone.

Thanks for the great product!

input with `hidden` attribute does not hide.

Inputs with hidden attribute does not hide.

Reproduction:
https://codesandbox.io/s/pico-css-hidden-input-issue-vkzm5?file=/index.html

Incorrect specificity for hidden inputs.

Seems like `<hgroup>` is not recommended.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

enhancement: add issue templates

Hey

This is an ever-growing repository, it will keep having feature requests and PRs and the never-ending process.

We could add issue templates similar to this.

Easy for the maintainer, not to ask for more details.
Could ask the issue reporter for a potential fix.
Since, we have feature_request, bug_report - we could have multiple templates.
Including PR templates - what was fixed, issue number, any further lookouts?

Let me know, I would love to create a PR for the same.

Feature request: Tabs

It would be great if pico had tabs, where each tab reveals some different content.

[Feature Request] Tag labels

Request to add tag class with different size and colours options.

Example: https://bulma.io/documentation/elements/tag/

Code block in article/card overflow when using Remark

The following html:

<article>
  <p>Intro paragraph</p>
  <pre><code className="javascript">const obj = { }</code></pre>
  <p>Next paragraph</p>
</article>

Produces this result:

A large negative margin is being applied to article>pre which pulls the p up over the pre. It works perfectly when using this manually if you add a p tag around the pre, but Remark doesn't do that.

Thanks for the awesome library!!!

Add ::file-selector-button to style type="file"

https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

UX issue with radiobuttons and checkboxes

Despite the fact that labels are clickable, the pointer doesn't change on mouse hover.
Since mouse hovers on both the radios/checkboxes set cursor to "pointer", the same should happen on their labels as well.
Changing the cursor on mouse hover on the labels would give a hint to users that they are clickable.

Sass deprecation warnings

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($switch-width, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
115 │       margin-left: calc(#{$switch-width / 2} - var(--border-width));
    │                           ^^^^^^^^^^^^^^^^^
    ╵
    node_modules/@picocss/pico/scss/content/_form-checkbox-radio.scss 115:27  @import
    node_modules/@picocss/pico/scss/pico.scss 25:9                            @import

I believe this will require switching completely to dart-sass because node-sass won't support this syntax.