Light theme
-
-
-
-
-
-
-
-
-
- <article data-theme="light">
...
@@ -156,17 +157,11 @@
1. Download Pico:
- +
2. Link the CSS:
- (~5KB minified and gzipped)
+ (5.6 KB minified and gzipped)
<link rel="stylesheet" href="css/pico.min.css">Starter template:
@@ -137,17 +144,11 @@Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">.
<article data-theme="light">
...
@@ -156,17 +157,11 @@
<article data-theme="dark">
...
@@ -184,23 +179,19 @@
Pick a color!
Custom theme
-
-
-
-
-
-
-
-
+
-
-
+
+
+
SCSS:
@@ -262,13 +253,9 @@
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">
-
+ <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">
-
+ <link rel="stylesheet" href="css/pico.fluid.classless.min.css">
@@ -301,25 +288,25 @@
Breakpoint
- <576px
- ≥576px
- ≥768px
- ≥992px
- ≥1200px
+ <576px
+ ≥576px
+ ≥768px
+ ≥992px
+ ≥1200px
Viewport
- None (auto)
- 540px
- 720px
- 960px
- 1140px
+ None (auto)
+ 540px
+ 720px
+ 960px
+ 1140px
<header>, <main> and <footer> as direct childs of <body> provide a responsive vertical padding.
- <section> as direct child of <main> provide a responsive margin-bottom to separate your sections.
+ <section> provide a responsive margin-bottom to separate your sections.
@@ -448,59 +435,59 @@
Base font
- 16px
- 17px
- 18px
- 19px
- 20px
+ 16px
+ 17px
+ 18px
+ 19px
+ 20px
h1
- 32px
- 34px
- 36px
- 38px
- 40px
+ 32px
+ 34px
+ 36px
+ 38px
+ 40px
h2
- 28px
- 29.75px
- 31.5px
- 33.25px
- 35px
+ 28px
+ 29px
+ 31.5px
+ 33.25px
+ 35px
h3
- 24px
- 25.5px
- 27px
- 28.5px
- 30px
+ 24px
+ 25.5px
+ 27px
+ 28.5px
+ 30px
h4
- 20px
- 21.25px
- 22.5px
- 23.75px
- 35px
+ 20px
+ 21.25px
+ 22.5px
+ 23.75px
+ 25px
h5
- 18px
- 19.125px
- 20.25px
- 21.375px
- 22.5px
+ 18px
+ 19.125px
+ 20.25px
+ 21.375px
+ 22.5px
h6
- 16px
- 17px
- 18px
- 19px
- 20px
+ 16px
+ 17px
+ 18px
+ 19px
+ 20px
@@ -627,18 +614,14 @@
Disabled and validation states:
-
<input type="text" placeholder="Valid" valid>
@@ -968,21 +937,23 @@
But off course, .classes are not a bad practice at all.
Feel free to use modifiers.
-
-<button class="warning">Action</button>
-
+ <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>
-
+ <button class="button-red margin-large padding-medium">Action</button>
diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js
index 65b63ad0..7dd2a3cb 100644
--- a/docs/js/pico.docs.js
+++ b/docs/js/pico.docs.js
@@ -1,5 +1,4 @@
// @prepros-append src/aside.js
// @prepros-append src/theme-switcher.js
-// @prepros-append src/internal-scroll.js
// @prepros-append src/grid.js
// @prepros-append src/color-picker.js
diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js
index d10edf62..637b30ed 100644
--- a/docs/js/pico.docs.min.js
+++ b/docs/js/pico.docs.min.js
@@ -1 +1 @@
-!function(){if(document.querySelector("aside nav").clientWidth<200)for(var e=document.querySelectorAll("aside details"),t=1;t]*>?/gm,""));f.currentTheme=e}var f={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(f.button.element);e.className=f.button.class,document.querySelector(f.target).appendChild(e),a(f.currentTheme);for(var t=document.querySelectorAll(f.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='<section class="grid">\n'+r+"</section>"}var t,f={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(f.targetButtons).before(t),document.querySelector(f.selectorAdd).addEventListener("click",function(){f.columnsCurrentf.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){for(var r=document.querySelectorAll(s.selectorTheme+" .name"),a=0;a>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var s={list:"json/material-colors.json",target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"#2c4049"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"#2c4049"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"#2c4049"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',s.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(s.target).after(a);for(var f=document.querySelectorAll(s.selectorButton),o=0;o]*>?/gm,""));f.currentTheme=e}var f={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(f.button.element);e.className=f.button.class,document.querySelector(f.target).appendChild(e),a(f.currentTheme);for(var t=document.querySelectorAll(f.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(f.targetGrid).innerHTML=t,document.querySelector(f.targetCode).innerHTML='<section class="grid">\n'+r+"</section>"}var t,f={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(f.targetButtons).before(t),document.querySelector(f.selectorAdd).addEventListener("click",function(){f.columnsCurrentf.columnsMin&&(f.columnsCurrent--,e(f.columnsCurrent))},!1)}(),function(){function n(e,t){!function(e,t){for(var r=document.querySelectorAll(s.selectorTheme+" .name"),a=0;a>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var s={target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"#2c4049"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"#2c4049"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"#2c4049"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',s.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(s.target).after(a);for(var f=document.querySelectorAll(s.selectorButton),c=0;c nav have a scrollbar
- var navWidth = document.querySelector('aside nav').clientWidth;
- if (navWidth < 200) {
- var asideDetails = document.querySelectorAll("aside details");
- for (var i = 1; i < asideDetails.length; i++) {
- asideDetails[i].removeAttribute("open");
+ var nav = document.querySelector("aside nav");
+ var navDetails = document.querySelectorAll("aside details");
+
+ if (nav.clientHeight < nav.scrollHeight) {
+ for (var i = 1; i < navDetails.length; i++) {
+ navDetails[i].removeAttribute("open");
}
}
diff --git a/docs/js/src/color-picker.js b/docs/js/src/color-picker.js
index 5e68891b..cbbfe9f0 100644
--- a/docs/js/src/color-picker.js
+++ b/docs/js/src/color-picker.js
@@ -12,7 +12,6 @@
*/
var colors = {
- list: 'json/material-colors.json',
target: '#customization h5', // Buttons inserted after target
selectorButton: '#customization button[data-color]', // Button selector in Dom
selectorTheme: '#customization', // Theme selector in Dom
diff --git a/docs/js/src/internal-scroll.js b/docs/js/src/internal-scroll.js
deleted file mode 100644
index 16e20915..00000000
--- a/docs/js/src/internal-scroll.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/*!
- * Internal Scroll
- *
- * Pico.css - https://picocss.com
- * Copyright 2019 - Licensed under MIT
- */
-
-(function() {
-
- /**
- * Init
- */
-
- smoothInternalClicks(
- document.querySelectorAll('a:not([href^="https://picocss.com"])')
- );
-
-
-
- /**
- * Smooth internal clicks
- *
- * @param {querySelector} links
- */
-
- function smoothInternalClicks(links) {
- for (var i=0; i input:not([type=checkbox]):not([type=radio]),
+ > button {
+ margin-bottom: 0;
+ }
+}
diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss
index 3739b139..cb4c3729 100644
--- a/docs/scss/pico.docs.scss
+++ b/docs/scss/pico.docs.scss
@@ -9,6 +9,7 @@
@import "themes/docs";
// Layout
+@import "layout/document";
@import "layout/main";
@import "layout/aside";
@import "layout/documentation";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 735e6858..7626426e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -26,7 +26,7 @@ $enable-classes: true !default;
// Enable validation states for
$enable-input-states: true !default;
-// Enable transitions for ,