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 42a383bf..f574e02f 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
new file mode 100644
index 00000000..3d6d773d
--- /dev/null
+++ b/docs/dropdown.html
@@ -0,0 +1,41 @@
+Dropdown • Pico.css Dropdown single / multi select dropdown, without JavaScript. Single select Multi-select Usage notes in order to use dropdown component, use role='dropdown' 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="dropdown" >
+ <summary >Single select</summary >
+ <div >
+ <ul >
+ <li >
+ <input type="radio" id="01" name="option1" / >
+ <label for="01" >Option 1</label >
+ </li >
+ <li >
+ <input type="radio" id="02" name="option1" / >
+ <label for="02" >Option 2</label >
+ </li >
+ </ul >
+ </div >
+ </details >
+
+
+ For Multi-select
+ ===============================
+ <details role="dropdown" >
+ <summary >Multi select</summary >
+ <div >
+ <ul >
+ <li >
+ <input type="checkbox" id="01" name="option1" / >
+ <label for="01" >Option 1</label >
+ </li >
+ <li >
+ <input type="checkbox" id="02" name="option1" / >
+ <label for="02" >Option 2</label >
+ </li >
+ </ul >
+ </div >
+ </details >
+
+ Dropdowns • Pico.css
-
-
-
-
-
- Documentation
-
-
-
-
-
-
-
-
- Dropdown
- single / multi select dropdown, without JavaScript.
-
-
-
- Single select
-
-
-
- Multi-select
-
-
-
-
- Usage notes
-
-
- in order to use dropdown component, use
- role='dropdown' 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="dropdown" >
- <summary >Single select</summary >
- <div >
- <ul >
- <li >
- <input type="radio" id="01" name="option1" / >
- <label for="01" >Option 1</label >
- </li >
- <li >
- <input type="radio" id="02" name="option1" / >
- <label for="02" >Option 2</label >
- </li >
- </ul >
- </div >
- </details >
-
-
- For Multi-select
- ===============================
- <details role="dropdown" >
- <summary >Multi select</summary >
- <div >
- <ul >
- <li >
- <input type="checkbox" id="01" name="option1" / >
- <label for="01" >Option 1</label >
- </li >
- <li >
- <input type="checkbox" id="02" name="option1" / >
- <label for="02" >Option 2</label >
- </li >
- </ul >
- </div >
- </details >
-
-
-
-
-
-
-
-
diff --git a/docs/forms.html b/docs/forms.html
index 90785f4b..bd3da5ad 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -1,4 +1,4 @@
-Forms • Pico.css