mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 01:26:13 -04:00
Docs: Add modal page
This commit is contained in:
Lucas Larroche
parent
10301430ab
commit
f85faceb65
9 changed files with 229 additions and 12 deletions
|
|
@ -43,6 +43,7 @@
|
|||
<ul>
|
||||
<li><a href="./accordions.html" id="accordions-link" class="secondary">Accordions</a></li>
|
||||
<li><a href="./cards.html" id="cards-link" class="secondary">Cards</a></li>
|
||||
<li><a href="./modal.html" id="modal-link" class="secondary">Modal</a></li>
|
||||
<li><a href="./navs.html" id="navs-link" class="secondary">Navs</a></li>
|
||||
<li><a href="./progress.html" id="progress-link" class="secondary">Progress</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
<p>Example: <strong>pick a color!</strong></p>
|
||||
|
||||
<article data-theme="generated" aria-label="Generated theme example">
|
||||
<h4><span class="name">Custom theme</span></h4>
|
||||
<h3><span class="name">Custom theme</span></h3>
|
||||
<form>
|
||||
<div class="grid">
|
||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
</footer>
|
||||
</article>
|
||||
<p>There are 2 ways to customize your version of Pico.css:</p>
|
||||
<h4>Overriding CSS variables</h4>
|
||||
<h3>Overriding CSS variables</h3>
|
||||
<p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p>
|
||||
|
||||
<pre><code><em>/* <span class="name"></span>Light scheme (Default) */
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
</code></pre>
|
||||
|
||||
<p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p>
|
||||
<h4>Importing Pico SASS library</h4>
|
||||
<h3>Importing Pico SASS library</h3>
|
||||
<p>We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p>
|
||||
<p>Compile the SASS file to CSS to get a custom version of Pico.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@
|
|||
<h2>Works without package manager or dependencies 🙂!</h2>
|
||||
</hgroup>
|
||||
<p>There are 3 ways to get started with pico.css:</p>
|
||||
<h4>Install manually</h4>
|
||||
<h3>Install manually</h3>
|
||||
<p><a href="https://github.com/picocss/pico/archive/refs/heads/master.zip">Download Pico</a> and link <code>/css/pico.min.css</code> in the <code><<b>head</b>></code> of your website.</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>></code></pre>
|
||||
<h4>Install from CDN</h4>
|
||||
<h3>Install from CDN</h3>
|
||||
<p>Alternatively, you can use <a href="https://unpkg.com/@picocss/pico@latest/">unpkg CDN</a> to link pico.css</p>
|
||||
<pre><code><<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.min.css"</u>></code></pre>
|
||||
<h4>Install with NPM</h4>
|
||||
<h3>Install with NPM</h3>
|
||||
<pre><code><b>npm</b> <i>install</i> <u>@picocss/pico</u></code></pre>
|
||||
<p>Starter HTML template:</p>
|
||||
|
||||
|
|
|
|||
166
docs/src/modal.html
Normal file
166
docs/src/modal.html
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
${require('./_head.html')
|
||||
title="Modal"
|
||||
description="A flexible container with graceful spacings across devices and viewports."
|
||||
canonical="modal.html"
|
||||
}
|
||||
</head>
|
||||
|
||||
<body>
|
||||
${require('./_nav.html')}
|
||||
|
||||
<main class="container" id="docs">
|
||||
${require('./_sidebar.html') active="modal-link"}
|
||||
|
||||
<div role="document">
|
||||
<section id="modal">
|
||||
<hgroup>
|
||||
<h1>Modal</h1>
|
||||
<h2>The classic modal element with graceful spacings across devices and viewports.</h2>
|
||||
</hgroup>
|
||||
|
||||
<p>Modals are built with <code><<b>dialog</b>></code> as a wrapper and <code><<b>article</b>></code> as a content container.</p>
|
||||
<p>Inside <code><<b>header</b>></code>, <code><<b>a</b> <i>class</i>=<u>"close"</u>></code> is defined to <code><i>float</i>: <u>right</u>;</code> allowing a close icon to be top aligned with a title.</p>
|
||||
|
||||
<dialog class="example" open>
|
||||
<article>
|
||||
<header>
|
||||
<a href="#close" aria-label="Close" class="close" onclick="event.preventDefault()"></a>
|
||||
<p>Modal title</p>
|
||||
</header>
|
||||
<p>
|
||||
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||
Sed eleifend a dui nec ullamcorper.
|
||||
Praesent vehicula lacus ac justo accumsan ullamcorper.
|
||||
</p>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<pre><code><<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<<b>header</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#close"</u> <i>aria-label</i>=<u>"Close"</u> <i>class</i>=<u>"close"</u>></<b>a</b>>
|
||||
Modal title
|
||||
</<b>header</b>>
|
||||
<<b>p</b>>
|
||||
Nunc nec ligula a tortor sollicitudin dictum in vel enim.
|
||||
Quisque facilisis turpis vel eros dictum aliquam et nec turpis.
|
||||
Sed eleifend a dui nec ullamcorper.
|
||||
Praesent vehicula lacus ac justo accumsan ullamcorper.
|
||||
</<b>p</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre>
|
||||
|
||||
<p>Inside <code><<b>footer</b>></code>, the content is right aligned by default.</p>
|
||||
|
||||
<dialog class="example" open>
|
||||
<article>
|
||||
<h3>Confirm your action!</h3>
|
||||
<p>
|
||||
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||
Donec ut sagittis erat. Praesent eu eros felis.
|
||||
Ut consectetur placerat pulvinar.
|
||||
</p>
|
||||
<footer>
|
||||
<a href="#cancel" role="button" class="secondary" onclick="event.preventDefault()">Cancel</a><a href="#confirm" role="button" onclick="event.preventDefault()">Confirm</a>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
|
||||
<pre><code><<b>dialog</b> <i>open</i>>
|
||||
<<b>article</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
Mauris non nibh vel nisi sollicitudin malesuada.
|
||||
Donec ut sagittis erat. Praesent eu eros felis.
|
||||
Ut consectetur placerat pulvinar.
|
||||
</<b>p</b>>
|
||||
<<b>footer</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#cancel"</u> <i>role</i>=<u>"button"</u> <i>class</i>=<u>"secondary"</u>>Cancel</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u> <i>role</i>=<u>"button"</u>>Confirm</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre>
|
||||
|
||||
<hgroup>
|
||||
<h2>Live demo</h2>
|
||||
<h3>Toggle a modal by clicking the button below.</h3>
|
||||
</hgroup>
|
||||
|
||||
<article>
|
||||
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">Launch demo modal</button>
|
||||
<footer class="code">
|
||||
|
||||
<pre><code><em><!-- Button to trigger the modal --></em>
|
||||
<<b>button</b> <i>class</i>=<u>"contrast"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
Launch demo modal
|
||||
</<b>button</b>>
|
||||
|
||||
<em><!-- Modal --></em>
|
||||
<<b>dialog</b> <i>id</i>=<u>"modal-example"</u>>
|
||||
<<b>article</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#close"</u>
|
||||
<i>aria-label</i>=<u>"Close"</u>>
|
||||
<i>class</i>=<u>"close"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
</<b>a</b>>
|
||||
<<b>h3</b>>Confirm your action!</<b>h3</b>>
|
||||
<<b>p</b>>
|
||||
Cras sit amet maximus risus.
|
||||
Pellentesque sodales odio sit amet augue finibus pellentesque.
|
||||
Nullam finibus risus non semper euismod.
|
||||
</<b>p</b>>
|
||||
<<b>footer</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#cancel"</u>
|
||||
<i>role</i>=<u>"button"</u>>
|
||||
<i>class</i>=<u>"secondary"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
Cancel
|
||||
</<b>a</b>>
|
||||
<<b>a</b> <i>href</i>=<u>"#confirm"</u>
|
||||
<i>role</i>=<u>"button"</u>
|
||||
<i>data-target</i>=<u>"modal-example"</u>
|
||||
<i>onClick</i>=<u>"toggleModal()"</u>>
|
||||
Confirm
|
||||
</<b>a</b>>
|
||||
</<b>footer</b>>
|
||||
</<b>article</b>>
|
||||
</<b>dialog</b>></code></pre>
|
||||
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<p>As Pico focuses on CSS styles, we have not integrated any JavaScript in the library.</p>
|
||||
|
||||
</section>
|
||||
|
||||
${require('./_footer.html')}
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<dialog id="modal-example">
|
||||
<article>
|
||||
<a href="#close" aria-label="Close" class="close" data-target="modal-example" onclick="toggleModal(event)"></a>
|
||||
<h3>Confirm your action!</h3>
|
||||
<p>Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus pellentesque. Nullam finibus risus non semper euismod.</p>
|
||||
<footer>
|
||||
<a href="#cancel" role="button" class="secondary" data-target="modal-example" onclick="toggleModal(event)">Cancel</a><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)">Confirm</a>
|
||||
</footer>
|
||||
</article>
|
||||
</dialog>
|
||||
|
||||
<script src="js/commons.min.js"></script>
|
||||
<script src="js/modal.min.js"></script>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</article>
|
||||
<p>Themes can be forced on document level <code><<b>html</b> <i>data-theme</i>=<u>"light"</u>></code> or on any HTML element <code><<b>article</b> <i>data-theme</i>=<u>"dark"</u>></code></p>
|
||||
<article data-theme="light" aria-label="Forced light theme example">
|
||||
<h4>Light theme</h4>
|
||||
<h3>Light theme</h3>
|
||||
<form class="grid">
|
||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</footer>
|
||||
</article>
|
||||
<article data-theme="dark" aria-label="Forced dark theme example">
|
||||
<h4>Dark theme</h4>
|
||||
<h3>Dark theme</h3>
|
||||
<form class="grid">
|
||||
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required>
|
||||
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required>
|
||||
|
|
|
|||
|
|
@ -171,7 +171,8 @@
|
|||
<p>Blockquote:</p>
|
||||
<article aria-label="Blockquote example">
|
||||
<blockquote>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
<footer>
|
||||
<cite>- Phasellus eget lacinia</cite>
|
||||
</footer>
|
||||
|
|
@ -179,7 +180,8 @@
|
|||
<footer class="code">
|
||||
|
||||
<pre><code><<b>blockquote</b>>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non.
|
||||
Nam at dui sit amet ipsum cursus ornare."
|
||||
<<b>footer</b>>
|
||||
<<b>cite</b>>- Phasellus eget lacinia</<b>cite</b>>
|
||||
</<b>footer</b>>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue