diff --git a/docs/accordions.html b/docs/accordions.html
index 720edd1d9..f1e0d8960 100644
--- a/docs/accordions.html
+++ b/docs/accordions.html
@@ -1,4 +1,5 @@
-Accordions • Pico CSS Accordions Toggle sections of content in pure HTML, without JavaScript. Accordion 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.
Accordion 2 Vestibulum id elit quis massa interdum sodales. Nunc quis eros vel odio pretium tincidunt nec quis neque. Quisque sed eros non eros ornare elementum. Cras sed libero aliquet, porta dolor quis, dapibus ipsum. <details >
+Accordions • Pico CSS Accordions Toggle sections of content in pure HTML, without JavaScript. Accordion 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.
Accordion 2 Vestibulum id elit quis massa interdum sodales. Nunc quis eros vel odio pretium tincidunt nec quis neque. Quisque sed eros non eros ornare elementum. Cras sed libero aliquet, porta dolor quis, dapibus ipsum. <details >
<summary >Accordion 1</summary >
<p >…</p >
</details >
@@ -25,6 +26,4 @@
<details >
<summary role ="button" class ="contrast" >Accordion 3</summary >
<p >…</p >
-</details >
-
- details >Buttons • Pico CSS Cards • Pico CSS Cards A flexible container with graceful spacings across devices and viewports. I'm a card! <article >I'm a card!</article >You can use <header > and footer <footer > inside <article >
Body <article >
+Cards • Pico CSS Cards A flexible container with graceful spacings across devices and viewports. I'm a card! <article >I'm a card!</article >You can use <header > and footer <footer > inside <article >
Body <article >
<header >Header</header >
Body
<footer >Footer</footer >
-</article >article >Class-less version • Pico CSS 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.
// Containers
+Class-less version • Pico CSS 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.
// Containers
body > header ,
body > main ,
body > footer {
@@ -26,4 +27,4 @@
#root > footer {
…
}
-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
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 : … ;
}
@@ -56,4 +58,4 @@
@import "@picocss/pico/scss/pico/layout/document" ;
@import "@picocss/pico/scss/pico/layout/sectioning" ;
…
-Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.
Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.
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" >
@@ -97,8 +98,7 @@
</li >
</ul >
</details >
-
- Dropdowns can be used inside a <nav> with a nested <details role ="list" >
Example with a dropdown as a link:
Dropdowns can be used inside a <nav> with a nested <details role ="list" >
Example with a dropdown as a link:
nav >Forms • Pico CSS Grid • Pico CSS Grid .grid enable a minimal grid system with auto-layout columns.<div class ="grid" >
+Grid • Pico CSS Grid .grid enable a minimal grid system with auto-layout columns.Columns intentionally collapses below large devices (992px )
To go further, discover how to merge Pico with the Bootstrap grid system .
As Pico focuses on native HTML elements, we kept this grid system very minimalist.
A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.
If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts . For example, Bootstrap Grid System only or Flexbox Grid .
If you need a light and custom grid, you can look at CSS Grid Generators . For example, CSS Grid Generator , Layoutit! or Griddy .
Alternatively, you can learn about CSS Grid .
div >Columns intentionally collapses below large devices (992px )
To go further, discover how to merge Pico with the Bootstrap grid system .
As Pico focuses on native HTML elements, we kept this grid system very minimalist.
A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.
If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts . For example, Bootstrap Grid System only or Flexbox Grid .
If you need a light and custom grid, you can look at CSS Grid Generators . For example, CSS Grid Generator , Layoutit! or Griddy .
Alternatively, you can learn about CSS Grid .
Documentation • Pico CSS Usage Works without package manager or dependencies 🙂! There are 4 ways to get started with Pico CSS:
Install manually Download Pico and link /css/pico.min.css in the <head > of your website.
<link rel ="stylesheet" href ="css/pico.min.css" >Install from CDN Alternatively, you can use jsDelivr CDN to link pico.css
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" >Install with NPM npm install @picocss/pico Install with Composer composer require picocss/pico Starter HTML template:
<!doctype html>
+Documentation • Pico CSS Usage Works without package manager or dependencies 🙂! There are 4 ways to get started with Pico CSS:
Install manually Download Pico and link /css/pico.min.css in the <head > of your website.
<link rel ="stylesheet" href ="css/pico.min.css" >Install from CDN Alternatively, you can use jsDelivr CDN to link pico.css
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" >Install with NPM npm install @picocss/pico Install with Composer composer require picocss/pico Starter HTML template:
<!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
@@ -11,4 +13,4 @@
<h1 >Hello, world!</h1 >
</main >
</body >
-</html >html >
@@ -47,54 +46,62 @@ const grid = {
${this.buttons.text.remove}
- `;
- document.querySelector(this.buttons.target).before(buttons);
+ `
+ document.querySelector(this.buttons.target).before(buttons)
// Add button listener
- document.querySelector('#grid button.add').addEventListener('click', () => {
- this.addColumn();
- }, false);
+ document.querySelector("#grid button.add").addEventListener(
+ "click",
+ () => {
+ this.addColumn()
+ },
+ false
+ )
// Remove button listener
- document.querySelector('#grid button.remove').addEventListener('click', () => {
- this.removeColumn();
- }, false);
+ document.querySelector("#grid button.remove").addEventListener(
+ "click",
+ () => {
+ this.removeColumn()
+ },
+ false
+ )
},
// Generate grid
generateGrid() {
// Config
- let htmlInner = '';
- let codeInner = '<div class ="grid" >\n';
+ let htmlInner = ""
+ let codeInner = '<div class ="grid" >\n'
// Build
for (let col = 0; col < this.grid.current; col++) {
- htmlInner += '' + (col + 1) + '
';
- codeInner += ' <div >' + (col + 1) + '</div >\n';
+ htmlInner += "" + (col + 1) + "
"
+ codeInner += " <div >" + (col + 1) + "</div >\n"
}
// Display
- codeInner += '</div >';
- document.querySelector(this.grid.gridTarget).innerHTML = htmlInner;
- document.querySelector(this.grid.codeTarget).innerHTML = codeInner;
+ codeInner += "</div >"
+ document.querySelector(this.grid.gridTarget).innerHTML = htmlInner
+ document.querySelector(this.grid.codeTarget).innerHTML = codeInner
},
// Add column
addColumn() {
if (this.grid.current < this.grid.max) {
- this.grid.current++;
- this.generateGrid();
+ this.grid.current++
+ this.generateGrid()
}
},
// Remove column
removeColumn() {
if (this.grid.current > this.grid.min) {
- this.grid.current--;
- this.generateGrid();
+ this.grid.current--
+ this.generateGrid()
}
},
-};
+}
// Init
-grid.init();
\ No newline at end of file
+grid.init()
diff --git a/docs/js/modal.js b/docs/js/modal.js
index beb98a261..13e546512 100644
--- a/docs/js/modal.js
+++ b/docs/js/modal.js
@@ -6,90 +6,96 @@
*/
// Config
-const isOpenClass = 'modal-is-open';
-const openingClass = 'modal-is-opening';
-const closingClass = 'modal-is-closing';
-const animationDuration = 400; // ms
-let visibleModal = null;
-
+const isOpenClass = "modal-is-open"
+const openingClass = "modal-is-opening"
+const closingClass = "modal-is-closing"
+const animationDuration = 400 // ms
+let visibleModal = null
// Toggle modal
const toggleModal = event => {
- event.preventDefault();
- const modal = document.getElementById(event.currentTarget.getAttribute('data-target'));
- (typeof(modal) != 'undefined' && modal != null)
- && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
+ event.preventDefault()
+ const modal = document.getElementById(
+ event.currentTarget.getAttribute("data-target")
+ )
+ typeof modal != "undefined" && modal != null && isModalOpen(modal)
+ ? closeModal(modal)
+ : openModal(modal)
}
// Is modal open
const isModalOpen = modal => {
- return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
+ return modal.hasAttribute("open") && modal.getAttribute("open") != "false"
+ ? true
+ : false
}
// Open modal
const openModal = modal => {
if (isScrollbarVisible()) {
- document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);
+ document.documentElement.style.setProperty(
+ "--scrollbar-width",
+ `${getScrollbarWidth()}px`
+ )
}
- document.documentElement.classList.add(isOpenClass, openingClass);
+ document.documentElement.classList.add(isOpenClass, openingClass)
setTimeout(() => {
- visibleModal = modal;
- document.documentElement.classList.remove(openingClass);
- }, animationDuration);
- modal.setAttribute('open', true);
+ visibleModal = modal
+ document.documentElement.classList.remove(openingClass)
+ }, animationDuration)
+ modal.setAttribute("open", true)
}
// Close modal
const closeModal = modal => {
- visibleModal = null;
- document.documentElement.classList.add(closingClass);
+ visibleModal = null
+ document.documentElement.classList.add(closingClass)
setTimeout(() => {
- document.documentElement.classList.remove(closingClass, isOpenClass);
- document.documentElement.style.removeProperty('--scrollbar-width');
- modal.removeAttribute('open');
- }, animationDuration);
+ document.documentElement.classList.remove(closingClass, isOpenClass)
+ document.documentElement.style.removeProperty("--scrollbar-width")
+ modal.removeAttribute("open")
+ }, animationDuration)
}
// Close with a click outside
-document.addEventListener('click', event => {
+document.addEventListener("click", event => {
if (visibleModal != null) {
- const modalContent = visibleModal.querySelector('article');
- const isClickInside = modalContent.contains(event.target);
- !isClickInside && closeModal(visibleModal);
+ const modalContent = visibleModal.querySelector("article")
+ const isClickInside = modalContent.contains(event.target)
+ !isClickInside && closeModal(visibleModal)
}
-});
+})
// Close with Esc key
-document.addEventListener('keydown', event => {
- if (event.key === 'Escape' && visibleModal != null) {
- closeModal(visibleModal);
+document.addEventListener("keydown", event => {
+ if (event.key === "Escape" && visibleModal != null) {
+ closeModal(visibleModal)
}
-});
+})
// Get scrollbar width
const getScrollbarWidth = () => {
-
// Creating invisible container
- const outer = document.createElement('div');
- outer.style.visibility = 'hidden';
- outer.style.overflow = 'scroll'; // forcing scrollbar to appear
- outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
- document.body.appendChild(outer);
+ const outer = document.createElement("div")
+ outer.style.visibility = "hidden"
+ outer.style.overflow = "scroll" // forcing scrollbar to appear
+ outer.style.msOverflowStyle = "scrollbar" // needed for WinJS apps
+ document.body.appendChild(outer)
// Creating inner element and placing it in the container
- const inner = document.createElement('div');
- outer.appendChild(inner);
+ const inner = document.createElement("div")
+ outer.appendChild(inner)
// Calculating difference between container's full width and the child width
- const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+ const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
// Removing temporary elements from the DOM
- outer.parentNode.removeChild(outer);
+ outer.parentNode.removeChild(outer)
- return scrollbarWidth;
+ return scrollbarWidth
}
// Is scrollbar visible
const isScrollbarVisible = () => {
- return document.body.scrollHeight > screen.height;
+ return document.body.scrollHeight > screen.height
}
diff --git a/docs/js/src/color-picker.js b/docs/js/src/color-picker.js
index 4a8fb8674..17db02f7d 100644
--- a/docs/js/src/color-picker.js
+++ b/docs/js/src/color-picker.js
@@ -6,107 +6,112 @@
*/
export const colorPicker = {
-
// Config
colors: null,
buttonsTarget: '#customization article[data-theme="generated"]',
- selectorButton: '#customization button[data-color]',
- selectorSection: '#customization',
+ selectorButton: "#customization button[data-color]",
+ selectorSection: "#customization",
buttons: null,
generatedStyles: null,
// Init
init() {
- this.generateButtons();
- this.setActiveButton('pink');
- this.generateTheme('pink');
+ this.generateButtons()
+ this.setActiveButton("pink")
+ this.generateTheme("pink")
},
// Generate Buttons
generateButtons() {
// Init
- let innerButtons = '';
- let innerStyles = '';
+ let innerButtons = ""
+ let innerStyles = ""
// Loop colors
for (const color in this.colors) {
// Buttons
- innerButtons += `Turn on dark mode ',
- dark: 'Turn off dark mode ',
+ light: "Turn on dark mode ",
+ dark: "Turn off dark mode ",
},
- buttonsTarget: '.theme-switcher',
- localStorageKey: 'picoPreferredColorScheme',
+ buttonsTarget: ".theme-switcher",
+ localStorageKey: "picoPreferredColorScheme",
// Init
init() {
- this.scheme = this.schemeFromLocalStorage;
- this.initSwitchers();
+ this.scheme = this.schemeFromLocalStorage
+ this.initSwitchers()
},
// Get color scheme from local storage
get schemeFromLocalStorage() {
- if (typeof window.localStorage !== 'undefined') {
+ if (typeof window.localStorage !== "undefined") {
if (window.localStorage.getItem(this.localStorageKey) !== null) {
- return window.localStorage.getItem(this.localStorageKey);
+ return window.localStorage.getItem(this.localStorageKey)
}
}
- return this._scheme;
+ return this._scheme
},
// Preferred color scheme
get preferredColorScheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+ return window.matchMedia("(prefers-color-scheme: dark)").matches
+ ? "dark"
+ : "light"
},
// Init switchers
initSwitchers() {
- const buttons = document.querySelectorAll(this.buttonsTarget);
+ const buttons = document.querySelectorAll(this.buttonsTarget)
buttons.forEach(button => {
- button.addEventListener('click', () => {
- this.scheme == 'dark' ? this.scheme = 'light' : this.scheme = 'dark';
- }, false);
- });
+ button.addEventListener(
+ "click",
+ () => {
+ this.scheme == "dark"
+ ? (this.scheme = "light")
+ : (this.scheme = "dark")
+ },
+ false
+ )
+ })
},
// Add new button
addButton(config) {
- let button = document.createElement(config.tag);
- button.className = config.class;
- document.querySelector(config.target).appendChild(button);
+ let button = document.createElement(config.tag)
+ button.className = config.class
+ document.querySelector(config.target).appendChild(button)
},
// Set scheme
set scheme(scheme) {
- if (scheme == 'auto') {
- this.preferredColorScheme == 'dark' ? this._scheme = 'dark' : this._scheme = 'light';
+ if (scheme == "auto") {
+ this.preferredColorScheme == "dark"
+ ? (this._scheme = "dark")
+ : (this._scheme = "light")
+ } else if (scheme == "dark" || scheme == "light") {
+ this._scheme = scheme
}
- else if (scheme == 'dark' || scheme == 'light') {
- this._scheme = scheme;
- }
- this.applyScheme();
- this.schemeToLocalStorage();
+ this.applyScheme()
+ this.schemeToLocalStorage()
},
// Get scheme
get scheme() {
- return this._scheme;
+ return this._scheme
},
// Apply scheme
applyScheme() {
- document.querySelector('html').setAttribute('data-theme', this.scheme);
- const buttons = document.querySelectorAll(this.buttonsTarget);
- buttons.forEach(
- button => {
- const text = this.scheme == 'dark' ? this.change.dark : this.change.light;
- button.innerHTML = text;
- button.setAttribute('aria-label', text.replace(/<[^>]*>?/gm, ''));
- }
- );
+ document.querySelector("html").setAttribute("data-theme", this.scheme)
+ const buttons = document.querySelectorAll(this.buttonsTarget)
+ buttons.forEach(button => {
+ const text = this.scheme == "dark" ? this.change.dark : this.change.light
+ button.innerHTML = text
+ button.setAttribute("aria-label", text.replace(/<[^>]*>?/gm, ""))
+ })
},
// Store scheme to local storage
schemeToLocalStorage() {
- if (typeof window.localStorage !== 'undefined') {
- window.localStorage.setItem(this.localStorageKey, this.scheme);
+ if (typeof window.localStorage !== "undefined") {
+ window.localStorage.setItem(this.localStorageKey, this.scheme)
}
},
-};
+}
-export default themeSwitcher;
+export default themeSwitcher
diff --git a/docs/js/src/toggle-navigation.js b/docs/js/src/toggle-navigation.js
index 97341919b..a16ad7b96 100644
--- a/docs/js/src/toggle-navigation.js
+++ b/docs/js/src/toggle-navigation.js
@@ -6,11 +6,10 @@
*/
export const toggleNavigation = {
-
// Config
- _state: 'closed-on-mobile',
- toggleLink: document.getElementById('toggle-docs-navigation'),
- nav: document.querySelector('main > aside > nav'),
+ _state: "closed-on-mobile",
+ toggleLink: document.getElementById("toggle-docs-navigation"),
+ nav: document.querySelector("main > aside > nav"),
// Init
init() {
@@ -18,25 +17,29 @@ export const toggleNavigation = {
},
onToggleClick() {
- this.toggleLink.addEventListener('click', event => {
- event.preventDefault();
- this.state == 'closed-on-mobile'
- ? this.state = 'open'
- : this.state = 'closed-on-mobile';
- this.nav.removeAttribute('class');
- this.nav.classList.add(this.state);
- }, false);
+ this.toggleLink.addEventListener(
+ "click",
+ event => {
+ event.preventDefault()
+ this.state == "closed-on-mobile"
+ ? (this.state = "open")
+ : (this.state = "closed-on-mobile")
+ this.nav.removeAttribute("class")
+ this.nav.classList.add(this.state)
+ },
+ false
+ )
},
// Get state
get state() {
- return this._state;
+ return this._state
},
// Set state
set state(state) {
- this._state = state;
+ this._state = state
},
-};
+}
-export default toggleNavigation;
\ No newline at end of file
+export default toggleNavigation
diff --git a/docs/loading.html b/docs/loading.html
index eaea7cdc5..35364f611 100644
--- a/docs/loading.html
+++ b/docs/loading.html
@@ -1,2 +1,3 @@
-Loading • Pico CSS Loading aria-busy ="true" Please wait… It can be applied to any block:
<article aria-busy ="true" ></article >Or any text element:
Generating link, please wait… Loading • Pico CSS Loading aria-busy ="true" Please wait… It can be applied to any block:
<article aria-busy ="true" ></article >Or any text element:
Generating link, please wait… Modal • Pico CSS Modal The classic modal element with graceful spacings across devices and viewports. Modals are built with <dialog > as a wrapper and <article > as a content container.
Inside <header >, <a class ="close" > is defined to float : right ;
Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.
<dialog open >
+Modal • Pico CSS Modal The classic modal element with graceful spacings across devices and viewports. Modals are built with <dialog > as a wrapper and <article > as a content container.
Inside <header >, <a class ="close" > is defined to float : right ;
Nunc nec ligula a tortor sollicitudin dictum in vel enim. Quisque facilisis turpis vel eros dictum aliquam et nec turpis. Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac justo accumsan ullamcorper.
<dialog open >
<article >
<header >
<a href ="#close" aria-label ="Close" class ="close" ></a >
@@ -84,4 +85,4 @@
</html >.modal-is-closing brings a closing animation.
<!doctype html>
<html class ="modal-is-open modal-is-closing" >
…
-</html >Confirm your action! Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.
html >Confirm your action! Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.
Navs • Pico CSS Navs The essential navbar component in pure semantic HTML. <nav >
+Navs • Pico CSS Navs The essential navbar component in pure semantic HTML. <nav >
<ul >
<li ><strong >Brand</strong ></li >
</ul >
@@ -31,4 +32,4 @@
<li ><a href ="#" >Category</a ></li >
<li >Page</li >
</ul >
-</nav >nav >Progress • Pico CSS Progress Progress bar element in pure HTML, without JavaScript. A progress bar without a value
Progress • Pico CSS Progress Progress bar element in pure HTML, without JavaScript. A progress bar without a value
RTL (Right-To-Left) • Pico CSS RTL Support for right-to-left text in Pico. To enable RTL in Pico you need to set dir ="rtl" <html > element (example ).
<!doctype html>
+RTL (Right-To-Left) • Pico CSS RTL Support for right-to-left text in Pico. To enable RTL in Pico you need to set dir ="rtl" <html > element (example ).
<!doctype html>
<html dir ="rtl" lang ="ar" >
...
-</html >ℹ️ The RTL feature is still experimental and will probably evolve.
html >ℹ️ The RTL feature is still experimental and will probably evolve.
Horizontal scroller • Pico CSS
+ Code licensed
+ MIT
+
+
diff --git a/docs/src/_head.html b/docs/src/_head.html
index a60045474..797dbd72f 100644
--- a/docs/src/_head.html
+++ b/docs/src/_head.html
@@ -1,8 +1,8 @@
-${props.title} • Pico CSS
-
${require('./_sidebar.html') active=`accordions-link`}
-
+
Accordions
- Toggle sections of content in pure HTML, without JavaScript.
+
+ Toggle sections of content in pure HTML, without JavaScript.
+
Accordion 1
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet, congue turpis.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Pellentesque urna diam, tincidunt nec porta sed, auctor id
+ velit. Etiam venenatis nisl ut orci consequat, vitae tempus quam
+ commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla
+ convallis lectus rutrum quam hendrerit, in facilisis elit
+ sollicitudin. Mauris pulvinar pulvinar mi, dictum tristique elit
+ auctor quis. Maecenas ac ipsum ultrices, porta turpis sit amet,
+ congue turpis.
+
Accordion 2
Vestibulum id elit quis massa interdum sodales.
- Nunc quis eros vel odio pretium tincidunt nec quis neque.
+
+ Nunc quis eros vel odio pretium tincidunt nec quis neque.
+
Quisque sed eros non eros ornare elementum.
- Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
+
+ Cras sed libero aliquet, porta dolor quis, dapibus ipsum.
+
-
-<details >
+ <details >
<summary >Accordion 1</summary >
<p >…</p >
</details >
@@ -48,26 +59,39 @@ Toggle sections of content in pure HTML, without JavaScript.
<li >…</li >
</ul >
</details >
- role ="button" <summary > into a button.
+
+ role ="button" <summary > into a button.
+
Accordion 1
- Aenean vestibulum nunc at libero congue, eu pretium nulla viverra. Fusce sed ex at est egestas vehicula. Integer sit amet lectus mi. Duis ut viverra mauris, at laoreet enim.
+
+ Aenean vestibulum nunc at libero congue, eu pretium nulla
+ viverra. Fusce sed ex at est egestas vehicula. Integer sit amet
+ lectus mi. Duis ut viverra mauris, at laoreet enim.
+
Accordion 2
- Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna quis, luctus risus. Donec vitae molestie felis.
+
+ Quisque porta dictum ipsum nec vestibulum. Suspendisse non mi ac
+ tellus scelerisque egestas. Sed vel nisi laoreet, rhoncus urna
+ quis, luctus risus. Donec vitae molestie felis.
+
Accordion 3
- Praesent quam ipsum, condimentum non augue at, porttitor interdum tellus. Curabitur ultrices consectetur leo, a placerat mauris malesuada et. In quis varius risus.
+
+ Praesent quam ipsum, condimentum non augue at, porttitor
+ interdum tellus. Curabitur ultrices consectetur leo, a placerat
+ mauris malesuada et. In quis varius risus.
+
-
-<!-- Primary -->
+ <!-- Primary -->
<details >
<summary role ="button" >Accordion 1</summary >
<p >…</p >
@@ -83,14 +107,12 @@ Toggle sections of content in pure HTML, without JavaScript.
<details >
<summary role ="button" class ="contrast" >Accordion 3</summary >
<p >…</p >
-</details >
-
+</details >
${require('./_footer.html')}
-
diff --git a/docs/src/buttons.html b/docs/src/buttons.html
index 7b37c1822..e4b7180c0 100644
--- a/docs/src/buttons.html
+++ b/docs/src/buttons.html
@@ -1,75 +1,107 @@
-
+
- ${require('./_head.html')
- title=`Buttons`
- description=`The essential button in pure HTML, without .classes for the default style.`
- canonical=`buttons.html`
- }
+ ${require('./_head.html') title=`Buttons` description=`The essential button
+ in pure HTML, without .classes for the default style.`
+ canonical=`buttons.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`buttons-link`}
-
+
${require('./_footer.html')}
-
diff --git a/docs/src/cards.html b/docs/src/cards.html
index d3861b73e..9d7f40588 100644
--- a/docs/src/cards.html
+++ b/docs/src/cards.html
@@ -1,46 +1,47 @@
-
+
- ${require('./_head.html')
- title=`Cards`
- description=`A flexible container with graceful spacings across devices and viewports.`
- canonical=`cards.html`
+ ${require('./_head.html') title=`Cards` description=`A flexible container
+ with graceful spacings across devices and viewports.` canonical=`cards.html`
}
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`cards-link`}
-
+
Cards
- A flexible container with graceful spacings across devices and viewports.
+
+ A flexible container with graceful spacings across devices and
+ viewports.
+
-
- I'm a card!
-
+ I'm a card!
<article >I'm a card!</article >You can use <header > and footer <footer > inside <article >
+
+ You can use <header > and footer
+ <footer > inside
+ <article >
+
Body
-<article >
+ <article >
<header >Header</header >
Body
<footer >Footer</footer >
</article >
${require('./_footer.html')}
-
diff --git a/docs/src/classless.html b/docs/src/classless.html
index 6321a1a57..67b22656e 100644
--- a/docs/src/classless.html
+++ b/docs/src/classless.html
@@ -1,29 +1,38 @@
-
+
- ${require('./_head.html')
- title=`Class-less version`
- description=`For wild HTML purists, Pico provides a .classless version.`
- canonical=`classless.html`
- }
+ ${require('./_head.html') title=`Class-less version` description=`For wild
+ HTML purists, Pico provides a .classless version.`
+ canonical=`classless.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`classless-link`}
-
+
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.
+
+ Pico provides a .classless version (example ).
+
+
+ In this version, <header >,
+ <main >, and
+ <footer > act as
+ containers to define a centered or a
+ fluid viewport.
+
-// Containers
+ // Containers
body > header ,
body > main ,
body > footer {
@@ -32,24 +41,46 @@ For wild HTML purists!
Usage:
- Use the default .classless version if you need centered viewports:
+
+ 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:
+
+ 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 jsDelivr CDN :
+
+ These .classless versions are also available on
+ jsDelivr CDN :
+
-// Centered viewport
+ // Centered viewport
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css" >
// Fluid viewport
+ // Fluid viewport
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css" >
If you need to customize the default parent (<body >) for <header >, <main >, and <footer >, you can recompile Pico by defining another CSS selector.
- Useful for React , Gatsby or Next.js .
+
+ If you need to customize the default parent
+ (<body >) for
+ <header >,
+ <main >, and
+ <footer >, you can recompile Pico by
+ defining another CSS selector.
+
+
+ Useful for React ,
+ Gatsby or
+ Next.js .
+
-/* Custom Class-less version for React */
+ /* Custom Class-less version for React */
// Set the root element
$semantic-root-element : "#root" ;
@@ -63,20 +94,21 @@ For wild HTML purists!
// Import Pico
@import "@picocss/pico/scss/pico" ;The code above will compile Pico with the containers defined like this:
+
+ The code above will compile Pico with the containers defined like
+ this:
+
-// Containers
+ // Containers
#root > header ,
#root > main ,
#root > footer {
…
}
${require('./_footer.html')}
-
diff --git a/docs/src/containers.html b/docs/src/containers.html
index 63dd3b76a..f83026b0d 100644
--- a/docs/src/containers.html
+++ b/docs/src/containers.html
@@ -1,34 +1,39 @@
-
+
- ${require('./_head.html')
- title=`Containers`
- description=`.container enable a centered viewport, .container-fluid enable a 100% layout.`
- canonical=`containers.html`
- }
+ ${require('./_head.html') title=`Containers` description=`.container enable
+ a centered viewport, .container-fluid enable a 100% layout.`
+ canonical=`containers.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`containers-link`}
-
+
Containers
- .container enable a centered viewport..container-fluid enable a 100% .container enable a centered viewport..container-fluid enable a
+ 100%
-<body >
+ <body >
<main class ="container" ></main >
</body >Pico uses the same breakpoints and viewports sizes as Bootstrap .
+
+ Pico uses the same breakpoints and viewports sizes as
+ Bootstrap .
+
- <header >, <main > and <footer > as direct children of <body > provide a responsive vertical padding
- <section > provides a responsive margin-bottom
+
+ <header >,
+ <main > and
+ <footer > as direct children of
+ <body > provide a responsive vertical
+ padding
+
+ <section > provides a responsive
+ margin-bottom
${require('./_footer.html')}
-
diff --git a/docs/src/customization.html b/docs/src/customization.html
index c56913d52..23072dca5 100644
--- a/docs/src/customization.html
+++ b/docs/src/customization.html
@@ -1,24 +1,26 @@
-
+
- ${require('./_head.html')
- title=`Customization`
- description=`You can customize themes with SCSS, or you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables).`
- canonical=`customization.html`
- }
+ ${require('./_head.html') title=`Customization` description=`You can
+ customize themes with SCSS, or you can edit the CSS variables. All Pico's
+ styles and colors are set with CSS custom properties (variables).`
+ canonical=`customization.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`customization-link`}
-
+
Customization
- You can customize themes with SCSS or, you can edit the CSS variables.
+
+ You can customize themes with SCSS or, you can edit the CSS
+ variables.
+
Example: pick a color!
@@ -26,32 +28,60 @@ You can customize themes with SCSS or, you can edit the CSS variables.
Custom theme There are 2 ways to customize your version of Pico CSS:
Overriding CSS variables
- All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.
+
+ All Pico's styles and colors are set with
+ CSS custom properties (variables). Just override the CSS
+ variables to customize your version of Pico.
+
-/* /*
[data-theme="light" ] ,
:root:not([data-theme="dark" ]) {
@@ -90,12 +120,22 @@ Overriding CSS variables
}
You can find all the CSS variables used in the default theme here: css/themes/default.css
+
+ You can find all the CSS variables used in the default theme here:
+ css/themes/default.css
+
Importing Pico SASS library
- We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.
+
+ We recommend customizing Pico by importing SASS source files into
+ your project. This way, you can keep Pico up to date without
+ conflicts since Pico code and your custom code are separated.
+
Compile the SASS file to CSS to get a custom version of Pico.
-/* Custom version */
+ /* Custom version */
// Override default variables
$primary-500 : … ;
@@ -105,9 +145,12 @@ Importing Pico SASS library
// Import Pico
@import "@picocss/pico/scss/pico" ;Alternatively, you can create a custom theme and import it into your project with the components you need.
+
+ Alternatively, you can create a custom theme and import it into your
+ project with the components you need.
+
-/* Custom version */
+ /* Custom version */
// Custom theme
@import "path/themes/custom" ;
@@ -118,11 +161,13 @@ Importing Pico SASS library
…
Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.
+
+ Compiling a custom SASS version allows you to create a lighter
+ version with only the components that are useful to you.
+
${require('./_footer.html')}
-
diff --git a/docs/src/dropdowns.html b/docs/src/dropdowns.html
index 9b9146c15..ffaecfa08 100644
--- a/docs/src/dropdowns.html
+++ b/docs/src/dropdowns.html
@@ -1,11 +1,8 @@
-
+
- ${require('./_head.html')
- title=`Dropdowns`
- description=`Dropdown menus and custom selects without JavaScript.`
- canonical=`dropdowns.html`
- }
+ ${require('./_head.html') title=`Dropdowns` description=`Dropdown menus and
+ custom selects without JavaScript.` canonical=`dropdowns.html` }
@@ -20,15 +17,31 @@
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.
+
+ 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
@@ -38,8 +51,7 @@ Dropdown menus and custom selects without JavaScript.
Something else here
-
-<!-- Dropdown -->
+ <!-- Dropdown -->
<details role ="list" >
<summary aria-haspopup ="listbox" >Dropdown</summary >
<ul role ="listbox" >
@@ -50,43 +62,74 @@ Dropdown menus and custom selects without JavaScript.
</details >
<!-- Select -->
-<select >
+<select >
<option value ="" disabled selected >Select</option >
<option >…</option >
</select >
+
- <summary role ="button" > transforms the dropdown into a button.
+
+ <summary role ="button" >
+ transforms the dropdown into a button.
+
- Dropdown as a button 1
+
+ Dropdown as a button 1
+
- Dropdown as a button 2
+
+ Dropdown as a button 2
+
- Dropdown as a button 3
+
+ Dropdown as a button 3
+
-
-<!-- Primary -->
+ <!-- Primary -->
<details role ="list" >
<summary aria-haspopup ="listbox" role ="button" >
Dropdown as a button 1
@@ -122,10 +165,13 @@ Dropdown menus and custom selects without JavaScript.
</ul >
</details >
+
- Dropdowns can be used as custom selects with <input type ="radio" > or <input type ="checkbox" >
+
+ Dropdowns can be used as custom selects with
+ <input type ="radio" > or
+ <input type ="checkbox" >
+
Select single element
@@ -138,7 +184,12 @@ Dropdown menus and custom selects without JavaScript.
-
@@ -151,7 +202,9 @@ Dropdown menus and custom selects without JavaScript.
- Select multiple elements
+
+ Select multiple elements
+
@@ -174,8 +227,7 @@ Dropdown menus and custom selects without JavaScript.
-
-<!-- With radio buttons -->
+ <!-- With radio buttons -->
<details role ="list" >
<summary aria-haspopup ="listbox" >Dropdown</summary >
<ul role ="listbox" >
@@ -224,10 +276,14 @@ Dropdown menus and custom selects without JavaScript.
</li >
</ul >
</details >
-
-
+
+
- Dropdowns can be used inside a <nav> with a nested <details role ="list" >
+
+ Dropdowns can be used inside a
+ <nav> with a nested
+ <details role ="list" >
+
Example with a dropdown as a link:
@@ -238,19 +294,30 @@ Dropdown menus and custom selects without JavaScript.
Link
- Dropdown
+
+ Dropdown
+
-
-<nav >
+ <nav >
<ul >
<li ><strong >Brand</strong ></li >
</ul >
@@ -268,8 +335,7 @@ Dropdown menus and custom selects without JavaScript.
</li >
</ul >
</nav >
+
Example with a default dropdown and a dropdown as a button:
@@ -279,27 +345,48 @@ Dropdown menus and custom selects without JavaScript.
Dropdown
- Dropdown
+
+ Dropdown
+
-
-<nav >
+ <nav >
<ul >
<li >
<details role ="list" >
@@ -323,11 +410,17 @@ Dropdown menus and custom selects without JavaScript.
</li >
</ul >
</nav >
+
- You can also use <li role ="list" > as a nested wrapper to render a list as a dropdown.
- ℹ️ This syntax is experimental. In this version, the dropdown menu is triggered on hover.
+
+ You can also use
+ <li role ="list" > as a nested
+ wrapper to render a list as a dropdown.
+
+
+ ℹ️ This syntax is experimental. In this version, the dropdown
+ menu is triggered on hover.
+
-
-<nav >
+ <nav >
<ul >
<li ><strong >Brand</strong ></li >
</ul >
@@ -365,13 +472,11 @@ Dropdown menus and custom selects without JavaScript.
</li >
</ul >
</nav >
+
${require('./_footer.html')}
-
diff --git a/docs/src/forms.html b/docs/src/forms.html
index 7f6f41be0..3567f4f6e 100644
--- a/docs/src/forms.html
+++ b/docs/src/forms.html
@@ -1,11 +1,9 @@
-
+
- ${require('./_head.html')
- title=`Forms`
- description=`All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.`
- canonical=`forms.html`
- }
+ ${require('./_head.html') title=`Forms` description=`All form elements are
+ fully responsive in pure semantic HTML, allowing forms to scale gracefully
+ across devices and viewports.` canonical=`forms.html` }
@@ -18,30 +16,62 @@
${require('./_footer.html')}
-
diff --git a/docs/src/grid.html b/docs/src/grid.html
index 608351639..1653b5141 100644
--- a/docs/src/grid.html
+++ b/docs/src/grid.html
@@ -1,24 +1,24 @@
-
+
- ${require('./_head.html')
- title=`Grid`
- description=`.grid enable a minimal grid system with auto-layout columns.`
- canonical=`grid.html`
- }
+ ${require('./_head.html') title=`Grid` description=`.grid enable a minimal
+ grid system with auto-layout columns.` canonical=`grid.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`grid-link`}
-
+
Grid
- .grid enable a minimal grid system with auto-layout columns.
+ .grid enable a minimal grid system with auto-layout
+ columns.
+
@@ -28,37 +28,81 @@
.grid enable a minimal grid system with auto-layout columns.4
- Columns intentionally collapses below large devices (992px )
- To go further, discover how to merge Pico with the Bootstrap grid system .
+
+ Columns intentionally collapses below large devices
+ (992px )
+
+
+ To go further, discover how to
+ merge Pico with the Bootstrap grid system .
+
-
+
More about grids
- As Pico focuses on native HTML elements, we kept this grid system very minimalist.
- A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.
- If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts . For example, Bootstrap Grid System only or Flexbox Grid .
- If you need a light and custom grid, you can look at CSS Grid Generators . For example, CSS Grid Generator , Layoutit! or Griddy .
- Alternatively, you can learn about CSS Grid .
+
+ As Pico focuses on native HTML elements, we kept this grid system
+ very minimalist.
+
+
+ A complete grid system in flexbox, with all the ordering,
+ offsetting and, breakpoints utilities, can be heavier than the
+ total size of the Pico library. Not really in the Pico spirit.
+
+
+ If you need a quick way to prototyping or build a complex layout,
+ you can look at Flexbox grid layouts . For
+ example,
+ Bootstrap Grid System only
+ or Flexbox Grid .
+
+
+ If you need a light and custom grid, you can look at
+ CSS Grid Generators . For example,
+ CSS Grid Generator , Layoutit! or
+ Griddy .
+
+
+ Alternatively, you can
+ learn about CSS Grid .
+
${require('./_footer.html')}
-
diff --git a/docs/src/index.html b/docs/src/index.html
index 5c52c5480..d38c44173 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -1,19 +1,18 @@
-
+
- ${require('./_head.html')
- title=`Documentation`
- description=`Pico works without package manager or dependencies! There are 4 ways to get started with Pico CSS: manually, from a CDN, with NPM, or with Composer.`
- canonical=``
- }
+ ${require('./_head.html') title=`Documentation` description=`Pico works
+ without package manager or dependencies! There are 4 ways to get started
+ with Pico CSS: manually, from a CDN, with NPM, or with Composer.`
+ canonical=`` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`start-link`}
-
+
@@ -22,18 +21,31 @@ Works without package manager or dependencies 🙂!
There are 4 ways to get started with Pico CSS:
Install manually
- Download Pico and link /css/pico.min.css in the <head > of your website.
+
+ Download Pico
+ and link /css/pico.min.css in the
+ <head > of your website.
+
<link rel ="stylesheet" href ="css/pico.min.css" >Install from CDN
- Alternatively, you can use jsDelivr CDN to link pico.css
+
+ Alternatively, you can use
+ jsDelivr CDN
+ to link pico.css
+
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" >Install with NPM
npm install @picocss/pico Install with Composer
- composer require picocss/pico composer require picocss/pico Starter HTML template:
-<!doctype html>
+ <!doctype html>
<html lang ="en" >
<head >
<meta charset ="utf-8" >
@@ -47,11 +59,9 @@ Install with Composer
</main >
</body >
</html >
${require('./_footer.html')}
-
diff --git a/docs/src/loading.html b/docs/src/loading.html
index b2fe190d6..0ee31cb11 100644
--- a/docs/src/loading.html
+++ b/docs/src/loading.html
@@ -1,33 +1,31 @@
-
+
- ${require('./_head.html')
- title=`Loading`
- description=`aria-busy='true' enable a loading indicator.`
- canonical=`loading.html`
- }
+ ${require('./_head.html') title=`Loading` description=`aria-busy='true'
+ enable a loading indicator.` canonical=`loading.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`loading-link`}
-
+
Loading
- aria-busy ="true"
+ aria-busy ="true"
Please wait…
It can be applied to any block:
@@ -35,7 +33,9 @@ aria-busy ="true" <article aria-busy ="true" ></article >Or any text element:
- Generating link, please wait…
+ Generating link, please wait…
@@ -43,7 +43,6 @@ aria-busy ="true"
${require('./_footer.html')}
-
diff --git a/docs/src/modal.html b/docs/src/modal.html
index 5feb1cef6..f0cbc8988 100644
--- a/docs/src/modal.html
+++ b/docs/src/modal.html
@@ -1,45 +1,60 @@
-
+
- ${require('./_head.html')
- title=`Modal`
- description=`A flexible container with graceful spacings across devices and viewports.`
- canonical=`modal.html`
+ ${require('./_head.html') title=`Modal` description=`A flexible container
+ with graceful spacings across devices and viewports.` canonical=`modal.html`
}
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`modal-link`}
-
+
Modal
- The classic modal element with graceful spacings across devices and viewports.
+
+ The classic modal element with graceful spacings across devices
+ and viewports.
+
- Modals are built with <dialog > as a wrapper and <article > as a content container.
- Inside <header >, <a class ="close" > is defined to float : right ;
+
+ Modals are built with <dialog > as a
+ wrapper and <article > as a content
+ container.
+
+
+ Inside <header >,
+ <a class ="close" > is defined
+ to float : right ;
- Nunc nec ligula a tortor sollicitudin dictum in vel enim.
- Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
- Sed eleifend a dui nec ullamcorper.
- Praesent vehicula lacus ac justo accumsan ullamcorper.
+ Nunc nec ligula a tortor sollicitudin dictum in vel enim.
+ Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
+ Sed eleifend a dui nec ullamcorper. Praesent vehicula lacus ac
+ justo accumsan ullamcorper.
-<dialog open >
+ <dialog open >
<article >
<header >
<a href ="#close" aria-label ="Close" class ="close" ></a >
@@ -54,23 +69,37 @@ The classic modal element with graceful spacings across devices and viewport
</article >
</dialog > Inside <footer >, the content is right aligned by default.
+
+ Inside <footer >, the content is right
+ aligned by default.
+
Confirm your action!
- Mauris non nibh vel nisi sollicitudin malesuada.
- Donec ut sagittis erat. Praesent eu eros felis.
- Ut consectetur placerat pulvinar.
+ Mauris non nibh vel nisi sollicitudin malesuada. Donec ut
+ sagittis erat. Praesent eu eros felis. Ut consectetur placerat
+ pulvinar.
-<dialog open >
+ <dialog open >
<article >
<h3 >Confirm your action!</h3 >
<p >
@@ -91,10 +120,15 @@ Toggle a modal by clicking the button below.
- Launch demo modal
+
+ Launch demo modal
+
-
-<!-- Button to trigger the modal -->
+ <!-- Button to trigger the modal -->
<button class ="contrast"
data-target ="modal-example"
onClick ="toggleModal(event)" >
@@ -133,15 +167,26 @@ Toggle a modal by clicking the button below.
</footer >
</article >
</dialog >
- Pico does not include JavaScript code. You will need to implement your JS to interact with modals.
- As a starting point, you can look at this example: modal.js .
- To make a modal appear, add the open <dialog > container.
+
+ Pico does not include JavaScript code. You will need to implement
+ your JS to interact with modals.
+
+
+ As a starting point, you can look at this example:
+ modal.js .
+
+
+ To make a modal appear, add the open <dialog > container.
+
-<!-- Open modal-->
+ <!-- Open modal-->
<dialog open >
<article >
…
@@ -158,49 +203,73 @@ Toggle a modal by clicking the button below.
Utilities
Modals come with 3 utility classes.
- ℹ️ These classes are not available in the class-less version .
- .modal-is-open prevents any scrolling and interactions below the modal.
+
+ ℹ️ These classes are not available in the
+ class-less version .
+
+
+ .modal-is-open prevents any scrolling and interactions
+ below the modal.
+
-<!doctype html>
+ <!doctype html>
<html class ="modal-is-open" >
…
</html >.modal-is-opening brings an opening animation.
-<!doctype html>
+ <!doctype html>
<html class ="modal-is-open modal-is-opening" >
…
</html >.modal-is-closing brings a closing animation.
-<!doctype html>
+ <!doctype html>
<html class ="modal-is-open modal-is-closing" >
…
</html >
${require('./_footer.html')}
-
- Confirm your action!
- Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.
+
+ Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue
+ finibus pellentesque. Nullam finibus risus non semper euismod.
+
-
-
-
\ No newline at end of file
+
diff --git a/docs/src/navs.html b/docs/src/navs.html
index f109deb96..5434534a5 100644
--- a/docs/src/navs.html
+++ b/docs/src/navs.html
@@ -1,19 +1,16 @@
-
+
- ${require('./_head.html')
- title=`Navs`
- description=`The essential navbar component in pure semantic HTML.`
- canonical=`navs.html`
- }
+ ${require('./_head.html') title=`Navs` description=`The essential navbar
+ component in pure semantic HTML.` canonical=`navs.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`navs-link`}
-
+
@@ -28,12 +25,15 @@ The essential navbar component in pure semantic HTML.
-
-<nav >
+ <nav >
<ul >
<li ><strong >Brand</strong ></li >
</ul >
@@ -43,21 +43,39 @@ The essential navbar component in pure semantic HTML.
<li ><a href ="#" role ="button" >Button</a ></li >
</ul >
</nav >
- <ul > are automatically distributed horizontally.
+
+ <ul > are automatically distributed
+ horizontally.
+
<li > are unstyled and inlined.
-
-<nav >
+ <nav >
<ul >
<li ><a href ="#" class ="secondary" >…</a ></li >
</ul >
@@ -88,10 +124,12 @@ The essential navbar component in pure semantic HTML.
<li ><a href ="#" class ="secondary" >…</a ></li >
</ul >
</nav >
- Inside <aside >, navs are stacked vertically.
+
+ Inside <aside >, navs are stacked
+ vertically.
+
@@ -103,8 +141,7 @@ The essential navbar component in pure semantic HTML.
-
-<aside >
+ <aside >
<nav >
<ul >
<li ><a href ="#" >Link</a ></li >
@@ -113,45 +150,42 @@ The essential navbar component in pure semantic HTML.
</ul >
</nav >
</aside >
+
-
-
-
- With aria-label ="breadcrumb"
-
-
-
-
-
+
+ With aria-label ="breadcrumb"
-
-
- ${require('./_footer.html')}
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+ ${require('./_footer.html')}
+
+
+
+
+
diff --git a/docs/src/progress.html b/docs/src/progress.html
index e5ce1e29e..a9887459b 100644
--- a/docs/src/progress.html
+++ b/docs/src/progress.html
@@ -1,11 +1,8 @@
-
+
- ${require('./_head.html')
- title=`Progress`
- description=`Progress bar element in pure HTML, without JavaScript.`
- canonical=`progress.html`
- }
+ ${require('./_head.html') title=`Progress` description=`Progress bar element
+ in pure HTML, without JavaScript.` canonical=`progress.html` }
@@ -23,24 +20,22 @@ Progress bar element in pure HTML, without JavaScript.
- A progress bar without a value
+
+ A progress bar without a value
-
-<progress ></progress ><progress ></progress >
${require('./_footer.html')}
-
diff --git a/docs/src/rtl.html b/docs/src/rtl.html
index 479a30747..89b9fce51 100644
--- a/docs/src/rtl.html
+++ b/docs/src/rtl.html
@@ -1,37 +1,43 @@
-
+
- ${require('./_head.html')
- title=`RTL (Right-To-Left)`
- description=`Support for right-to-left text in Pico with dir='rtl'`
- canonical=`rtl.html`
- }
+ ${require('./_head.html') title=`RTL (Right-To-Left)` description=`Support
+ for right-to-left text in Pico with dir='rtl'` canonical=`rtl.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`rtl-link`}
-
+
RTL
Support for right-to-left text in Pico.
- To enable RTL in Pico you need to set dir ="rtl" <html > element (example ).
+
+ To enable RTL in Pico you need to set
+ dir ="rtl" <html > element (example ).
+
-<!doctype html>
+ <!doctype html>
<html dir ="rtl" lang ="ar" >
...
</html >ℹ️ The RTL feature is still experimental and will probably evolve.
+
+ ℹ️ The RTL feature is still experimental and will probably
+ evolve.
+
${require('./_footer.html')}
-
diff --git a/docs/src/scroller.html b/docs/src/scroller.html
index bea1ab430..d49aadd8f 100644
--- a/docs/src/scroller.html
+++ b/docs/src/scroller.html
@@ -1,24 +1,25 @@
-
+
- ${require('./_head.html')
- title=`Horizontal scroller`
- description=`<figure> acts as a container to make any content scrollable horizontally.`
- canonical=`scroller.html`
- }
+ ${require('./_head.html') title=`Horizontal scroller`
+ description=`<figure> acts as a container to make any content
+ scrollable horizontally.` canonical=`scroller.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`scroller-link`}
-
+
${require('./_footer.html')}
-
diff --git a/docs/src/tables.html b/docs/src/tables.html
index d097f00c5..d92c88b14 100644
--- a/docs/src/tables.html
+++ b/docs/src/tables.html
@@ -1,19 +1,16 @@
-
+
- ${require('./_head.html')
- title=`Tables`
- description=`Default styles for tables without .classes`
- canonical=`tables.html`
- }
+ ${require('./_head.html') title=`Tables` description=`Default styles for
+ tables without .classes` canonical=`tables.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`tables-link`}
-
+
@@ -71,7 +68,7 @@ Default styles for tables without .classes
-<table >
+ <table >
<thead >
<tr >
<th scope ="col" >#</th >
@@ -120,7 +117,9 @@ Default styles for tables without .classes
</tfoot >
</table >role ="grid"
+
+ role ="grid"
@@ -162,14 +161,12 @@ Default styles for tables without .classes
-<table role ="grid" >
+ <table role ="grid" >
…
</table >
${require('./_footer.html')}
-
diff --git a/docs/src/tooltips.html b/docs/src/tooltips.html
index be225a3b7..912661853 100644
--- a/docs/src/tooltips.html
+++ b/docs/src/tooltips.html
@@ -1,63 +1,86 @@
-
+
- ${require('./_head.html')
- title=`Tooltips`
- description=`Enable tooltips everywhere in pure HTML, without JavaScript.`
- canonical=`tooltips.html`
- }
+ ${require('./_head.html') title=`Tooltips` description=`Enable tooltips
+ everywhere in pure HTML, without JavaScript.` canonical=`tooltips.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`tooltips-link`}
-
+
${require('./_footer.html')}
-
diff --git a/docs/src/typography.html b/docs/src/typography.html
index 55cdc1fc2..7e8b09926 100644
--- a/docs/src/typography.html
+++ b/docs/src/typography.html
@@ -1,11 +1,9 @@
- ${require('./_head.html')
- title=`Typography`
- description=`All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.`
- canonical=`typography.html`
- }
+ ${require('./_head.html') title=`Typography` description=`All typographic
+ elements are responsive, allowing text to scale gracefully across devices
+ and viewports.` canonical=`typography.html` }
@@ -163,8 +161,14 @@ Heading 2
- Links come with .secondary and .contrast styles.
- ℹ️ These classes are not available in the class-less version .
+
+ Links come with .secondary and
+ .contrast styles.
+
+
+ ℹ️ These classes are not available in the
+ class-less version .
+
Primary
+
- ${require('./_head.html')
- title=`We love .classes`
- description=`As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes. But of course, .classes are not a bad practice at all. Feel free to use modifiers.`
- canonical=`we-love-classes.html`
- }
+ ${require('./_head.html') title=`We love .classes` description=`As a
+ starting point, Pico chose to be as neutral and semantic as possible using
+ very few .classes. But of course, .classes are not a bad practice at all.
+ Feel free to use modifiers.` canonical=`we-love-classes.html` }
${require('./_nav.html')}
-
+
${require('./_sidebar.html') active=`we-love-classes-link`}
-
+
We love .classes
- As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes
- But of course, .classes are not a bad practice at all.
+
+ As a starting point, Pico chose to be as neutral and semantic as
+ possible using very few .classes
+
+
+ But of course, .classes are not a bad practice at all.
+
Feel free to use modifiers .
<button class ="warning" >Action</button >
- Just try to keep your HTML clean and semantic to keep the Pico spirit.
+
+ Just try to keep your HTML clean and semantic to keep the Pico
+ spirit.
+
<button class ="button-red margin-large padding-medium" >Action</button >
${require('./_footer.html')}
-
diff --git a/docs/tables.html b/docs/tables.html
index 869c8c4d1..7c663d6a0 100644
--- a/docs/tables.html
+++ b/docs/tables.html
@@ -1,4 +1,5 @@
-Tables • Pico CSS Tables Default styles for tables without .classes # Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell # Total Total Total Total Total
<table >
+Tables • Pico CSS Tables Default styles for tables without .classes # Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell # Total Total Total Total Total
<table >
<thead >
<tr >
<th scope ="col" >#</th >
@@ -47,4 +48,4 @@
</tfoot >
</table >role ="grid"
# Heading Heading Heading Heading Heading 1 Cell Cell Cell Cell Cell 2 Cell Cell Cell Cell Cell 3 Cell Cell Cell Cell Cell
<table role ="grid" >
…
-</table >table >Themes • Pico CSS Themes • Pico CSS Themes Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme : dark
… Color schemes can be defined for the entire document using <html data-theme ="light" > or for specific HTML elements, such as <article data-theme ="dark" >.
Color schemes at the HTML tag level work great for elements such as a, button, table, input, textarea, select, article, dialog, progress.
CSS variables specific to the color scheme are assigned to every HTML tag. However, to maintain transparent backgrounds and ensure colors are inherited from the parent tag, we have not enforced specific background and color settings across all HTML tags.
For some other HTML tags, you might need to explicitly specify background-color and color.
Light theme <article data-theme ="light" >
+ ('prefers-color-scheme: dark')."/>Themes Pico is shipped with 2 consistent themes: Light & Dark. The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled prefers-color-scheme : dark
… Color schemes can be defined for the entire document using <html data-theme ="light" > or for specific HTML elements, such as <article data-theme ="dark" >.
Color schemes at the HTML tag level work great for elements such as a, button, table, input, textarea, select, article, dialog, progress.
CSS variables specific to the color scheme are assigned to every HTML tag. However, to maintain transparent backgrounds and ensure colors are inherited from the parent tag, we have not enforced specific background and color settings across all HTML tags.
For some other HTML tags, you might need to explicitly specify background-color and color.
Light theme Dark theme article >Tooltips • Pico CSS Typography • Pico CSS Typography All typographic elements are responsive, allowing text to scale gracefully across devices and viewports. Device Extra small Small Medium Large Extra large Base font 16px 17px 18px 19px 20px <h1 >32px 34px 36px 38px 40px <h2 >28px 29px 31.5px 33.25px 35px <h3 >24px 25.5px 27px 28.5px 30px <h4 >20px 21.25px 22.5px 23.75px 25px <h5 >18px 19.125px 20.25px 21.375px 22.5px <h6 >16px 17px 18px 19px 20px <small >14px 14.875px 15.75px 16.625px 17.5px
Headings:
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 <h1 >Heading 1</h1 >
+Typography • Pico CSS Typography All typographic elements are responsive, allowing text to scale gracefully across devices and viewports. Device Extra small Small Medium Large Extra large Base font 16px 17px 18px 19px 20px <h1 >32px 34px 36px 38px 40px <h2 >28px 29px 31.5px 33.25px 35px <h3 >24px 25.5px 27px 28.5px 30px <h4 >20px 21.25px 22.5px 23.75px 25px <h5 >18px 19.125px 20.25px 21.375px 22.5px <h6 >16px 17px 18px 19px 20px <small >14px 14.875px 15.75px 16.625px 17.5px
Headings:
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 <h1 >Heading 1</h1 >
<h2 >Heading 2</h2 >
<h3 >Heading 3</h3 >
<h4 >Heading 4</h4 >
@@ -14,4 +16,4 @@
<footer >
<cite >- Phasellus eget lacinia</cite >
</footer >
-</blockquote >blockquote >We love .classes • Pico CSS We love .classes As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes
But of course, .classes are not a bad practice at all.
Feel free to use modifiers .
<button class ="warning" >Action</button >Just try to keep your HTML clean and semantic to keep the Pico spirit.
<button class ="button-red margin-large padding-medium" >Action</button >We love .classes • Pico CSS We love .classes As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes
But of course, .classes are not a bad practice at all.
Feel free to use modifiers .
<button class ="warning" >Action</button >Just try to keep your HTML clean and semantic to keep the Pico spirit.
<button class ="button-red margin-large padding-medium" >Action</button >