mirror of
https://github.com/picocss/pico.git
synced 2025-04-25 10:46:14 -04:00
Added <label> compatibility to groups
This commit is contained in:
Yohn
parent
fe78285302
commit
b1fcd44b73
241 changed files with 10390 additions and 3095 deletions
893
demo/index.html
893
demo/index.html
|
|
@ -1,523 +1,448 @@
|
|||
<!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." />
|
||||
<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>
|
||||
<!-- Header -->
|
||||
<header class="container">
|
||||
<hgroup>
|
||||
<h1>Pico</h1>
|
||||
<p>A pure HTML example, without dependencies.</p>
|
||||
<p>Demo page from <a href="https://picocss.com/docs/modal#utilities">picocss.com model docs</a></p>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- ./ Header -->
|
||||
|
||||
<!-- Pico.css -->
|
||||
<link rel="stylesheet" href="./../css/pico.lime.min.css" />
|
||||
<link rel="stylesheet" href="./../css/pico.colors.min.css" />
|
||||
</head>
|
||||
<!-- Main -->
|
||||
<main class="container">
|
||||
<!-- Preview -->
|
||||
<section id="preview">
|
||||
<h2>Preview</h2>
|
||||
<p>
|
||||
Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla
|
||||
iaculis eros a elit pharetra egestas.
|
||||
</p>
|
||||
<form>
|
||||
<div class="grid">
|
||||
<input type="text" name="firstname" placeholder="First name" aria-label="First name" required/>
|
||||
<input type="email" name="email" placeholder="Email address" aria-label="Email address" autocomplete="email" required/>
|
||||
<button type="submit">Subscribe</button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<label for="terms">
|
||||
<input type="checkbox" role="switch" id="terms" name="terms" />
|
||||
I agree to the
|
||||
<a href="#" onclick="event.preventDefault()">Privacy Policy</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
<!-- ./ Preview -->
|
||||
<!-- row -->
|
||||
<section id="row-example">
|
||||
<h2>Rows</h2>
|
||||
<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>, you can have a responsive grid system with offsets as well to easy customization.
|
||||
</p>
|
||||
<div class="row pico-background-lime-950">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="container">
|
||||
<hgroup>
|
||||
<h1>Pico</h1>
|
||||
<p>A pure HTML example, without dependencies.</p>
|
||||
<p>Demo page from <a href="https://picocss.com/docs/modal#utilities">picocss.com model docs</a></p>
|
||||
</hgroup>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- ./ Header -->
|
||||
<div class="row">
|
||||
<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>
|
||||
|
||||
<!-- Main -->
|
||||
<main class="container">
|
||||
<!-- Preview -->
|
||||
<section id="preview">
|
||||
<h2>Preview</h2>
|
||||
<p>
|
||||
Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla
|
||||
iaculis eros a elit pharetra egestas.
|
||||
</p>
|
||||
<form>
|
||||
<div class="grid">
|
||||
<input
|
||||
type="text"
|
||||
name="firstname"
|
||||
placeholder="First name"
|
||||
aria-label="First name"
|
||||
required
|
||||
/>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email address"
|
||||
aria-label="Email address"
|
||||
autocomplete="email"
|
||||
required
|
||||
/>
|
||||
<button type="submit">Subscribe</button>
|
||||
</div>
|
||||
<fieldset>
|
||||
<label for="terms">
|
||||
<input type="checkbox" role="switch" id="terms" name="terms" />
|
||||
I agree to the
|
||||
<a href="#" onclick="event.preventDefault()">Privacy Policy</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
<!-- ./ Preview -->
|
||||
<div class="row">
|
||||
<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>
|
||||
|
||||
<!-- grid-container -->
|
||||
<section id="row-example">
|
||||
<h2>Grid Containers</h2>
|
||||
<p>
|
||||
No need to use <code>.row</code> when using <code>.grid-container</code>.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<section class="pico-background-lime-750">col-6</section>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<article class="pico-background-lime-750">col-3</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ./ grid-container -->
|
||||
<div class="row">
|
||||
<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>
|
||||
|
||||
<!-- Typography-->
|
||||
<section id="typography">
|
||||
<h2>Typography</h2>
|
||||
<p>
|
||||
Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat.
|
||||
Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique
|
||||
felis.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>Columns with offsets defined by breakpoints</h2>
|
||||
<p>When defining multiple <code>.col-*-*</code> on the same element, the order your put the classes on the element matter.</p>
|
||||
<p>Breakpoints available: <code>sm</code>, <code>md</code>, <code>lg</code>, <code>xl</code>, <code>xxl</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blockquote-->
|
||||
<blockquote>
|
||||
"Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet
|
||||
ipsum cursus ornare."
|
||||
<footer>
|
||||
<cite>- Phasellus eget lacinia</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
<div class="row">
|
||||
<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>
|
||||
|
||||
<!-- Lists-->
|
||||
<h3>Lists</h3>
|
||||
<ul>
|
||||
<li>Aliquam lobortis lacus eu libero ornare facilisis.</li>
|
||||
<li>Nam et magna at libero scelerisque egestas.</li>
|
||||
<li>Suspendisse id nisl ut leo finibus vehicula quis eu ex.</li>
|
||||
<li>Proin ultricies turpis et volutpat vehicula.</li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<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>
|
||||
|
||||
<!-- Inline text elements-->
|
||||
<h3>Inline text elements</h3>
|
||||
<div class="grid">
|
||||
<p><a href="#" onclick="event.preventDefault()">Primary link</a></p>
|
||||
<p>
|
||||
<a href="#" class="secondary" onclick="event.preventDefault()">Secondary link</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" class="contrast" onclick="event.preventDefault()">Contrast link</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p><strong>Bold</strong></p>
|
||||
<p><em>Italic</em></p>
|
||||
<p><u>Underline</u></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p><del>Deleted</del></p>
|
||||
<p><ins>Inserted</ins></p>
|
||||
<p><s>Strikethrough</s></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p><small>Small </small></p>
|
||||
<p>Text <sub>Sub</sub></p>
|
||||
<p>Text <sup>Sup</sup></p>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<p>
|
||||
<abbr title="Abbreviation" data-tooltip="Abbreviation">Abbr.</abbr>
|
||||
</p>
|
||||
<p><kbd>Kbd</kbd></p>
|
||||
<p><mark>Highlighted</mark></p>
|
||||
</div>
|
||||
<div class="row 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>
|
||||
|
||||
<!-- Headings-->
|
||||
<h3>Heading 3</h3>
|
||||
<p>
|
||||
Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur
|
||||
sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti
|
||||
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
|
||||
</p>
|
||||
<h4>Heading 4</h4>
|
||||
<p>
|
||||
Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac
|
||||
fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus.
|
||||
</p>
|
||||
<h5>Heading 5</h5>
|
||||
<p>
|
||||
Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in
|
||||
consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam
|
||||
sem.
|
||||
</p>
|
||||
<h6>Heading 6</h6>
|
||||
<p>
|
||||
Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut
|
||||
tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id
|
||||
auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin
|
||||
hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in
|
||||
velit.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2>Alignment</h2>
|
||||
<p>You can add <code>.align-start</code></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Medias-->
|
||||
<figure>
|
||||
<img
|
||||
src="img/aleksandar-jason-a562ZEFKW8I-unsplash-2000x1000.jpg"
|
||||
alt="Minimal landscape"
|
||||
/>
|
||||
<figcaption>
|
||||
Image from
|
||||
<a href="https://unsplash.com/photos/a562ZEFKW8I" target="_blank">unsplash.com</a>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<!-- ./ Typography-->
|
||||
<div class="row align-center">
|
||||
<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="Start">
|
||||
<input type="button" class="change-row-align" data-align="start" value="Center">
|
||||
<input type="button" class="change-row-align" data-align="start" value="End">
|
||||
</article>
|
||||
</div>
|
||||
<div class="col-4"><article class="pico-background-lime-850">col-4</article></div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons-->
|
||||
<section id="buttons">
|
||||
<h2>Buttons</h2>
|
||||
<p class="grid">
|
||||
<button>Primary</button>
|
||||
<button class="secondary">Secondary</button>
|
||||
<button class="contrast">Contrast</button>
|
||||
</p>
|
||||
<p class="grid">
|
||||
<button class="outline">Primary outline</button>
|
||||
<button class="outline secondary">Secondary outline</button>
|
||||
<button class="outline contrast">Contrast outline</button>
|
||||
</p>
|
||||
</section>
|
||||
<!-- ./ Buttons -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h2><code> -md- </code> Breakpoints</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form elements-->
|
||||
<section id="form">
|
||||
<form>
|
||||
<h2>Form elements</h2>
|
||||
<div class="row">
|
||||
<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>
|
||||
</section>
|
||||
<!-- ./ grid-container -->
|
||||
|
||||
<!-- Search -->
|
||||
<label for="search">Search</label>
|
||||
<input type="search" id="search" name="search" placeholder="Search" />
|
||||
<!-- Buttons-->
|
||||
<section id="buttons">
|
||||
<h2>Buttons</h2>
|
||||
<p class="grid">
|
||||
<button>Primary</button>
|
||||
<button class="secondary">Secondary</button>
|
||||
<button class="contrast">Contrast</button>
|
||||
</p>
|
||||
<p class="grid">
|
||||
<button class="outline">Primary outline</button>
|
||||
<button class="outline secondary">Secondary outline</button>
|
||||
<button class="outline contrast">Contrast outline</button>
|
||||
</p>
|
||||
</section>
|
||||
<!-- ./ Buttons -->
|
||||
|
||||
<!-- Text -->
|
||||
<label for="text">Text</label>
|
||||
<input type="text" id="text" name="text" placeholder="Text" />
|
||||
<small>Curabitur consequat lacus at lacus porta finibus.</small>
|
||||
<!-- Form elements-->
|
||||
<section id="form">
|
||||
<form>
|
||||
<h2>Form elements</h2>
|
||||
|
||||
<!-- Select -->
|
||||
<label for="select">Select</label>
|
||||
<select id="select" name="select" required>
|
||||
<option value="" selected>Select…</option>
|
||||
<option>…</option>
|
||||
</select>
|
||||
<!-- Search -->
|
||||
<label for="search">Search</label>
|
||||
<input type="search" id="search" name="search" placeholder="Search" />
|
||||
|
||||
<!-- File browser -->
|
||||
<label for="file"
|
||||
>File browser
|
||||
<input type="file" id="file" name="file" />
|
||||
</label>
|
||||
<!-- Text -->
|
||||
<label for="text">Text</label>
|
||||
<input type="text" id="text" name="text" placeholder="Text" />
|
||||
<small>Curabitur consequat lacus at lacus porta finibus.</small>
|
||||
|
||||
<!-- Range slider control -->
|
||||
<label for="range"
|
||||
>Range slider
|
||||
<input type="range" min="0" max="100" value="50" id="range" name="range" />
|
||||
</label>
|
||||
<!-- Select -->
|
||||
<label for="select">Select</label>
|
||||
<select id="select" name="select" required>
|
||||
<option value="" selected>Select…</option>
|
||||
<option>…</option>
|
||||
</select>
|
||||
|
||||
<!-- States -->
|
||||
<div class="grid">
|
||||
<label for="valid">
|
||||
Valid
|
||||
<input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false" />
|
||||
</label>
|
||||
<label for="invalid">
|
||||
Invalid
|
||||
<input
|
||||
type="text"
|
||||
id="invalid"
|
||||
name="invalid"
|
||||
placeholder="Invalid"
|
||||
aria-invalid="true"
|
||||
/>
|
||||
</label>
|
||||
<label for="disabled">
|
||||
Disabled
|
||||
<input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled />
|
||||
</label>
|
||||
</div>
|
||||
<!-- File browser -->
|
||||
<label for="file"
|
||||
>File browser
|
||||
<input type="file" id="file" name="file" />
|
||||
</label>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Date-->
|
||||
<label for="date"
|
||||
>Date
|
||||
<input type="date" id="date" name="date" />
|
||||
</label>
|
||||
<!-- Range slider control -->
|
||||
<label for="range"
|
||||
>Range slider
|
||||
<input type="range" min="0" max="100" value="50" id="range" name="range" />
|
||||
</label>
|
||||
|
||||
<!-- Time-->
|
||||
<label for="time"
|
||||
>Time
|
||||
<input type="time" id="time" name="time" />
|
||||
</label>
|
||||
<!-- States -->
|
||||
<div class="grid">
|
||||
<label for="valid">
|
||||
Valid
|
||||
<input type="text" id="valid" name="valid" placeholder="Valid" aria-invalid="false" />
|
||||
</label>
|
||||
<label for="invalid">
|
||||
Invalid
|
||||
<input
|
||||
type="text"
|
||||
id="invalid"
|
||||
name="invalid"
|
||||
placeholder="Invalid"
|
||||
aria-invalid="true"
|
||||
/>
|
||||
</label>
|
||||
<label for="disabled">
|
||||
Disabled
|
||||
<input type="text" id="disabled" name="disabled" placeholder="Disabled" disabled />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Color-->
|
||||
<label for="color"
|
||||
>Color
|
||||
<input type="color" id="color" name="color" value="#0eaaaa" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<!-- Date-->
|
||||
<label for="date"
|
||||
>Date
|
||||
<input type="date" id="date" name="date" />
|
||||
</label>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Checkboxes -->
|
||||
<fieldset>
|
||||
<legend><strong>Checkboxes</strong></legend>
|
||||
<label for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
|
||||
Checkbox
|
||||
</label>
|
||||
<label for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" name="checkbox-2" />
|
||||
Checkbox
|
||||
</label>
|
||||
</fieldset>
|
||||
<!-- Time-->
|
||||
<label for="time"
|
||||
>Time
|
||||
<input type="time" id="time" name="time" />
|
||||
</label>
|
||||
|
||||
<!-- Radio buttons -->
|
||||
<fieldset>
|
||||
<legend><strong>Radio buttons</strong></legend>
|
||||
<label for="radio-1">
|
||||
<input type="radio" id="radio-1" name="radio" value="radio-1" checked />
|
||||
Radio button
|
||||
</label>
|
||||
<label for="radio-2">
|
||||
<input type="radio" id="radio-2" name="radio" value="radio-2" />
|
||||
Radio button
|
||||
</label>
|
||||
</fieldset>
|
||||
<!-- Color-->
|
||||
<label for="color"
|
||||
>Color
|
||||
<input type="color" id="color" name="color" value="#0eaaaa" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Switch -->
|
||||
<fieldset>
|
||||
<legend><strong>Switches</strong></legend>
|
||||
<label for="switch-1">
|
||||
<input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
|
||||
Switch
|
||||
</label>
|
||||
<label for="switch-2">
|
||||
<input type="checkbox" id="switch-2" name="switch-2" role="switch" />
|
||||
Switch
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<!-- Checkboxes -->
|
||||
<fieldset>
|
||||
<legend><strong>Checkboxes</strong></legend>
|
||||
<label for="checkbox-1">
|
||||
<input type="checkbox" id="checkbox-1" name="checkbox-1" checked />
|
||||
Checkbox
|
||||
</label>
|
||||
<label for="checkbox-2">
|
||||
<input type="checkbox" id="checkbox-2" name="checkbox-2" />
|
||||
Checkbox
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Buttons -->
|
||||
<input type="reset" value="Reset" onclick="event.preventDefault()" />
|
||||
<input type="submit" value="Submit" onclick="event.preventDefault()" />
|
||||
</form>
|
||||
</section>
|
||||
<!-- ./ Form elements-->
|
||||
<!-- Radio buttons -->
|
||||
<fieldset>
|
||||
<legend><strong>Radio buttons</strong></legend>
|
||||
<label for="radio-1">
|
||||
<input type="radio" id="radio-1" name="radio" value="radio-1" checked />
|
||||
Radio button
|
||||
</label>
|
||||
<label for="radio-2">
|
||||
<input type="radio" id="radio-2" name="radio" value="radio-2" />
|
||||
Radio button
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Tables -->
|
||||
<section id="tables">
|
||||
<h2>Tables</h2>
|
||||
<div class="overflow-auto">
|
||||
<table class="striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
<th scope="col">Heading</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
<td>Cell</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ./ Tables -->
|
||||
<!-- Switch -->
|
||||
<fieldset>
|
||||
<legend><strong>Switches</strong></legend>
|
||||
<label for="switch-1">
|
||||
<input type="checkbox" id="switch-1" name="switch-1" role="switch" checked />
|
||||
Switch
|
||||
</label>
|
||||
<label for="switch-2">
|
||||
<input type="checkbox" id="switch-2" name="switch-2" role="switch" />
|
||||
Switch
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<section id="modal">
|
||||
<h2>Modal</h2>
|
||||
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">
|
||||
Launch demo modal
|
||||
</button>
|
||||
</section>
|
||||
<!-- ./ Modal -->
|
||||
<!-- Buttons -->
|
||||
<input type="reset" value="Reset" onclick="event.preventDefault()" />
|
||||
<input type="submit" value="Submit" onclick="event.preventDefault()" />
|
||||
</form>
|
||||
</section>
|
||||
<!-- ./ Form elements-->
|
||||
|
||||
<!-- Accordions -->
|
||||
<section id="accordions">
|
||||
<h2>Accordions</h2>
|
||||
<details>
|
||||
<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 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>
|
||||
</section>
|
||||
<!-- ./ Accordions -->
|
||||
<!-- Modal -->
|
||||
<section id="modal">
|
||||
<h2>Modal</h2>
|
||||
<button class="contrast" data-target="modal-example" onclick="toggleModal(event)">
|
||||
Launch demo modal
|
||||
</button>
|
||||
</section>
|
||||
<!-- ./ Modal -->
|
||||
<hr>
|
||||
<!-- Accordions -->
|
||||
<section id="accordions">
|
||||
<h2>Accordions</h2>
|
||||
<details>
|
||||
<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 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>
|
||||
</section>
|
||||
<!-- ./ Accordions -->
|
||||
<hr>
|
||||
<!-- Article-->
|
||||
<article id="article">
|
||||
<h2>Article</h2>
|
||||
<p>
|
||||
Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non
|
||||
ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit
|
||||
pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra
|
||||
rutrum.
|
||||
</p>
|
||||
<footer>
|
||||
<small>Duis nec elit placerat, suscipit nibh quis, finibus neque.</small>
|
||||
</footer>
|
||||
</article>
|
||||
<!-- ./ Article-->
|
||||
|
||||
<!-- Article-->
|
||||
<article id="article">
|
||||
<h2>Article</h2>
|
||||
<p>
|
||||
Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non
|
||||
ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit
|
||||
pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra
|
||||
rutrum.
|
||||
</p>
|
||||
<footer>
|
||||
<small>Duis nec elit placerat, suscipit nibh quis, finibus neque.</small>
|
||||
</footer>
|
||||
</article>
|
||||
<!-- ./ Article-->
|
||||
<!-- Group -->
|
||||
<section id="group">
|
||||
<h2>Group</h2>
|
||||
<form>
|
||||
<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>
|
||||
</form>
|
||||
</section>
|
||||
<!-- ./ Group -->
|
||||
|
||||
<!-- Group -->
|
||||
<section id="group">
|
||||
<h2>Group</h2>
|
||||
<form>
|
||||
<fieldset role="group">
|
||||
<input name="email" type="email" placeholder="Enter your email" autocomplete="email" />
|
||||
<input type="submit" value="Subscribe" />
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
<!-- ./ Group -->
|
||||
<!-- Progress -- >
|
||||
<section id="progress">
|
||||
<h2>Progress bar</h2>
|
||||
<progress id="progress-1" value="25" max="100"></progress>
|
||||
<progress id="progress-2"></progress>
|
||||
</section>
|
||||
< !-- ./ Progress -->
|
||||
|
||||
<!-- Progress -->
|
||||
<section id="progress">
|
||||
<h2>Progress bar</h2>
|
||||
<progress id="progress-1" value="25" max="100"></progress>
|
||||
<progress id="progress-2"></progress>
|
||||
</section>
|
||||
<!-- ./ Progress -->
|
||||
<!-- Loading -- >
|
||||
<section id="loading">
|
||||
<h2>Loading</h2>
|
||||
<article aria-busy="true"></article>
|
||||
<button aria-busy="true">Please wait…</button>
|
||||
</section>
|
||||
< !-- ./ Loading -->
|
||||
</main>
|
||||
<!-- ./ Main -->
|
||||
|
||||
<!-- Loading -->
|
||||
<section id="loading">
|
||||
<h2>Loading</h2>
|
||||
<article aria-busy="true"></article>
|
||||
<button aria-busy="true">Please wait…</button>
|
||||
</section>
|
||||
<!-- ./ Loading -->
|
||||
</main>
|
||||
<!-- ./ Main -->
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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 -->
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Minimal theme switcher -->
|
||||
<script src="js/minimal-theme-switcher.js"></script>
|
||||
<!-- Modal -->
|
||||
<script src="js/modal.js"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const alignButtons = document.querySelectorAll(".change-row-align");
|
||||
alignButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
let dir = button.getAttribute('data-align');
|
||||
let row = button.closest('.row');
|
||||
if(dir == 'start'){
|
||||
row.classList.remove('align-center', 'align-end');
|
||||
row.classList.add('align-start');
|
||||
} else if(dir == 'center'){
|
||||
row.classList.remove('align-start', 'align-end');
|
||||
row.classList.add('align-center');
|
||||
} else {
|
||||
row.classList.remove('align-start', 'align-center');
|
||||
row.classList.add('align-end');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
<!-- Modal -->
|
||||
<script src="js/modal.js"></script>
|
||||
</body>
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue