mirror of
https://github.com/picocss/pico.git
synced 2025-04-23 01:46:14 -04:00
289 lines
11 KiB
HTML
289 lines
11 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." />
|
|
<!-- Pico.css -->
|
|
<link rel="stylesheet" href="./../css/pico.lime.min.css" />
|
|
<link rel="stylesheet" href="./../css/pico.colors.min.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<div class="row-fluid">
|
|
<div class="col-12 col-md-3 col-lg-2">
|
|
<!-- Header -->
|
|
<header>
|
|
<hgroup>
|
|
<h1>Pico</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="#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">Accordions</a></li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
</header>
|
|
<!-- /Header -->
|
|
</div>
|
|
<main class="col-12 col-md-9 col-lg-10">
|
|
<!-- Group -->
|
|
<article id="group">
|
|
<header><h2>Group</h2></header>
|
|
<fieldset role="group">
|
|
<label for="email">Email:</label>
|
|
<input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
|
|
<input type="submit" value="Subscribe" />
|
|
</fieldset>
|
|
</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>
|
|
<!-- 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 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 -->
|
|
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="container">
|
|
<small>
|
|
Built with <a href="https://picocss.com">Pico</a> •
|
|
<a href="https://github.com/picocss/examples/blob/master/v2-html/index.html">
|
|
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/minimal-theme-switcher.js"></script>
|
|
|
|
<!-- Modal -->
|
|
<script src="js/modal.js"></script>
|
|
<!-- alert notifications -->
|
|
<script src="js/notifications.js"></script>
|
|
<script src="js/accordion.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
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>
|