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 0b19afc2..6e4e7205 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 children 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/dropdowns.html b/docs/dropdowns.html
index 8ca81309..3f88102e 100644
--- a/docs/dropdowns.html
+++ b/docs/dropdowns.html
@@ -1,4 +1,4 @@
-Dropdowns • Pico.css Dropdowns Dropdown menus and custom selects without JavaScript. Dropdowns are built with <details role ="list" > as a wrapper and <summary > and <ul > as direct children.
For style consistency with the form elements, dropdowns are styled like a <select> by default.
Dropdown Select Option Another option Something else here <!-- Dropdown -->
+Dropdowns • Pico.css Dropdowns Dropdown menus and custom selects without JavaScript. Dropdowns are built with <details role ="list" > as a wrapper and <summary > and <ul > as direct children.
For style consistency with the form elements, dropdowns are styled like a <select> by default.
Dropdown Select Option Another option Something else here <!-- Dropdown -->
<details role ="list" >
<summary aria-haspopup ="listbox" >Dropdown</summary >
<ul role ="listbox" >
diff --git a/docs/forms.html b/docs/forms.html
index 0f44f0ec..a0105510 100644
--- a/docs/forms.html
+++ b/docs/forms.html
@@ -1,4 +1,4 @@
-Forms • Pico.css