diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css new file mode 100644 index 00000000..d51cba6d --- /dev/null +++ b/docs/css/pico.docs.css @@ -0,0 +1,481 @@ +/*! + * Pico: Customs styles for Docs + */ +/** + * Light theme (Default) [Additions for docs] + * Can be forced with data-theme="light" + */ +[data-theme="light"], +:root:not([data-theme="dark"]) { + --nav-background: rgba(255, 255, 255, 0.7); + --nav-border: rgba(115, 132, 140, 0.2); +} + +/** + * Dark theme (Auto) [Additions for docs] + * Automatically enabled if user has Dark mode enabled + */ +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --nav-background: rgba(16, 25, 30, 0.8); + --nav-border: rgba(115, 132, 140, 0.2); + } +} + +/** + * Dark theme (Forced) [Additions for docs] + * Enabled if forced with data-theme="dark" + */ +[data-theme="dark"] { + --nav-background: rgba(16, 25, 30, 0.8); + --nav-border: rgba(115, 132, 140, 0.2); +} + +/** + * Docs: Global layout + */ +section > hgroup { + margin-bottom: 3rem; +} + +section > hgroup p { + color: var(--muted-text); + font-size: 1.125rem; +} + +a[role=button] { + margin-right: 0.25rem; + margin-bottom: 1.5rem; +} + +body > main { + padding-top: 4.5rem; +} + +@media (min-width: 576px) { + body > main { + padding-top: 4.75rem; + } +} + +@media (min-width: 768px) { + body > main { + padding-top: 5rem; + } +} + +@media (min-width: 992px) { + body > main { + grid-column-gap: 4rem; + display: grid; + grid-template-columns: 200px auto; + padding-top: 5.25rem; + } +} + +@media (min-width: 1200px) { + body > main { + padding-top: 5.5rem; + } +} + +body > main > * { + min-width: 0; +} + +a[name]:not([href])::before { + display: block; + height: 4.5rem; + margin-top: -4.5rem; + content: ''; +} + +@media (min-width: 576px) { + a[name]:not([href])::before { + height: 4.75rem; + margin-top: -4.75rem; + } +} + +@media (min-width: 768px) { + a[name]:not([href])::before { + height: 5rem; + margin-top: -5rem; + } +} + +@media (min-width: 992px) { + a[name]:not([href])::before { + height: 5.25rem; + margin-top: -5.25rem; + } +} + +@media (min-width: 1200px) { + a[name]:not([href])::before { + height: 5.5rem; + margin-top: -5.5rem; + } +} + +main > aside nav { + width: 100%; + margin-bottom: 2rem; +} + +main > aside nav h1 { + margin-bottom: 1.5rem; +} + +@media (min-width: 992px) { + main > aside nav { + position: fixed; + width: 200px; + max-height: calc(100vh - 5.5rem); + margin-bottom: 0; + overflow-x: hidden; + overflow-y: auto; + } + main > aside nav h1 { + display: none; + } +} + +main > aside li, main > aside summary { + padding-top: 0; + padding-bottom: 0; + font-size: 16px; +} + +main > aside a:focus, +main > aside a.secondary:focus { + background-color: transparent; + color: var(--primary-hover); +} + +main > aside details { + padding-bottom: .25rem; + border-bottom: none; +} + +main > aside details summary { + font-weight: 300; + text-transform: uppercase; +} + +main > aside details summary::after { + display: none; +} + +[role=document] section > h1, +[role=document] section > h2, +[role=document] section > h3 { + line-height: 1; +} + +#customization figure { + display: grid; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(2, 1fr); + margin-bottom: 0; + overflow: hidden; +} + +@media (min-width: 576px) { + #customization figure { + grid-template-columns: repeat(18, 1fr); + grid-template-rows: 1fr; + border-top-right-radius: 0.25rem; + border-top-left-radius: 0.25rem; + } +} + +#customization figure ~ article { + margin-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +#customization figure button { + margin-bottom: 0; + padding: 0; + padding-top: 100%; + border: none; + border-radius: 0; +} + +#customization figure button:focus { + box-shadow: none; +} + +#customization figure button.picked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: .66rem auto; + box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25); +} + +#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +} + +#customization h4 { + transition: color 0.2s ease-in-out; +} + +#customization pre[data-theme="generated"] { + border-color: var(--primary); +} + +#grids button { + display: inline-block; + width: auto; + margin-right: .5rem; +} + +#grids button svg { + stroke: var(--secondary); + margin-right: .5rem; + border: 3px solid currentColor; + border-radius: 1rem; + background: currentColor; +} + +#grids .grid > * { + padding: 0.5rem 0; + background: var(--code-background); + text-align: center; +} + +/** + * Docs: Code + */ +@media (min-width: 576px) { + pre { + padding: 2rem 2.5rem; + } +} + +@media (min-width: 768px) { + pre { + padding: 2rem 3rem; + } +} + +@media (min-width: 992px) { + pre { + padding: 2rem 3.5rem; + } +} + +@media (min-width: 1200px) { + pre { + padding: 2rem 4rem; + } +} + +[data-theme="invalid"], +[data-theme="valid"] { + position: relative; + margin-bottom: 0 !important; +} + +[data-theme="invalid"]:before, +[data-theme="valid"]:before { + display: block; + position: absolute; + top: 0; + right: -1rem; + padding: .375rem .75rem; + border-radius: 0; + color: var(--primary-inverse); + font-size: 14px; + line-height: 1; +} + +@media (min-width: 576px) { + [data-theme="invalid"]:before, + [data-theme="valid"]:before { + right: 0; + } +} + +@media (min-width: 992px) { + [data-theme="invalid"]:before, + [data-theme="valid"]:before { + top: 1rem; + right: 1rem; + } +} + +[data-theme="invalid"] pre, +[data-theme="valid"] pre { + padding-top: 2rem; + padding-bottom: 2rem; +} + +[data-theme="invalid"]:before { + background: var(--invalid); + content: 'Bulky'; +} + +[data-theme="invalid"] pre { + border-color: var(--invalid); +} + +[data-theme="valid"]:before { + background: var(--valid); + content: 'Great'; +} + +[data-theme="valid"] pre { + border-color: var(--valid); +} + +section[title="love"] [data-theme="invalid"]:before { + content: 'Not so great'; +} + +/** + * Docs: Navs + */ +body > nav { + -webkit-backdrop-filter: saturate(180%) blur(20px); + z-index: 99; + position: fixed; + top: 0; + right: 0; + left: 0; + backdrop-filter: saturate(180%) blur(20px); + background-color: var(--nav-background); + box-shadow: 0px 1px 0 var(--nav-border); +} + +body > nav li a { + border-radius: 0; +} + +body > nav ul:first-of-type li:first-of-type a { + width: 3.5rem; + height: 3.5rem; + margin-left: -1rem; + padding: 0; + background: var(--h1); + color: var(--background); +} + +body > nav ul:first-of-type li:nth-of-type(2) { + display: none; + margin-left: 1rem; + color: var(--muted-text); +} + +@media (min-width: 992px) { + body > nav ul:first-of-type li:nth-of-type(2) { + display: inline; + } +} + +/** + * Docs: Code inside
+ */ +article pre { + margin-top: 2rem; + margin-bottom: -2rem; +} + +@media (min-width: 576px) { + article pre { + padding: 2rem 2.5rem; + margin-bottom: 0; + } +} + +@media (min-width: 768px) { + article pre { + padding: 2rem 3rem; + margin: -3rem; + margin-top: 3rem; + } +} + +@media (min-width: 992px) { + article pre { + padding: 2rem 3.5rem; + margin: -3.5rem; + margin-top: 3.5rem; + } +} + +@media (min-width: 1200px) { + article pre { + padding: 2rem 4rem; + margin: -4rem; + margin-top: 4rem; + } +} + +/** + * Docs: Theme switcher + */ +button.switcher { + position: fixed; + right: 0.5rem; + bottom: 1rem; + width: auto; + max-width: 3rem; + margin-bottom: 0; + padding: .75rem; + border-radius: 2rem; + line-height: 1; + text-align: right; + box-shadow: var(--card-shadow); +} + +button.switcher::after { + display: inline-block; + width: 1rem; + height: 1rem; + border: 2px solid currentColor; + border-radius: 50%; + background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%); + vertical-align: bottom; + content: ''; + transition: transform 0.2s ease-in-out; +} + +button.switcher i { + display: inline-block; + max-width: 0; + padding: 0; + overflow: hidden; + font-size: .875rem; + font-style: normal; + white-space: nowrap; +} + +button.switcher:hover, button.switcher:focus { + max-width: 100%; + transition: max-width 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out; +} + +button.switcher:hover::after { + transform: rotate(180deg); +} + +button.switcher:hover i { + max-width: 100%; + padding: 0 0.5rem 0 0.25rem; + transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out; +} + +button.switcher:focus { + box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus); +} + +@media (min-width: 576px) { + button.switcher { + right: 1rem; + } +} diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css new file mode 100644 index 00000000..041b069a --- /dev/null +++ b/docs/css/pico.docs.min.css @@ -0,0 +1,3 @@ +/*! + * Pico: Customs styles for Docs + */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 132, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 25, 30, 0.8);--nav-border:rgba(115, 132, 140, 0.2)}section>hgroup{margin-bottom:3rem}section>hgroup p{color:var(--muted-text);font-size:1.125rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}a[name]:not([href]):before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){a[name]:not([href]):before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){a[name]:not([href]):before{height:5rem;margin-top:-5rem}}@media (min-width:992px){a[name]:not([href]):before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){a[name]:not([href]):before{height:5.5rem;margin-top:-5.5rem}}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside a.secondary:focus,main>aside a:focus{background-color:transparent;color:var(--primary-hover)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:inline-block;width:auto;margin-right:.5rem}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:-1rem;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:576px){[data-theme=invalid]:before,[data-theme=valid]:before{right:0}}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] pre,[data-theme=valid] pre{padding-top:2rem;padding-bottom:2rem}[data-theme=invalid]:before{background:var(--invalid);content:'Bulky'}[data-theme=invalid] pre{border-color:var(--invalid)}[data-theme=valid]:before{background:var(--valid);content:'Great'}[data-theme=valid] pre{border-color:var(--valid)}section[title=love] [data-theme=invalid]:before{content:'Not so great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav li a{border-radius:0}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--muted-text)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}article pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article pre{padding:2rem 2.5rem;margin-bottom:0}}@media (min-width:768px){article pre{padding:2rem 3rem;margin:-3rem;margin-top:3rem}}@media (min-width:992px){article pre{padding:2rem 3.5rem;margin:-3.5rem;margin-top:3.5rem}}@media (min-width:1200px){article pre{padding:2rem 4rem;margin:-4rem;margin-top:4rem}}button.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;max-width:3rem;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}button.switcher:after{display:inline-block;width:1rem;height:1rem;border:2px solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}button.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}button.switcher:focus,button.switcher:hover{max-width:100%;transition:max-width 0.2s ease-in-out, background-color 0.2s ease-in-out, color 0.2s ease-in-out}button.switcher:hover:after{transform:rotate(180deg)}button.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}button.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){button.switcher{right:1rem}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..b8f79863 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,951 @@ + + + + + + + + Pico.css • Graceful & Minimal CSS design system + + + + + + + + + + +
+ + + + + +
+ + +
+ +
+

Usage

+

Work without package manager or dependencies 🙂!

+
+

1. Download Pico CSS:

+

Download pico.css

+

2. Link the CSS (~5KB minified and gzipped):

+ 
<link rel="stylesheet" href="css/pico.min.css">
+

Customization:

+

You can compile your own version of Pico: SCSS sources are included.

+

A class-less version is also included in the library.

+

+
+ + +
+ +
+

Customize

+

Pico is shipped with 2 consistents themes: Light & Dark.

+

+

The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled prefers-color-scheme: dark.

+

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">.

+
+

Light theme

+
+
+ +
+
+ +
+
+ +
+
+ +
<article data-theme="light">
+  ...
+</article>
+ +
+
+

Dark theme

+
+
+ +
+
+ +
+
+ +
+
+ +
<article data-theme="dark">
+  ...
+</article>
+ +
+
+ + +
+ +
+

Customization

+

You can customize themes with SCSS or you can simply edit the CSS variables.

+
+
Pick a color!
+
+

Custom theme

+
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +

SCSS:

+ +
// Custom colors
+$primary-500: ...;
+$primary-600: ...;
+$primary-700: ...;
+
+// Pico library
+@import "path/pico";
+ +

CSS:

+ +
/* Light theme (Default) */
+/* Can be forced with data-theme="light" */
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --primary:            ...;
+  --primary-hover:      ...;
+  --primary-focus:      ...;
+  --primary-inverse:    ...;
+}
+
+
+/* Dark theme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --primary:          ...;
+    --primary-hover:    ...;
+    --primary-focus:    ...;
+    --primary-inverse:  ...;
+}
+
+
+/* Dark theme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+  --primary:            ...;
+  --primary-hover:      ...;
+  --primary-focus:      ...;
+  --primary-inverse:    ...;
+}
+ +
+ + + +
+ +
+

Class-less version

+

For wild HTML purists! 😈

+
+

Pico provide a .classless version (Example).

+

Obviously this version do not include .container, .container-fluid, .grid, .secondary and .outline.

+

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">
+ +
+ + +
+ +
+

Containers

+

.container enable a centered viewport.

+

.container-fluid enable a 100% layout.

+
+ +
<body>
+  <main class="container"></main>
+</body>
+ +

Pico use the same breakpoints and viewports sizes as Bootstrap.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DeviceExtra smallSmallMediumLargeExtra large
Breakpoint<576px≥576px≥768px≥992px≥1200px
ViewportNone (auto)540px720px960px1140px
+
+

<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.

+
+ + +
+ +
+

Grids

+

.grid enable a minimal grid system with auto-layout columns.

+
+
+
+
1
+
2
+
3
+
4
+
+ +
<section class="grid">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</section>
+ +
+

Columns intentionally collapses for small and medium devices (below 992px).

+
+ + +
+ +
+

Horizontal scroller

+

<figure> act as a container to make any content horizontally scrollable.

+
+ +

Useful to have responsives <table>.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+ +
<figure>
+  <table>
+    ...
+  </table>
+</figure>
+ +
+ + +
+ +
+

Typography

+

All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.

+
+
+ + + + + + + + + + + + + + + + + + + + + +
DeviceExtra smallSmallMediumLargeExtra large
Root size rem16px17px18px19px20px
+
+

Headings:

+
+
+

Heading 1

+

32px on extra small devices, 40px extra large devices

+
+
+

Heading 2

+

28px on extra small devices, 35px extra large devices

+
+
+

Heading 3

+

24px on extra small devices, 30px extra large devices

+
+
+

Heading 4

+

20px on extra small devices, 25px extra large devices

+
+
+
Heading 5
+

18px on extra small devices, 22.5px extra large devices

+
+
+
Heading 6
+

16px on extra small devices, 20px extra large devices

+
+
+

Paragraph

+

16px on extra small devices, 20px extra large devices

+
+ +
<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+<p>Paragraph</p>
+ +
+

Inside a <header> all headings are 50% bigger.

+

Inside a <hgroup> all margin-bottom are collapsed.

+
+
+

Heading 2

+

Subtitle for heading 2

+
+ +
<hgroup>
+  <h2>Heading 2</h2>
+  <p>Subtitle for heading 2</p>
+<hgroup>
+ +
+

Inline text elements:

+
+
+
+

Abbr. abbr

+

Bold strong b

+

Italic i em cite

+

Deleted del

+

Inserted ins

+

Ctrl + S kbd

+
+
+

Highlighted mark

+

Strikethrough s

+

Small small

+

Text Sub sub

+

Text Sup sup

+

Underline u

+
+
+
+
+ + +
+ +
+

Buttons

+

The essential button in pure html, without .classes for the default style.

+
+
+ + + +
<button>Button</button>
+<input type="submit">
+ +
+

Buttons are width: 100%; by default. Use <a role="button"> if you need an inline element.

+
+ Link + Link + +
<a href="#" role="button">Link</a>
+<a href="#" role="button">Link</a>
+ +
+

Buttons come with a .secondary neutral style.

+
+ Link + + + + +
<a href="#" role="button" class="secondary">Link</a>
+<button>Button</button class="secondary">
+<input type="submit" class="secondary">
+<input type="reset">
+ +
+

Also includes the classic .outline style.

+
+ Link + Link + + + +
<a href="#" role="button" class="outline">Link</a>
+<a href="#" role="button" class="outline secondary">Link</a>
+<button class="outline">Button</button>
+<button class="outline secondary">Button</button>
+
+
+ + +
+ +
+

Forms

+

All form elements in pure html, without .classes and responsives, allowing forms to scale gracefully across devices and viewport sizes.

+
+

Input are width: 100%; by default. You can use .grid inside a form.

+

All natives form elements are fully customized and themables with CSS variables.

+
+
+
+
+ +
+
+ +
+
+ + + We'll never share your email with anyone else. + +
+ +

+<form>
+
+  <!-- Grid -->
+  <section class="grid">
+
+    <div>
+      <!-- Markup example 1: input is inside label -->
+      <label for="firstname">
+        First name
+        <input type="text" id="firstname" name="firstname" placeholder="First name" required>
+      </label>
+    </div>
+
+    <div>
+      <label for="lastname">
+        Last name
+        <input type="text" id="lastname" name="lastname" placeholder="Last name" required>
+      </label>
+    </div>
+
+  </section>
+
+  <!-- Markup example 2: input is after label -->
+  <label for="email">Email address</label>
+  <input type="email" id="email" name="email" placeholder="Email address" required>
+  <small>We'll never share your email with anyone else.</small>
+
+  <!-- Button -->
+  <button type="submit">Submit</button>
+
+</form>
+ +
+

Disabled and validation states:

+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
<input type="text" placeholder="Valid" valid>
+<input type="text" placeholder="Invalid" invalid>
+<input type="text" placeholder="Disabled" disabled>
+<input type="text" value="Readonly" readonly>
+ +
+

<fieldset> are unstyled and act as a container for radios and checkboxes providing a consistent margin-bottom for the set.

+

role="switch" on a type="checkbox" enable a custom switch.

+
+ + +
+ Gender + + + +
+
+ +
+
+ +
+ +
<!-- Select -->
+<label for="country">Country</label>
+<select id="country">
+  <option selected>Choose...</option>
+  <option>...</option>
+</select>
+
+<!-- Radios -->
+<fieldset>
+  <legend>Gender</legend>
+  <label for="male">
+    <input type="radio" id="male" name="gender" value="male" checked>
+    Male
+  </label>
+  <label for="female">
+    <input type="radio" id="female" name="gender" value="female">
+    Female
+  </label>
+  <label for="other">
+    <input type="radio" id="other" name="gender" value="other">
+    Other
+  </label>
+</fieldset>
+
+<!-- Checkbox -->
+<fieldset>
+  <label for="terms">
+    <input type="checkbox" id="terms" name="terms">
+    I agree to the Terms and Conditions
+  </label>
+</fieldset>
+
+<!-- Switch -->
+<fieldset>
+  <label for="switch">
+    <input type="checkbox" id="switch" name="switch" role="switch">
+    Publish on my profile
+  </label>
+</fieldset>
+ +
+
+ + +
+ +
+

Accordions

+

Toggle sections of content in pure HTML, without Javascript.

+
+
+
+ Collapsible elements 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.

+
+
+ Collapsible elements 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>Collapsible elements 1</summary>
+  <p>...</p>
+</details>
+
+<details>
+  <summary>Collapsible elements 2</summary>
+  <ul>
+    <li>...</li>
+  </ul>
+</details>
+ +
+ +
+ + +
+ +
+

Cards

+

A flexible container with graceful spacings across devices and viewport sizes.

+
+
+ I'm a card! +
+ +
<article>
+  I'm a card!
+</article>
+ +
+ + + + + +
+ +
+

Tooltips

+

Enable tooltips everywhere in pure HTML, without Javascript.

+
+
+

Tooltip on a link

+

Tooltip on inline element

+

+ +
<p>Tooltip on a <a href="#" data-tooltip="Tooltip">link</a></p>
+<p>Tooltip on <em data-tooltip="Tooltip">inline element</em></p>
+<p><button data-tooltip="Tooltip">Tooltip on a button</button></p>
+ +
+
+ + +
+ +
+

+ We + + + + .classes +

+
+ +

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes.

+

But, off 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>
+ +
+
+ + + + +
+ +
+ + + + + + + diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js new file mode 100644 index 00000000..299bb272 --- /dev/null +++ b/docs/js/pico.docs.js @@ -0,0 +1,4 @@ +//@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 new file mode 100644 index 00000000..464032b0 --- /dev/null +++ b/docs/js/pico.docs.min.js @@ -0,0 +1 @@ +!function(){function e(e){if("light"==e)var t=r.button.on;else t=r.button.off;document.querySelector("html").setAttribute("data-theme",e),document.querySelector(r.selector).innerHTML=t,document.querySelector(r.selector).setAttribute("aria-label",t.replace(/<[^>]*>?/gm,"")),r.currentTheme=e}var t,r={button:{element:"BUTTON",class:"secondary switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"main",selector:"button.switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};(t=document.createElement(r.button.element)).className=r.button.class,document.querySelector(r.target).after(t),e(r.currentTheme),document.querySelector(r.selector).addEventListener("click",function(){"light"==r.currentTheme?e("dark"):e("light")},!1)}(),function(){function r(e){event.preventDefault();var t,r,o=e.href.split("#");o=function(e){mobile=window.matchMedia("(max-width: 991.99px)"),mobile.matches||"docs"==e&&(e="start");return e}(o[1]),o=document.getElementById(o),r=o,t=Math.floor(r.getBoundingClientRect().top),window.scrollBy({top:t,left:0,behavior:"smooth"})}!function(e){for(var t=0;t"+(o+1)+"",r+=" <div>"+(o+1)+"</div>\n";document.querySelector(n.targetGrid).innerHTML=t,document.querySelector(n.targetCode).innerHTML='<section class="grid">\n'+r+"</section>"}var t,n={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(n.targetButtons).before(t),document.querySelector(n.selectorAdd).addEventListener("click",function(){n.columnsCurrentn.columnsMin&&(n.columnsCurrent--,e(n.columnsCurrent))},!1)}(),function(){function i(e,t){!function(e,t){for(var r=document.querySelectorAll(g.selectorTheme+" .name"),o=0;o>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var e,t,r,g={list:"json/material-colors.json",target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization"};e=g.list,t=function(e){!function(t){var e="",r="";for(var o in t)t.hasOwnProperty(o)&&(e+='',r+='button[data-color="'+o+'"] {background-color: '+t[o][600]+'; }[data-theme="light"] button[data-color="'+o+'"]:hover, [data-theme="light"] button[data-color="'+o+'"]:active, [data-theme="light"] button[data-color="'+o+'"]:focus {background-color: '+t[o][700]+'; }[data-theme="dark"] button[data-color="'+o+'"]:hover, [data-theme="dark"] button[data-color="'+o+'"]:active, [data-theme="dark"] button[data-color="'+o+'"]:focus {background-color: '+t[o][500]+"; }");var n=document.createElement("FIGURE");n.innerHTML=e,document.querySelector(g.target).after(n);for(var c=document.querySelectorAll(g.selectorButton),l=0;l= 200 && request.status < 400) { + var data = JSON.parse(request.responseText); + callback(data); + } + else { + return 'error'; + } + }; + request.onerror = function() { + return 'error'; + }; + request.send(); + } + + + + /** + * Generate Buttons + * + * @param {object} data + */ + + function generateButtons(data) { + + // Vars + var colorButtons = ''; + var colorStyles = ''; + + // Colors + for (var color in data) { + if (data.hasOwnProperty(color)) { + + // Buttons + colorButtons += ''; + + // CSS Styles + colorStyles += 'button[data-color="'+ color +'"] {' + + 'background-color: '+ data[color]['600'] +'; ' + + '}' + + + '[data-theme="light"] button[data-color="'+ color +'"]:hover, ' + + '[data-theme="light"] button[data-color="'+ color +'"]:active, ' + + '[data-theme="light"] button[data-color="'+ color +'"]:focus {' + + 'background-color: '+ data[color]['700'] +'; ' + + '}' + + + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, ' + + '[data-theme="dark"] button[data-color="'+ color +'"]:active, ' + + '[data-theme="dark"] button[data-color="'+ color +'"]:focus {' + + 'background-color: '+ data[color]['500'] +'; ' + + '}' + } + } + + // Insert buttons + var buttons = document.createElement('FIGURE'); + buttons.innerHTML = colorButtons; + document.querySelector(colors.target).after(buttons); + + // Buttons listeners + var buttonsAll = document.querySelectorAll(colors.selectorButton); + for (var i = 0; i < buttonsAll.length; i++) { + buttonsAll[i].addEventListener('click', function(event) { + buttonColor = event.target.getAttribute('data-color'); + pickColor(buttonColor, data[buttonColor]); + }, false); + } + + // Insert CSS Styles + var styles = document.createElement('STYLE'); + styles.setAttribute('title', 'color-picker'); + styles.innerHTML = colorStyles; + document.querySelector('head link').after(styles); + } + + + + /** + * Pick Color + * + * @param {string} name + * @param {object} data + */ + + function pickColor(name, data) { + + // Generate theme + generateTheme(name, data); + + // Clear picked state + var buttonsAll = document.querySelectorAll(colors.selectorButton); + for (var i = 0; i < buttonsAll.length; i++) { + buttonsAll[i].removeAttribute("class"); + } + + // Set Picked state + var buttonPicked = document.querySelector(colors.selectorButton + '[data-color="' + name + '"]'); + buttonPicked.setAttribute('class', 'picked'); + } + + + + /** + * Generate theme + * + * @param {string} name + * @param {object} data + */ + + function generateTheme(name, data) { + + // Code and Color name + // TODO: Create a function + var cName = document.querySelectorAll(colors.selectorTheme + ' .name'); + for (var i = 0; i < cName.length; ++i) { + cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' '; + } + var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500'); + for (var i = 0; i < c500.length; ++i) { + c500[i].innerHTML = data[500]; + } + var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600'); + for (var i = 0; i < c600.length; ++i) { + c600[i].innerHTML = data[600]; + } + var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700'); + for (var i = 0; i < c700.length; ++i) { + c700[i].innerHTML = data[700]; + } + var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light'); + for (var i = 0; i < c600OutlineLight.length; ++i) { + c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125); + } + var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark'); + for (var i = 0; i < c600OutlineDark.length; ++i) { + c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25); + } + var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse'); + for (var i = 0; i < inverse.length; ++i) { + inverse[i].innerHTML = data['inverse']; + } + + // CSS Style + var generatedStyles = '[data-theme="generated"] {' + + '--primary:' + data[600] + ';' + + '--h4:' + data[700] + ';' + + '--primary-hover:' + data[700] + ';' + + '--primary-focus:' + hexToRgbA(data[600], .125) + ';' + + '--primary-inverse:' + data['inverse'] + ';' + + '}' + + + '@media only screen and (prefers-color-scheme: dark) {' + + ':root:not([data-theme="light"]) [data-theme="generated"] {' + + '--primary:' + data[600] + ';' + + '--h4:' + data[300] + ';' + + '--primary-hover:' + data[500] + ';' + + '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + + '--primary-inverse:' + data['inverse'] + ';' + + '}' + + '}' + + + '[data-theme="dark"] [data-theme="generated"] {' + + '--primary:' + data[600] + ';' + + '--h4:' + data[300] + ';' + + '--primary-hover:' + data[500] + ';' + + '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + + '--primary-inverse:' + data['inverse'] + ';' + + '}'; + + // Insert CSS Styles + var selectorGenerated = document.querySelector('style:not([title="color-picker"])'); + if(typeof(selectorGenerated) != 'undefined' && selectorGenerated != null) { + selectorGenerated.innerHTML = generatedStyles; + } + else { + var styles = document.createElement('STYLE'); + styles.innerHTML = generatedStyles; + document.querySelector('head link').after(styles); + } + document.querySelector(colors.selectorTheme + ' .grid').setAttribute('data-theme', name); + } + + + + /** + * Hexadecimal to Rgba + * + * @param {string} hex + * @param {number} alpha + * @return {rgba} + */ + + function hexToRgbA(hex, alpha){ + var c; + if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { + c= hex.substring(1).split(''); + if(c.length== 3) { + c= [c[0], c[0], c[1], c[1], c[2], c[2]]; + } + c= '0x' + c.join(''); + return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')'; + } + throw new Error('Bad Hex'); + } + + +})(); diff --git a/docs/js/src/grid.js b/docs/js/src/grid.js new file mode 100644 index 00000000..ef62d4b8 --- /dev/null +++ b/docs/js/src/grid.js @@ -0,0 +1,131 @@ +/*! + * Grid Interaction + * + * Pico.css - https://picocss.com + * Copyright 2019 - Licensed under MIT + */ + +(function() { + + /** + * Config + */ + + var grid = { + columnsCurrent: 4, + columnsMin: 1, + columnsMax: 12, + targetButtons: '#grids article', // Buttons inserted before target + targetGrid: '#grids .grid', // Grid target + targetCode: '#grids pre code', // Code target + selectorAdd: '#grids button.add', // Add button selector in Dom + selectorRemove: '#grids button.remove', // Remove Button selector in Dom + }; + + + + /** + * Init + */ + + initGridInteraction(); + + + + /** + * Init grid interaction + */ + + function initGridInteraction() { + + // Add buttons + addButtons(); + + // Add button listener + document.querySelector(grid.selectorAdd).addEventListener('click', function() { + addColumn(); + }, false); + + // Remove button listener + document.querySelector(grid.selectorRemove).addEventListener('click', function() { + removeColumn(); + }, false); + } + + + + /** + * Add buttons + */ + + function addButtons() { + var buttons = document.createElement('P'); + buttons.innerHTML = '' + + + ''; + document.querySelector(grid.targetButtons).before(buttons); + } + + + + /** + * Add column + */ + + function addColumn() { + if (grid.columnsCurrent < grid.columnsMax) { + grid.columnsCurrent++; + generateGrid(grid.columnsCurrent); + } + } + + + + /** + * Remove column + */ + + function removeColumn() { + if (grid.columnsCurrent > grid.columnsMin) { + grid.columnsCurrent--; + generateGrid(grid.columnsCurrent); + } + } + + + + /** + * Generate grid + * + * @param {number} cols + */ + + function generateGrid(cols) { + + var colsHTML = ''; + var colsCode = ''; + var colsCodePref = '<section class="grid">\n'; + var colsCodeSuff = '</section>'; + + for (var i=0; i'; + colsCode += ' <div>' + (i+1) + '</div>\n'; + } + + document.querySelector(grid.targetGrid).innerHTML = colsHTML; + document.querySelector(grid.targetCode).innerHTML = colsCodePref+colsCode+colsCodeSuff; + } + +})(); diff --git a/docs/js/src/internal-scroll.js b/docs/js/src/internal-scroll.js new file mode 100644 index 00000000..a07b51ed --- /dev/null +++ b/docs/js/src/internal-scroll.js @@ -0,0 +1,95 @@ +/*! + * 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; iTurn on dark mode', + off: 'Turn off dark mode' + }, + target: 'main', // Button inserted after target + selector: 'button.switcher', // Button selector in Dom + currentTheme: systemColorScheme() + }; + + + + /** + * Init + */ + + themeSwitcher(); + + + + /** + * Get System Color Scheme + * + * @return {string} + */ + + function systemColorScheme() { + if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + return 'dark'; + } + else { + return 'light'; + } + } + + + + /** + * Display Theme Switcher + */ + + function themeSwitcher() { + + // Insert Switcher + var button = document.createElement(switcher.button.element); + button.className = switcher.button.class; + document.querySelector(switcher.target).after(button); + + // Set Current Theme + setTheme(switcher.currentTheme); + + // Click Listener on Switcher + document.querySelector(switcher.selector).addEventListener('click', function() { + + // Switch Theme + if (switcher.currentTheme == 'light') { + setTheme('dark'); + } + else { + setTheme('light'); + } + }, false); + + } + + + + /** + * Set Theme + * + * @param {string} set + */ + + function setTheme(set) { + + // Text toggle + if (set == 'light') { + var label = switcher.button.on; + } + else { + var label = switcher.button.off; + } + + // Apply theme + document.querySelector('html').setAttribute('data-theme', set); + document.querySelector(switcher.selector).innerHTML = label; + document.querySelector(switcher.selector).setAttribute('aria-label', stripTags(label)); + switcher.currentTheme = set; + } + + + + /** + * Strip tags + * + * @param {string} html + * @return {string} + */ + + function stripTags(html) { + return html.replace(/<[^>]*>?/gm, ''); + } + +})(); diff --git a/docs/json/material-colors.json b/docs/json/material-colors.json new file mode 100644 index 00000000..5283fa38 --- /dev/null +++ b/docs/json/material-colors.json @@ -0,0 +1,300 @@ +{ + "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" + } +} diff --git a/docs/scss/components/_card-code.scss b/docs/scss/components/_card-code.scss new file mode 100644 index 00000000..0eb6228a --- /dev/null +++ b/docs/scss/components/_card-code.scss @@ -0,0 +1,51 @@ +/** + * Docs: Code inside
+ */ + +// Custom spacings +article pre { + margin-top: $spacing-block; + margin-bottom: -$spacing-gutter*2; + + @if map-get($breakpoints, "sm") and + map-get($spacing-factor, "sm") { + + @media (min-width: map-get($breakpoints, "sm")) { + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm")); + margin-bottom: 0; + } + } + + @if map-get($breakpoints, "md") and + map-get($spacing-factor, "md") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "md")) { + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md")); + margin: -$spacing-block*map-get($spacing-factor, "md"); + margin-top: $spacing-block*map-get($spacing-factor, "md"); + } + } + + @if map-get($breakpoints, "lg") and + map-get($spacing-factor, "lg") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "lg")) { + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg")); + margin: -$spacing-block*map-get($spacing-factor, "lg"); + margin-top: $spacing-block*map-get($spacing-factor, "lg"); + } + } + + @if map-get($breakpoints, "xl") and + map-get($spacing-factor, "xl") and + $enable-responsive-spacings { + + @media (min-width: map-get($breakpoints, "xl")) { + padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl")); + margin: -$spacing-block*map-get($spacing-factor, "xl"); + margin-top: $spacing-block*map-get($spacing-factor, "xl"); + } + } +} diff --git a/docs/scss/components/_nav.scss b/docs/scss/components/_nav.scss new file mode 100644 index 00000000..d18062e1 --- /dev/null +++ b/docs/scss/components/_nav.scss @@ -0,0 +1,45 @@ +/** + * Docs: Navs + */ + +body > nav { + -webkit-backdrop-filter: saturate(180%) blur(20px); + z-index: 99; + position: fixed; + top: 0; + right: 0; + left: 0; + backdrop-filter: saturate(180%) blur(20px); + background-color: var(--nav-background); + box-shadow: 0px 1px 0 var(--nav-border); + + li a { + border-radius: 0; + } + + ul:first-of-type li { + + // Brand + &:first-of-type { + a { + width: 3.5rem; + height: 3.5rem; + margin-left: -$spacing-gutter; + padding: 0; + background: var(--h1); + color: var(--background); + } + } + + // Title + &:nth-of-type(2) { + display: none; + margin-left: $spacing-gutter; + color: var(--muted-text); + + @media (min-width: map-get($breakpoints, "lg")) { + display: inline; + } + } + } +} diff --git a/docs/scss/components/_theme-switcher.scss b/docs/scss/components/_theme-switcher.scss new file mode 100644 index 00000000..e36b4b0e --- /dev/null +++ b/docs/scss/components/_theme-switcher.scss @@ -0,0 +1,70 @@ +/** + * Docs: Theme switcher + */ + +button.switcher { + position: fixed; + right: $spacing-gutter/2; + bottom: $spacing-gutter; + width: auto; + max-width: 1rem + $spacing-gutter*2; + margin-bottom: 0; + padding: .75rem; + border-radius: 2rem; + line-height: 1; + text-align: right; + box-shadow: var(--card-shadow); + + &::after { + display: inline-block; + width: 1rem; + height: 1rem; + border: 2px solid currentColor; + border-radius: 50%; + background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%); + vertical-align: bottom; + content: ''; + transition: transform $transition; + } + + i { + display: inline-block; + max-width: 0; + padding: 0; + overflow: hidden; + font-size: .875rem; + font-style: normal; + white-space: nowrap; + } + + &:hover, + &:focus { + max-width: 100%; + transition: max-width $transition, + background-color $transition, + color $transition; + } + + &:hover { + + &::after { + transform: rotate(180deg); + } + + i { + max-width: 100%; + padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4); + transition: max-width $transition, + padding $transition; + } + } + + &:focus { + box-shadow: var(--card-shadow), + 0 0 0 0.2rem var(--secondary-focus); + } + + @media (min-width: map-get($breakpoints, "sm")) { + right: $spacing-gutter; + } +} diff --git a/docs/scss/content/_code.scss b/docs/scss/content/_code.scss new file mode 100644 index 00000000..e9e89aeb --- /dev/null +++ b/docs/scss/content/_code.scss @@ -0,0 +1,107 @@ +/** + * Docs: Code + */ + +// Custom spacings for 
 (vertically aligned with 
 content)
+pre {
+
+  @if map-get($breakpoints, "sm") and
+    map-get($spacing-factor, "sm") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm"));
+    }
+  }
+
+  @if map-get($breakpoints, "md") and
+    map-get($spacing-factor, "md") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "md")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md"));
+    }
+  }
+
+  @if map-get($breakpoints, "lg") and
+    map-get($spacing-factor, "lg") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg"));
+    }
+  }
+
+  @if map-get($breakpoints, "xl") and
+    map-get($spacing-factor, "xl") and
+    $enable-responsive-spacings {
+
+    @media (min-width: map-get($breakpoints, "xl")) {
+      padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl"));
+    }
+  }
+}
+
+// Badge for Valid & Invalid code
+[data-theme="invalid"],
+[data-theme="valid"] {
+  position: relative;
+  margin-bottom: 0 !important;
+
+  // Label
+  &:before {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: -$spacing-gutter;
+    padding: .375rem .75rem;
+    border-radius: 0;
+    color: var(--primary-inverse);
+    font-size: 14px;
+    line-height: 1;
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+      right: 0;
+    }
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      top: $spacing-gutter;
+      right: $spacing-gutter;
+    }
+  }
+
+  // Spacing for Valid & Invalid badge
+  pre {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+// Color for Valid & Invalid code
+[data-theme="invalid"] {
+  &:before {
+    background: var(--invalid);
+    content: 'Bulky';
+  }
+
+  pre {
+    border-color: var(--invalid);
+  }
+}
+
+[data-theme="valid"] {
+  &:before {
+    background: var(--valid);
+    content: 'Great';
+  }
+
+  pre {
+    border-color: var(--valid);
+  }
+}
+
+section[title="love"] [data-theme="invalid"] {
+  &:before {
+    content: 'Not so great';
+  }
+}
diff --git a/docs/scss/layout/_layout.scss b/docs/scss/layout/_layout.scss
new file mode 100644
index 00000000..b6f593ac
--- /dev/null
+++ b/docs/scss/layout/_layout.scss
@@ -0,0 +1,242 @@
+/**
+ * Docs: Global layout
+ */
+
+$navHeight: 3.5rem;
+
+
+// Docs: Commons
+// ––––––––––––––––––––
+
+section > hgroup {
+  margin-bottom: $spacing-typography*2;
+
+  p {
+    color: var(--muted-text);
+    font-size: 1.125rem;
+  }
+}
+a[role=button] {
+  margin-right: $spacing-gutter/4;
+  margin-bottom: $spacing-typography;
+}
+
+
+// Main (Grid)
+// ––––––––––––––––––––
+
+body > main {
+  padding-top:map-get($spacing-factor, "xs") + $navHeight;
+
+  @media (min-width: map-get($breakpoints, "sm")) {
+    padding-top: map-get($spacing-factor, "sm") + $navHeight;
+  }
+
+  @media (min-width: map-get($breakpoints, "md")) {
+    padding-top: map-get($spacing-factor, "md") + $navHeight;
+  }
+
+  @media (min-width: map-get($breakpoints, "lg")) {
+    grid-column-gap: $spacing-gutter*4;
+    display: grid;
+    grid-template-columns: 200px auto;
+    padding-top: map-get($spacing-factor, "lg") + $navHeight;
+  }
+
+  @media (min-width: map-get($breakpoints, "xl")) {
+    padding-top: map-get($spacing-factor, "xl") + $navHeight;
+  }
+
+  > * {
+    min-width: 0; // HACK for childs in overflow
+  }
+}
+
+
+// Anchors hacks for internal links
+// ––––––––––––––––––––
+
+a[name]:not([href])::before {
+  display: block;
+  height: map-get($spacing-factor, "xs") + $navHeight;
+  margin-top: -(map-get($spacing-factor, "xs")+ $navHeight);
+  content: '';
+
+
+  @media (min-width: map-get($breakpoints, "sm")) {
+    height: map-get($spacing-factor, "sm") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "sm") + $navHeight);
+  }
+
+  @media (min-width: map-get($breakpoints, "md")) {
+    height: map-get($spacing-factor, "md") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "md") + $navHeight);
+  }
+
+  @media (min-width: map-get($breakpoints, "lg")) {
+    height: map-get($spacing-factor, "lg") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "lg") + $navHeight);
+  }
+
+  @media (min-width: map-get($breakpoints, "xl")) {
+    height: map-get($spacing-factor, "xl") + $navHeight;
+    margin-top: -(map-get($spacing-factor, "xl") + $navHeight);
+  }
+}
+
+
+// Aside
+// ––––––––––––––––––––
+
+main > aside {
+
+
+  nav {
+    width: 100%;
+    margin-bottom: $spacing-block;
+
+    h1 {
+      margin-bottom: $spacing-typography;
+    }
+
+    @media (min-width: map-get($breakpoints, "lg")) {
+      position: fixed;
+      width: 200px;
+      max-height: calc(100vh - 5.5rem);
+      margin-bottom: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+
+      h1 {
+        display: none;
+      }
+    }
+  }
+
+  li, summary {
+    padding-top: 0;
+    padding-bottom: 0;
+    font-size: 16px;
+  }
+  a,
+  a.secondary {
+    &:focus {
+      background-color: transparent;
+      color: var(--primary-hover);
+    }
+  }
+
+  details {
+    padding-bottom: .25rem;
+    border-bottom: none;
+  }
+
+  details summary {
+    font-weight: 300;
+    text-transform: uppercase;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+[role=document] {
+  section > h1,
+  section > h2,
+  section > h3 {
+    line-height: 1;
+  }
+}
+
+
+// Docs: Customization
+// ––––––––––––––––––––
+
+#customization {
+
+  figure {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    margin-bottom: 0;
+    overflow: hidden;
+
+    @media (min-width: map-get($breakpoints, "sm")) {
+    grid-template-columns: repeat(18, 1fr);
+    grid-template-rows: 1fr;
+    border-top-right-radius: $round;
+    border-top-left-radius: $round;
+    }
+
+    ~ article {
+    margin-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    }
+
+  button {
+    margin-bottom: 0;
+    padding: 0;
+    padding-top: 100%;
+    border:none;
+    border-radius: 0;
+
+      &:focus {
+        box-shadow: none;
+      }
+
+      &.picked {
+        // Source: https://feathericons.com/
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: .66rem auto;
+        box-shadow: inset 0 0 1rem 0 rgba(0,0,0,0.25);
+      }
+      &[data-color="lime"],
+      &[data-color="yellow"],
+      &[data-color="amber"] {
+        &.picked {
+          // Source: https://feathericons.com/
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+        }
+      }
+    }
+  }
+
+  h4 {
+    transition: color $transition;
+  }
+
+  pre[data-theme="generated"] {
+    border-color: var(--primary);
+  }
+}
+
+
+// Docs: Grids
+// ––––––––––––––––––––
+
+#grids {
+
+  button {
+    display: inline-block;
+    width: auto;
+    margin-right: .5rem;
+
+    svg {
+      stroke: var(--secondary);
+      margin-right: .5rem;
+      border: 3px solid currentColor;
+      border-radius: 1rem;
+      background: currentColor;
+    }
+  }
+
+  .grid > * {
+    padding: ($spacing-gutter/2) 0;
+    background: var(--code-background);
+    text-align: center;
+  }
+}
diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss
new file mode 100644
index 00000000..8cc94531
--- /dev/null
+++ b/docs/scss/pico.docs.scss
@@ -0,0 +1,22 @@
+/*!
+ * Pico: Customs styles for Docs
+ */
+
+// Config
+@import "../../scss/colors";
+@import "../../scss/variables";
+
+// Theming
+@import "themes/light";
+@import "themes/dark";
+
+// Layout
+@import "layout/layout";
+
+// Content
+@import "content/code";
+
+// Components
+@import "components/nav";
+@import "components/card-code";
+@import "components/theme-switcher";
diff --git a/docs/scss/themes/_dark.scss b/docs/scss/themes/_dark.scss
new file mode 100644
index 00000000..56336cea
--- /dev/null
+++ b/docs/scss/themes/_dark.scss
@@ -0,0 +1,23 @@
+/**
+ * Dark theme (Auto) [Additions for docs]
+ * Automatically enabled if user has Dark mode enabled
+ */
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --nav-background: #{rgba(darken($grey-900, 6%), .8)};
+    --nav-border:     #{rgba($grey-500, .2)};
+  }
+}
+
+
+
+/**
+ * Dark theme (Forced) [Additions for docs]
+ * Enabled if forced with data-theme="dark"
+ */
+
+[data-theme="dark"] {
+  --nav-background: #{rgba(darken($grey-900, 6%), .8)};
+  --nav-border:     #{rgba($grey-500, .2)};
+}
diff --git a/docs/scss/themes/_light.scss b/docs/scss/themes/_light.scss
new file mode 100644
index 00000000..d7a40a4f
--- /dev/null
+++ b/docs/scss/themes/_light.scss
@@ -0,0 +1,10 @@
+/**
+ * Light theme (Default) [Additions for docs]
+ * Can be forced with data-theme="light"
+ */
+
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+  --nav-background: #{rgba($white, .7)};
+  --nav-border:     #{rgba($grey-500, .2)};
+}