mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
696 lines
34 KiB
HTML
696 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>Preview • Pico CSS</title>
|
|
<meta name="description" content="A pure HTML example, without dependencies." />
|
|
<!-- Backwards compatability -->
|
|
<link rel="icon" sizes="16x16 24x24 32x32 64x64" href="favicon.ico">
|
|
<!-- All other browsers -->
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
|
<!-- Google Search and Android Chrome -->
|
|
<link rel="icon" type="image/png" sizes="48x48" href="favicon-48x48.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="favicon-192x192.png">
|
|
<!-- iPhone -->
|
|
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="favicon-180x180.png">
|
|
<!-- iPad Retina -->
|
|
<link rel="apple-touch-icon" type="image/png" sizes="167x167" href="favicon-167x167.png">
|
|
<!-- Other iPads -->
|
|
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="favicon-152x152.png">
|
|
<!-- Web application manifest -->
|
|
<link rel="manifest" href="manifest.json">
|
|
|
|
<!-- Pico.css -->
|
|
<link rel="stylesheet" href="pico.min.css" />
|
|
<link rel="stylesheet" href="pico.colors.min.css" />
|
|
|
|
<!--
|
|
Yohn's Simple CSS Class helpers
|
|
I might add these to the main PicoCSS later
|
|
-->
|
|
<link rel="stylesheet" href="basics.css" />
|
|
<style>
|
|
:root {
|
|
--pico-logo-wordmark: #fff;
|
|
--pico-logo-small-sparkles: #ff9500;
|
|
--pico-logo-big-sparkle: #ffbf00;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row-fluid">
|
|
<div class="col-12 col-md-3 col-lg-2">
|
|
<!-- Header -->
|
|
<header>
|
|
<hgroup>
|
|
<h1>
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="pico-logo" viewBox="0 0 370 164">
|
|
<path fill="var(--pico-logo-wordmark)" d="m0,164l0,-101.28l21.18,0l1.29,13.31l0,87.97l-22.47,0zm42.93,-27.2c-5.95,0 -10.95,-1.49 -14.98,-4.49c-4.04,-3.08 -7.06,-7.47 -9.08,-13.16c-2.01,-5.69 -3.02,-12.44 -3.02,-20.26c0,-7.91 1.01,-14.66 3.02,-20.25c2.02,-5.69 5.04,-10.03 9.08,-13.02c4.03,-3.09 9.03,-4.63 14.98,-4.63c6.72,0 12.53,1.54 17.43,4.63c4.9,2.99 8.64,7.33 11.24,13.02c2.59,5.59 3.89,12.34 3.89,20.25c0,7.82 -1.3,14.57 -3.89,20.26c-2.6,5.69 -6.34,10.08 -11.24,13.16c-4.9,3 -10.71,4.49 -17.43,4.49zm-5.76,-20.83c2.88,0 5.42,-0.73 7.63,-2.17s3.99,-3.43 5.33,-5.94c1.35,-2.6 2.02,-5.59 2.02,-8.97c0,-3.37 -0.62,-6.31 -1.87,-8.82c-1.25,-2.61 -3.03,-4.63 -5.33,-6.08c-2.21,-1.45 -4.76,-2.17 -7.64,-2.17c-2.88,0 -5.47,0.72 -7.78,2.17c-2.21,1.45 -3.94,3.47 -5.18,6.08c-1.25,2.6 -1.88,5.54 -1.88,8.82c0,3.38 0.63,6.37 1.88,8.97c1.24,2.51 2.97,4.49 5.18,5.94c2.21,1.44 4.76,2.17 7.64,2.17zm50.63,19.09l0,-72.34l22.47,0l0,72.34l-22.47,0zm11.24,-81.6c-3.36,0 -6.34,-1.25 -8.93,-3.76c-2.5,-2.6 -3.75,-5.59 -3.75,-8.97c0,-3.57 1.25,-6.56 3.75,-8.97c2.59,-2.51 5.57,-3.76 8.93,-3.76c3.45,0 6.43,1.25 8.93,3.76c2.5,2.41 3.74,5.4 3.74,8.97c0,3.38 -1.24,6.37 -3.74,8.97c-2.5,2.51 -5.48,3.76 -8.93,3.76zm63.15,83.34c-7.69,0 -14.55,-1.59 -20.6,-4.77c-5.96,-3.28 -10.62,-7.77 -13.98,-13.46c-3.36,-5.79 -5.04,-12.35 -5.04,-19.68c0,-7.42 1.68,-13.98 5.04,-19.67c3.36,-5.69 7.97,-10.13 13.83,-13.31c5.96,-3.28 12.78,-4.92 20.46,-4.92c7.39,0 14.17,1.88 20.31,5.64c6.15,3.76 10.57,9.21 13.26,16.35l-21.33,7.23c-1.05,-2.31 -2.83,-4.19 -5.33,-5.64c-2.4,-1.54 -5.09,-2.31 -8.06,-2.31c-2.98,0 -5.62,0.72 -7.93,2.17c-2.2,1.35 -3.98,3.28 -5.33,5.78c-1.24,2.51 -1.87,5.4 -1.87,8.68s0.63,6.18 1.87,8.68c1.35,2.42 3.17,4.35 5.48,5.79c2.4,1.45 5.09,2.17 8.07,2.17c2.97,0 5.66,-0.77 8.06,-2.31s4.18,-3.57 5.33,-6.08l21.32,7.23c-2.78,7.24 -7.25,12.79 -13.39,16.64c-6.05,3.86 -12.78,5.79 -20.17,5.79zm78.63,0c-7.58,0 -14.31,-1.59 -20.16,-4.77c-5.77,-3.28 -10.33,-7.77 -13.69,-13.46c-3.27,-5.69 -4.9,-12.25 -4.9,-19.68c0,-7.42 1.63,-13.98 4.9,-19.67c3.26,-5.69 7.78,-10.13 13.54,-13.31c5.86,-3.28 12.49,-4.92 19.88,-4.92c7.59,0 14.26,1.64 20.03,4.92c5.85,3.18 10.42,7.62 13.68,13.31c3.27,5.69 4.9,12.25 4.9,19.67c0,7.43 -1.63,13.99 -4.9,19.68c-3.26,5.69 -7.78,10.18 -13.54,13.46c-5.67,3.18 -12.25,4.77 -19.74,4.77zm-0.14,-21.41c2.98,0 5.52,-0.68 7.63,-2.03c2.21,-1.44 3.94,-3.37 5.19,-5.79c1.25,-2.5 1.87,-5.4 1.87,-8.68c0,-3.28 -0.67,-6.12 -2.01,-8.53c-1.25,-2.51 -2.98,-4.44 -5.19,-5.79c-2.21,-1.45 -4.75,-2.17 -7.63,-2.17c-2.89,0 -5.43,0.72 -7.64,2.17c-2.21,1.35 -3.94,3.28 -5.19,5.79c-1.24,2.41 -1.87,5.25 -1.87,8.53c0,3.19 0.63,6.03 1.87,8.54c1.25,2.51 2.98,4.49 5.19,5.93c2.31,1.35 4.9,2.03 7.78,2.03z"></path>
|
|
<path d="m337.67,104.6a2,2 0 0 0 -1.15,1.15l-7.81,20.32c-0.66,1.71 -3.08,1.71 -3.74,0l-7.81,-20.32a2,2 0 0 0 -1.15,-1.15l-20.32,-7.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l20.32,-7.81a2,2 0 0 0 1.15,-1.15l7.81,-20.32c0.66,-1.71 3.08,-1.71 3.74,0l7.81,20.32c0.2,0.53 0.62,0.95 1.15,1.15l20.32,7.81c1.71,0.66 1.71,3.08 0,3.74l-20.32,7.81z" fill="var(--pico-logo-big-sparkle)"></path>
|
|
<path fill="var(--pico-logo-small-sparkles)" d="m358.41,59.99c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z"></path>
|
|
<path fill="var(--pico-logo-small-sparkles)" d="m302.54,63.87a2,2 0 0 0 -1.15,1.15l-2.81,7.32c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81z"></path>
|
|
<path d="m317.46,37.88c-0.66,1.71 -3.08,1.71 -3.74,0l-2.81,-7.32a2,2 0 0 0 -1.15,-1.15l-7.32,-2.81c-1.71,-0.66 -1.71,-3.08 0,-3.74l7.32,-2.81a2,2 0 0 0 1.15,-1.15l2.81,-7.32c0.66,-1.71 3.08,-1.71 3.74,0l2.81,7.32c0.2,0.53 0.62,0.95 1.15,1.15l7.32,2.81c1.71,0.66 1.71,3.08 0,3.74l-7.32,2.81a2,2 0 0 0 -1.15,1.15l-2.81,7.32z" fill="var(--pico-logo-big-sparkle)"></path>
|
|
</svg>
|
|
</h1>
|
|
<p>A Pico CSS + example with addition to the standard Pico CSS library.</p>
|
|
<p>Demo page from <a href="https://picocss.com/docs/modal#utilities">picocss.com model docs</a></p>
|
|
</hgroup>
|
|
<details class="dropdown">
|
|
<summary role="button" class="secondary">Theme</summary>
|
|
<ul>
|
|
<li><a href="#" data-theme-switcher="auto">Auto</a></li>
|
|
<li><a href="#" data-theme-switcher="light">Light</a></li>
|
|
<li><a href="#" data-theme-switcher="dark">Dark</a></li>
|
|
</ul>
|
|
</details>
|
|
<aside>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#hamburger-menu">Hamburger Menu</a></li>
|
|
<li><a href="#tab-regions">Tabs [role="region"]</a></li>
|
|
<li><a href="#tooltip">Tooltip</a></li>
|
|
<li><a href="#floating-labels">Floating Labels [role="form"]</a></li>
|
|
<li><a href="#validation">Validation</a></li>
|
|
<li><a href="#group">Group</a></li>
|
|
<li><a href="#rows">Row</a></li>
|
|
<li><a href="#row-offsets">Row Offset</a></li>
|
|
<li><a href="#row-alignments">Row Alignments</a></li>
|
|
<li><a href="#row-breakpoints">Row Breakpoints</a></li>
|
|
<li><a href="#modal">Modals</a></li>
|
|
<li><a href="#notifications">Notifications</a></li>
|
|
<li><a href="#accordions">Accorddions</a></li>
|
|
<li><a href="#timeline">Timeline</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
</header>
|
|
<!-- /Header -->
|
|
</div>
|
|
|
|
<main class="col-12 col-md-9 col-lg-10">
|
|
<article>
|
|
<header><h2>Yohns PicoCSS Fork v2.2.0</h2></header>
|
|
<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a> repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted to make the building process of websites easier (<code>:user-valid</code> "validation", using <code><label></code> within groups, <code>.row</code> & <code>.row-fluid</code> and the <code>.col-*</code> classes like Bootstrap, <code>.align-*</code> and more.) The demo docs here is the main enhanced that have been added to the <a href="https://picocss.com/">Pico CSS 2.0.6</a> branch, for more docs, refer to the original <a href="https://picocss.com/docs">Pico CSS docs</a>.</p>
|
|
<hr>
|
|
<p><code>(OPTIONAL)</code> Some of the demos on this page do require <a href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as the preview here. I may get a build script going to compile the javascript plugins / components later. Let me know if this feature would help you.</p>
|
|
<footer>If this fork has helped you, please <a href="https://github.com/Yohn/PicoCSS">Like</a> this fork!</footer>
|
|
</article>
|
|
<hr>
|
|
<!-- hamburger-menu -->
|
|
<article id="hamburger-menu">
|
|
<header>
|
|
<h2>Hamburger Menu <code>nav[role="navigation"]</code></h2>
|
|
<h6 class="fw-n">Classless!</h6>
|
|
</header>
|
|
<p>Use the default <code><nav></code> component in <a href="https://picocss.com/docs/nav">Pico CSS</a> docs, but add the <code>role="navigation"</code> attribute to the <code><nav></code>.</p>
|
|
<h5>Positioning</h5>
|
|
<p>The default position puts your nav links and burger menu at the end of the line, but <code>data-position="start"</code> will put them at the start of the line.</p>
|
|
<h5>Breakpoints</h5>
|
|
<p>Use the <code>data-breakpoint="<strong>**</strong>"</code> to change when the burger menu appears. The different values are <code>md</code>, <code>lg</code>, <code>xl</code> and <code>xxl</code>. These are the same breakpoints <a href="#rows">the .row</a> uses.</p>
|
|
<h5>Hamburger Icon</h5>
|
|
<p>Before the list of elements you want to be within the burger menu, add the following:</p>
|
|
<code>
|
|
<input type="checkbox" id="YOUR-ID" /><br>
|
|
<label for="YOUR-ID" style="font-size: calc(var(--pico-font-size) * 1.5);">&#x2261;</label>
|
|
</code>
|
|
<p>Change <code>YOUR-ID</code> to whatever id you want to use, but ensure the id for the checkbox, is the same as the id for the label.</p>
|
|
<blockquote><span style="color: var(--pico-del-color);">DO NOT</span> put the <code>input[type="checkbox"]</code> within the <code><label></code> element, it will not work correctly if you do that.</blockquote>
|
|
<h6>Custom Hamburger Icon?</h6>
|
|
<p>Replace the <code>&#x2261;</code> with your own icon, svg element, or image.</p>
|
|
<h5>Collapsed List</h5>
|
|
<p>Add <code>role="list"</code> attribute to the <code><ul></code> or <code><ol></code> element for the hamburger menu, and then add <code>role="listitem"</code> attribute to each <code><li></code> element.</p>
|
|
<hr>
|
|
<hgroup>
|
|
<h3>Example Hamburger Menu</h3>
|
|
<h6>(resize width of screen if you don't see it)</h6>
|
|
</hgroup>
|
|
|
|
<!-- Start Responsive Nav 1 -->
|
|
<nav role="navigation" data-position="start" data-breakpoint="lg">
|
|
<ul>
|
|
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><strong>Like Us on GitHub!</strong></li>
|
|
</ul>
|
|
<input type="checkbox" id="menu-btn" />
|
|
<!-- role="button" -->
|
|
<label for="menu-btn" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" aria-controls="nav-example">
|
|
≡
|
|
</label>
|
|
<ol id="nav-example" role="list" >
|
|
<li role="listitem"><a href="#">Home</a></li>
|
|
<li role="listitem"><a href="#">About</a></li>
|
|
<li role="listitem"><a href="#">Services</a></li>
|
|
<li role="listitem"><a href="#">Login</a></li>
|
|
<li role="listitem"><a href="#">Sign Up</a></li>
|
|
</ol>
|
|
</nav>
|
|
<!-- End Responsive Nav 1 -->
|
|
|
|
<h3>Hamburger Menu Under Nav Example</h3>
|
|
<!-- Start Responsive Nav 2 -->
|
|
<nav role="navigation" data-position="end" data-breakpoint="lg">
|
|
<ul>
|
|
<li><a href="https://github.com/Yohn/PicoCSS" target="_blank">Yohns Fork</a></li>
|
|
</ul>
|
|
<ul>
|
|
<li><strong>Like Us on GitHub!</strong></li>
|
|
</ul>
|
|
<input type="checkbox" id="menu-btn2">
|
|
<label for="menu-btn2" style="font-size: calc(var(--pico-font-size) * 1.3);" aria-label="Menu" aria-controls="nav-example2">
|
|
≡
|
|
</label>
|
|
<ol id="nav-example2" role="list">
|
|
<li role="listitem"><a href="#">Home</a></li>
|
|
<li role="listitem"><a href="#">About</a></li>
|
|
<li role="listitem"><a href="#">Services</a></li>
|
|
<li role="listitem"><a href="#">Login</a></li>
|
|
<li role="listitem"><a href="#">Sign Up</a></li>
|
|
</ol>
|
|
</nav>
|
|
<!-- End Responsive Nav 2 -->
|
|
|
|
</article>
|
|
<!-- /hamburger-menu -->
|
|
<hr>
|
|
<!-- Tabs -->
|
|
<article id="tab-regions">
|
|
<header>
|
|
<h2>Tabs <code>section[role="region"]</code></h2>
|
|
<h6 class="fw-n">Classless!</h6>
|
|
</header>
|
|
<h3 class="mt-0">Information</h3>
|
|
<ul class="pb-0">
|
|
<li>I wanted this to work without javascript</li>
|
|
<li>I wanted to use the <code><details></code> and <code><summary></code> tags.</li></ul>
|
|
<h3 class="mt-0">Grips</h3>
|
|
<ol>
|
|
<li>I would have liked to use the <code>role</code> attribute values <code>tablist</code>, <code>tab</code>, and <code>tabpanel</code> but the w3 specs says we cant use roles on <a href="https://www.w3.org/TR/html-aria/#el-details" target="_blank" data-tooltip="W3 Specs for Details"><code><details></code></a> and <a href="https://www.w3.org/TR/html-aria/#el-summary" target="_blank" data-tooltip="W3 Specs for Summary"><code><summary></code></a> tags.</li>
|
|
<li><code><section></code> in theory has a default <code>role</code> attribute value of <code>region</code>, though not confirmed, or applied when we are using it for our CSS. So I went with the <code>role="region"</code> attribute to help with selecting the correct element with CSS, classless and no JavaScript!</li>
|
|
|
|
</ol>
|
|
<hr>
|
|
<h2>Example Tabs with no JavaScript:</h2>
|
|
<!-- start tab example -->
|
|
<section role="region">
|
|
<details name="lets-go" open>
|
|
<summary>Tab 1</summary>
|
|
<div>
|
|
<p>Content for Tab 1</p>
|
|
<p>Content for Tab 1</p>
|
|
</div>
|
|
</details>
|
|
<details name="lets-go">
|
|
<summary>Tab 2</summary>
|
|
<div>
|
|
<p>Just a random table</p>
|
|
<table>
|
|
<tr>
|
|
<td>row 1 col 1</td>
|
|
<td>row 1 col 2</td>
|
|
<td>row 1 col 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>row 2 col 1</td>
|
|
<td>row 2 col 2</td>
|
|
<td>row 2 col 3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>row 3 col 1</td>
|
|
<td>row 3 col 2</td>
|
|
<td>row 3 col 3</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</details>
|
|
<details name="lets-go">
|
|
<summary>Tab 3</summary>
|
|
<div>
|
|
<form action="javascript:void(0);">
|
|
<section role="form">
|
|
<input type="text" id="name" name="name" placeholder="Name:" required>
|
|
<label for="name">Name:</label>
|
|
</section>
|
|
<section role="form">
|
|
<input type="email" id="email" name="email" placeholder="Email:" required>
|
|
<label for="email">Email:</label>
|
|
</section>
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
</div>
|
|
</details>
|
|
<details name="lets-go">
|
|
<summary>Tab 4</summary>
|
|
<div>
|
|
<p>Content for Tab 4</p>
|
|
</div>
|
|
</details>
|
|
<details name="lets-go">
|
|
<summary>Tab 5</summary>
|
|
<div>
|
|
<p>Content for Tab 5</p>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
<!-- / tab example -->
|
|
</article>
|
|
<!-- /Tabs -->
|
|
<hr>
|
|
<!-- Tooltip -->
|
|
<article id="tooltip">
|
|
<header><h2>Tooltip</h2></header>
|
|
<p>For multi-line tooltips, you can now add <code>&#xa;</code> where the line break should go within your tooltip area.</core></p>
|
|
<label for="test-tooltip" data-tooltip="this is 
 multiline tooltip 
 that currently you have 
 to put the breaks in: &#xa;">
|
|
<input type="text" id="test-tooltip" placeholder="Testing">
|
|
</label>
|
|
<p>I also wanted to remove the dotted line on input fileds when they are contained within the tooltip element, so that is why this example has the input field with the tooltip on the <code data-tooltip="I do not think there is a way to set the width on the tool tip and have it auto break? Lets see.."><label></code> wrapper.</p>
|
|
<code> data-tooltip="this is &#xa; a test"</code>
|
|
</article>
|
|
<!-- /Tooltip -->
|
|
<hr>
|
|
<!-- Floating Labels -->
|
|
<article id="floating-labels">
|
|
<header>
|
|
<h2>Floating Labels</h2>
|
|
<h6 class="fw-n">Classless!</h6>
|
|
</header>
|
|
<p>For floating labels to work, you need to add the <code>role="form"</code> attribute to a <code><section></code> tag, ensure you have a <code>placeholder="example"</code> attribute on your input or textarea tags, and that placeholder value needs to be the same value that is used within the label tag, which would go after your form element.</textarea></code>.</p>
|
|
<hr>
|
|
<form action="javascript:void(0);" novalidate>
|
|
<section role="form">
|
|
<input type="text" id="fl-name-ele" placeholder="Name" aria-required="true" aria-labelledby="fl-name">
|
|
<label for="fl-name-ele" id="fl-name">Name</label>
|
|
</section>
|
|
<section role="form">
|
|
<input type="email" id="fl-email-ele" placeholder="Email" aria-required="true" aria-labelledby="fl-email">
|
|
<label for="fl-email-ele" id="fl-email">Email</label>
|
|
</section>
|
|
<section role="form">
|
|
<select id="fl-topic-ele" required aria-required="true" aria-labelledby="fl-topic">
|
|
<option selected disabled value="">Topic</option>
|
|
<option>General</option>
|
|
<option>Support</option>
|
|
<option>Feedback</option>
|
|
</select>
|
|
<label for="fl-topic-ele" id="fl-topic">Topic</label>
|
|
</section>
|
|
<section role="form">
|
|
<textarea id="fl-message-ele" placeholder="Message" aria-required="true" aria-labelledby="fl-message"></textarea>
|
|
<label for="fl-message-ele" id="fl-message">Message</label>
|
|
</section>
|
|
</form>
|
|
</article>
|
|
<!-- /Floating Labels -->
|
|
<hr>
|
|
<!-- Validation -->
|
|
<form action="javascript:void(0);" id="validate">
|
|
<article>
|
|
<header>
|
|
<h2>Validation</h2>
|
|
<h6 class="fw-n">Classless!</h6>
|
|
</header>
|
|
<p>
|
|
Using form :user-valid and :user-invalid.</p>
|
|
<p>You can disable the validation by adding the attribute <code>novalidate</code> to the form tag.
|
|
<p>Classless except for the file input button previews.</p>
|
|
</p>
|
|
<input placeholder="name" type="text" name="test" minlength="4" maxlength="30" pattern="[a-z]{4,30}" required>
|
|
<small data-valid="this is good!" data-invalid="Min of 4 characters, max of 39, only a-z no caps."></small>
|
|
|
|
<input placeholder="Url" type="url" name="test" required>
|
|
<small data-valid="this is good!" data-invalid="Must be a url."></small>
|
|
|
|
<input placeholder="Email" type="email" name="test" required>
|
|
<small data-valid="this is good!" data-invalid="Must be a valid email."></small>
|
|
|
|
<select name="favorite-cuisine" required>
|
|
<option selected disabled value="">Select your favorite cuisine...</option>
|
|
<option>Italian</option>
|
|
<option>Japanese</option>
|
|
<option>Indian</option>
|
|
<option>Thai</option>
|
|
<option>French</option>
|
|
</select>
|
|
<small data-valid="this is good!" data-invalid="Error.."></small>
|
|
|
|
<input type="date" name="date" required>
|
|
<small data-valid="this is good!" data-invalid="Error.."></small>
|
|
|
|
<input type="datetime-local" name="datetime-local" required>
|
|
<small data-valid="this is good!" data-invalid="Error.."></small>
|
|
|
|
<input type="month" name="month" min="2018-03" max="2024-12" placeholder="2024-12" step="1" pattern="[0-9]{4}-[0-9]{2}" required>
|
|
<small data-valid="this is good!" data-invalid="Format: YYYY-MM"></small>
|
|
|
|
<input type="time" name="time" required>
|
|
<small data-valid="this is good!" data-invalid="Error.."></small>
|
|
|
|
<header>Check JS for FileValidator class</header>
|
|
<input type="file" data-max-size="1048576" accept=".jpg,.svg,.png,.gif,.webp" id="checkFile" multiple />
|
|
<small data-invalid="Only .jpg,.svg,.png,.gif,.webp image types allowed" data-valid="Good!"></small>
|
|
|
|
<textarea minlength="5" placeholder="its always valid?" required></textarea>
|
|
<small data-valid="this is good!" data-invalid="Min of 5 characters!"></small>
|
|
<br>
|
|
<label><input type="checkbox" name="english" required />English </label>
|
|
<footer>
|
|
<input type="submit" value="submit" class="btn btn-primary">
|
|
</footer>
|
|
</article>
|
|
</form>
|
|
<!-- /Validation -->
|
|
<hr>
|
|
<!-- Group -->
|
|
<article id="group">
|
|
<header>
|
|
<h2>Group</h2>
|
|
<h6 class="fw-n">Classless and no JavaScript!</h6>
|
|
</header>
|
|
<p>I wanted to add the label tah to have an input group kind of thing going on.</p>
|
|
<form action="javascript:void(0);" novalidate>
|
|
<div role="group">
|
|
<label for="email">Email:</label>
|
|
<input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
|
|
<input type="submit" value="Subscribe" />
|
|
</div>
|
|
</form>
|
|
|
|
<form action="javascript:void(0);" novalidate>
|
|
<div role="group">
|
|
<label for="ex-browser">Browser:</label>
|
|
<select id="ex-browser" name="ex-browser">
|
|
<option value="Firefox">Firefox</option>
|
|
<option value="Chrome">Chrome</option>
|
|
<option value="Opera">Opera</option>
|
|
<option value="Safari">Safari</option>
|
|
</select>
|
|
<input type="submit" value="Save" />
|
|
</div>
|
|
</form>
|
|
</article>
|
|
<!-- ./ Group -->
|
|
<hr>
|
|
<!-- rows -->
|
|
<article id="rows">
|
|
<header><h2>Rows</h2></header>
|
|
<p>
|
|
Similar to <a href="https://getbootstrap.com/docs/5.3/layout/columns/" target="_blank">Bootstrap 5.3.3</a>, with the responsive <code>.col-*COL#*</code>, <code>.col-*BREAKPOINT*-*COL#*</code>, <code>.offset-*COL#*</code>, <code>.offset-*BREAKPOINT*-*COL#*</code>.
|
|
</p>
|
|
<p>
|
|
<code>.row</code> has a max width set to the viewport of your <code>xl</code> viewport (1300px by default)</p>
|
|
<code>.row-fluid</code> max width is 100%.
|
|
</p>
|
|
<div class="row-fluid">
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
<div class="col-6"><article class="pico-background-lime-750">col-6</article></div>
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="col-3 offset-1"><article class="pico-background-lime-750">col-3 offset-1</article></div>
|
|
<div class="col-2"><article class="pico-background-lime-750">col-2</article></div>
|
|
<div class="col-2"><article class="pico-background-lime-750">col-2</article></div>
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div class="col-2"><article class="pico-background-lime-750">col-2</article></div>
|
|
<div class="col-8"><article class="pico-background-lime-750">col-8</article></div>
|
|
<div class="col-2"><article class="pico-background-lime-750">col-2</article></div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div class="col-5"><article class="pico-background-lime-750">col-5</article></div>
|
|
<div class="col-7"><article class="pico-background-lime-750">col-7</article></div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div class="col-9"><article class="pico-background-lime-750">col-9</article></div>
|
|
<div class="col-3"><article class="pico-background-lime-750">col-3</article></div>
|
|
</div>
|
|
</article>
|
|
<!-- /rows -->
|
|
<hr>
|
|
<!-- offset -->
|
|
<article id="row-offsets">
|
|
<header><h2>Columns with offsets defined by breakpoints</h2></header>
|
|
<p>When defining multiple <code>.col-*-*</code> on the same element, the order your put the classes on the element matter.</p>
|
|
|
|
<div class="row-fluid">
|
|
<div class="col-2 col-md-4"><article class="pico-background-lime-750">col-2, col-md-4</article></div>
|
|
<div class="col-4 offset-8 col-md-6 offset-md-6"><article class="pico-background-lime-750">col-4, offset-8, col-md-6, offset-md-6</article></div>
|
|
</div>
|
|
|
|
<div class="row-fluid">
|
|
<div class="col-5 offset-1 col-md-11"><article class="pico-background-lime-550">col-5, offset-1, col-md-11</article></div>
|
|
<div class="col-2 col-md-6"><article class="pico-background-lime-550">col-2, col-md-6</article></div>
|
|
<div class="col-3 offset-9 col-md-6 offset-md-6"><article class="pico-background-lime-550">col-3, offset-9, col-md-6, offset-md-6</article></div>
|
|
</div>
|
|
|
|
<div class="row-fluid align-center">
|
|
<div class="col-3 col-md-12 col-lg-6"><article class="pico-background-lime-850">col-3 col-md-12 col-lg-6</article></div>
|
|
<div class="col-3 col-md-12 col-lg-6"><article class="pico-background-lime-850">col-3 col-md-12 col-lg-6</article></div>
|
|
<div class="col-4 col-md-6 col-lg-3"><article class="pico-background-lime-850">col-4 col-md-6 col-lg-3</article></div>
|
|
<div class="col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10"><article class="pico-background-lime-850">col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10</article></div>
|
|
</div>
|
|
</article>
|
|
<!-- /row-offsets -->
|
|
<hr>
|
|
<!-- row-alignments -->
|
|
<article id="row-alignments">
|
|
<header><h2>Alignment</h2></header>
|
|
<p>
|
|
You can add <code>.align-start</code> (default), <code>.align-center</code> or <code>.align-end</code> to your <code>.row</code> or <code>.row-fluid</code> element to align the containing elements to the top, middle, or bottom.</p>
|
|
|
|
<div class="row-fluid align-center" id="row-align-example">
|
|
<div class="col-4"><article class="pico-background-lime-850">col-4</article></div>
|
|
<div class="col-4">
|
|
<article class="pico-background-lime-850">
|
|
<input type="button" class="change-row-align" data-align="start" value=".align-start">
|
|
<input type="button" class="change-row-align" data-align="center" value=".align-center">
|
|
<input type="button" class="change-row-align" data-align="end" value=".align-end">
|
|
</article>
|
|
</div>
|
|
<div class="col-4"><article class="pico-background-lime-850">col-4</article></div>
|
|
</div>
|
|
</article>
|
|
<!-- /row-alignments -->
|
|
<hr>
|
|
<!-- row-breakpoints -->
|
|
<article id="row-breakpoints">
|
|
<header><h2><code> -md- </code> Breakpoints</h2></header>
|
|
<div class="row-fluid">
|
|
<div class="col-12 col-md-4"><article class="pico-background-lime-650">col-12, col-md-4</article></div>
|
|
<div class="col-12 col-md-4"><article class="pico-background-lime-650">col-12, col-md-4</article></div>
|
|
<div class="col-12 col-md-4"><article class="pico-background-lime-650">col-12, col-md-4</article></div>
|
|
</div>
|
|
</article>
|
|
<!-- ./ row-breakpoints -->
|
|
<hr>
|
|
<!-- Modal -->
|
|
<article id="modal">
|
|
<header><h2>Modal</h2></header>
|
|
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">
|
|
Launch demo modal
|
|
</button>
|
|
</article>
|
|
<!-- ./ Modal -->
|
|
<hr>
|
|
<article id="popover">
|
|
<header><h2>Popovers</h2><p>Popovers will replace the notifications below.</p></header>
|
|
|
|
<button class="action" popovertarget="popover-example1">Backdrop Close</button>
|
|
|
|
<button popovertarget="popover-example2" popovertargetaction="show">Manual Close</button>
|
|
|
|
<article id="popover-example1" popover>
|
|
<header>
|
|
<h2>Popover</h2>
|
|
</header>
|
|
Click/Tap everywhere else to close
|
|
<footer>Footer</footer>
|
|
</article>
|
|
|
|
<article id="popover-example2" popover="manual">
|
|
Some Feedback Message With Close Button
|
|
<button popovertarget="popover-example2" popovertargetaction="hide">×</button>
|
|
</article>
|
|
|
|
</article>
|
|
<hr>
|
|
<!-- notifications -->
|
|
<article id="notifications">
|
|
<header><h2>Notificaton</h2></header>
|
|
<button onclick="showNotification('Accessible short notice.')">
|
|
Short Notificaton
|
|
</button>
|
|
|
|
<button onclick="showNotification({ html: `
|
|
<section>
|
|
<h2>Many news!</h2>
|
|
<p>This is fantastic!</p>
|
|
<button class='contrast' onclick='closeNotification()'>OK</button>
|
|
</section>
|
|
`, delay: 60 * 1000 })">
|
|
Big Notificaton
|
|
</button>
|
|
|
|
<!-- accessible dialog based notification element -->
|
|
<dialog role="alert" data-backdrop="false"></dialog>
|
|
</article>
|
|
<!-- /notifications -->
|
|
<hr>
|
|
<!-- Accordions -->
|
|
<article id="accordions">
|
|
<header><h2>Accordions</h2></header>
|
|
<details name="example-accordion">
|
|
<summary>Accordion 1</summary>
|
|
<p>
|
|
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.
|
|
</p>
|
|
</details>
|
|
<details name="example-accordion" open>
|
|
<summary>Accordion 2</summary>
|
|
<ul>
|
|
<li>Vestibulum id elit quis massa interdum sodales.</li>
|
|
<li>Nunc quis eros vel odio pretium tincidunt nec quis neque.</li>
|
|
<li>Quisque sed eros non eros ornare elementum.</li>
|
|
<li>Cras sed libero aliquet, porta dolor quis, dapibus ipsum.</li>
|
|
</ul>
|
|
</details>
|
|
</article>
|
|
<!-- ./ Accordions -->
|
|
<hr>
|
|
<article id="timeline" style="background-color: transparent;">
|
|
<header>
|
|
<h2>Timeline</h2>
|
|
<br>
|
|
<details>
|
|
<summary>View Custom CSS</summary>
|
|
<div style="background-color: var(--pico-muted-border-color); padding: .5rem;">
|
|
--pico-timeline-line-color: var(--pico-primary-background);<br>
|
|
--pico-timeline-dot-background-color: var(--pico-primary-inverse);<br>
|
|
--pico-timeline-dot-border-color: var(--pico-primary-background);<br>
|
|
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
|
|
</div>
|
|
</details>
|
|
</header>
|
|
<div class="timeline">
|
|
<section class="point left">
|
|
<article>
|
|
<header><h3>2017</h3></header>
|
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
|
</article>
|
|
</section>
|
|
<section class="point right">
|
|
<article>
|
|
<header><h3>2016</h3></header>
|
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
|
</article>
|
|
</section>
|
|
<section class="point left">
|
|
<article>
|
|
<header><h3>2015</h3></header>
|
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
|
</article>
|
|
</section>
|
|
<section class="point right">
|
|
<article>
|
|
<header><h3>2012</h3></header>
|
|
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="container">
|
|
<small>
|
|
Built with <a href="https://github.com/Yohn/PicoCSS">PicoCSS</a> •
|
|
<a href="https://github.com/Yohn/PicoCSS">
|
|
Source code
|
|
</a>
|
|
</small>
|
|
</footer>
|
|
<!-- ./ Footer -->
|
|
|
|
<!-- Modal example -->
|
|
<dialog id="modal-example">
|
|
<article>
|
|
<header>
|
|
<button aria-label="Close" rel="prev" data-target="modal-example" onclick="toggleModal(event)"></button>
|
|
<h3>Confirm your action!</h3>
|
|
</header>
|
|
<p>
|
|
Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus
|
|
pellentesque. Nullam finibus risus non semper euismod.
|
|
</p>
|
|
<footer>
|
|
<button role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</button>
|
|
<button autofocus data-target="modal-example" onclick="toggleModal(event)">
|
|
Confirm
|
|
</button>
|
|
</footer>
|
|
</article>
|
|
</dialog>
|
|
<!-- ./ Modal example -->
|
|
|
|
<!-- Minimal theme switcher -->
|
|
<script src="js/MinimalThemeSwitcher.js"></script>
|
|
|
|
<!-- Modal -->
|
|
<script src="js/Modal.js"></script>
|
|
<!-- alert notifications -->
|
|
<script src="js/Notifications.js"></script>
|
|
<!-- For the file uploader preview -->
|
|
<script src="js/FileValidator.js"></script>
|
|
<!--
|
|
Accordions, but I might have found another way to do this recently without javascript ;)
|
|
-- >
|
|
<script src="js/Accordion.js"></script>>-->
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const checkFile = document.getElementById("checkFile");
|
|
new FileValidator(checkFile);
|
|
|
|
const alignButtons = document.querySelectorAll(".change-row-align");
|
|
const alignRow = document.getElementById("row-align-example");
|
|
alignButtons.forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
let dir = button.getAttribute('data-align');
|
|
console.log(dir)
|
|
if(dir == 'start'){
|
|
alignRow.classList.remove('align-center', 'align-end');
|
|
alignRow.classList.add('align-start');
|
|
} else if(dir == 'center'){
|
|
alignRow.classList.remove('align-start', 'align-end');
|
|
alignRow.classList.add('align-center');
|
|
} else {
|
|
alignRow.classList.remove('align-start', 'align-center');
|
|
alignRow.classList.add('align-end');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|