picocss / pico Goto Github PK
View Code? Open in Web Editor NEWMinimal CSS Framework for semantic HTML
Home Page: https://picocss.com
License: MIT License
Minimal CSS Framework for semantic HTML
Home Page: https://picocss.com
License: MIT License
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.
Hi,
In the preview ewamples, clicking on the color picker triggers the switch below.
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
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
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)
}
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;
}
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...
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.
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.
Let me know, I would love to create a PR for the same.
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;
}
<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.
Adding minimalistic & elegant custom icons exclusive for pico to increase designers workflow, and to make it a more graceful and perfect package.
Create a pico RestAPI to avoid any excessive downloading size, even external users could use it without downloading the pico package
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.
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.
doing aside>nav eats up half the screen in a container
summary
should perhaps be more specific (& > summary
on line 62)?
pico/scss/components/_accordion.scss
Lines 60 to 62 in ddabc3e
<!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>
It would be great if pico had tabs, where each tab reveals some different content.
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.
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.
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
Request to add tag class with different size and colours options.
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.
is it possible to add the dropdown functionality. either by adding a role, or if necessary, a class
great, but Why not use tailwindcss implement?
This can bring a lot of customization flexibility
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?
As per the video, the toggler icon flickers at random in Firefox Nightly for Android.
Issue not present in chrome for Android.
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!!!
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.
Inputs with hidden
attribute does not hide.
Reproduction:
https://codesandbox.io/s/pico-css-hidden-input-issue-vkzm5?file=/index.html
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! 🚀
What about tfoot solid top border, same as thead border-bottom:
tfoot {
th, td {
border-top: 3px solid var(--table-border-color);
}
}
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.
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!
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>
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.
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
}
add more layouts or templates for Scaffold
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
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.
Hi
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.
Extend
element and We love .classes
should be visible.max-height
fix should do the job.pico/docs/scss/layout/_aside.scss
Line 14 in c5d85ae
Changing max-height
from max-height: calc(100vh - 5.5em)
to max-height: calc(100vh - 11em)
fixes it.
Would love to create a PR :D
cc: Thanks to @HarshKapadia2 for sending this across via this tweet.
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?
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.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.