Class-less version For wild HTML purists! Pico provides a .classless version (example ).
In this version, <header >, <main >, and <footer > act as containers to define a centered or a fluid viewport.
Usage:
Use the default .classless version if you need centered viewports:
<link rel ="stylesheet " href ="css/pico.classless.min.css" >Or use the .fluid.classless version if you need a fluid container:
<link rel ="stylesheet " href ="css/pico.fluid.classless.min.css" >These .classless versions are also available on unpkg CDN :
// Centered viewport
<link rel ="stylesheet" href ="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css" >
// Fluid viewport
<link rel ="stylesheet" href ="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css" >
diff --git a/docs/containers.html b/docs/containers.html
index f574e02f..29ca9553 100644
--- a/docs/containers.html
+++ b/docs/containers.html
@@ -1,3 +1,3 @@
-Containers • Pico.css Containers .container enable a centered viewport..container-fluid enable a 100% <body >
+Containers • Pico.css Containers .container enable a centered viewport..container-fluid enable a 100% <body >
<main class ="container" ></main >
</body >Pico uses the same breakpoints and viewports sizes as Bootstrap .
Device Extra small Small Medium Large Extra large Breakpoint <576px ≥576px ≥768px ≥992px ≥1200px Viewport 100% 540px 720px 960px 1140px
<header >, <main > and <footer > as direct childs of <body > provide a responsive vertical padding
<section > provides a responsive margin-bottom
Customization • Pico.css Customization You can customize themes with SCSS or, you can edit the CSS variables. Example: pick a color!
Custom theme // Simplified example
+Customization • Pico.css Customization You can customize themes with SCSS or, you can edit the CSS variables. Example: pick a color!
Custom theme // Simplified example
:root {
--primary : … ;
}
diff --git a/docs/dropdown.html b/docs/dropdown.html
index bcc376bd..498e601d 100644
--- a/docs/dropdown.html
+++ b/docs/dropdown.html
@@ -1,5 +1,5 @@
Dropdown • Pico.css Dropdown single / multi select dropdown, without JavaScript. Single select Multi-select Usage notes in order to use dropdown component, use role='list' on details tag. no need to use javascript to close the dropdown when clicked outside. for both single / multi-select case, need javascript to update summary tag text when any option selected. in case of single select, remove open attribute on details tag using javascript when an option is selected.
+ component, without JavaScript.">Dropdown single / multi select dropdown, without JavaScript. Single select Multi-select Usage notes in order to use dropdown component, use role='list' on details tag. no need to use javascript to close the dropdown when clicked outside. for both single / multi-select case, need javascript to update summary tag text when any option selected. in case of single select, remove open attribute on details tag using javascript when an option is selected.
<!-- For Single-select -->
<details role="list" >
diff --git a/docs/forms.html b/docs/forms.html
index bd3da5ad..ede91926 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -1,4 +1,4 @@
-Forms • Pico.css