mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improvements

Browse source 
- Small adjustments for table striping
- Consitent shadows for Dark mode
- Bigger Checkboxes, Radios and Switches
- Disable transitions for Checkboxes, Radios and Details
- Simplier .grids in docs
- Replace .js for internal scroll with CSS
- Better aside adjustment in .js
- Many small improvements in docs
This commit is contained in:
Lucas 2019-12-08 10:35:18 +07:00
parent 772425bf2f
commit c8ddb87647
26 changed files with 209 additions and 288 deletions
Download patch file Download diff file Expand all files Collapse all files

17
docs/css/pico.docs.css
View file

@ -22,6 +22,13 @@
--nav-border: rgba(115, 130, 140, 0.2);
}
/**
* Docs: Document
*/
html {
scroll-behavior: smooth;
}
/**
* Docs: Main (Grid)
*/
@ -106,6 +113,11 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
content: '';
}
form.grid > input:not([type=checkbox]):not([type=radio]),
form.grid > button {
margin-bottom: 0;
}
/**
* Docs: Aside
*/
@ -181,6 +193,11 @@ main > aside details[open] summary {
/**
* Docs: Documentation
*/
#start a[role="button"] svg {
padding-left: .66rem;
vertical-align: baseline;
}
#themes button i {
font-style: normal;
}

2
docs/css/pico.docs.min.css vendored
View file

File diff suppressed because one or more lines are too long

BIN
docs/img/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.2 KiB

251
docs/index.html
View file

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">
<meta name="description" content="">
<title>Pico.css • Graceful & Minimal CSS design system</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="../css/pico.min.css">
<link rel="stylesheet" href="css/pico.docs.min.css">
</head>
@ -25,7 +26,7 @@
<li>Documentation</li>
</ul>
<ul>
<!--<li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>-->
<li><a href="https://picocss.com#examples" class="secondary">Examples</a></li>
<li><a href="#docs" class="secondary">Docs</a></li>
<li>
<a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository">
@ -99,10 +100,16 @@
<h3>Work without package manager or dependencies 🙂!</h3>
</hgroup>
<p>1. Download Pico:</p>
<p><a href="https://github.com/picocss/pico/archive/master.zip" role="button">Download pico.css</a></p>
<p>
<a href="https://github.com/picocss/pico/archive/master.zip" role="button">
Download pico.css
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="0.66rem">
<path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
</svg>
</a></p>
<p>
2. Link the CSS:<br>
<small>(~5KB minified and gzipped)</small>
<small>(5.6 KB minified and gzipped)</small>
</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"css/pico.min.css"</u>&gt;</code></pre>
<p>Starter template:</p>
@ -137,17 +144,11 @@
<p>Themes can be forced on document level <code>&lt;<b>html</b> <i>data-theme</i>=<u>"light"</u>&gt;</code> or on any HTML element <code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;</code>.</p>
<article data-theme="light">
<h4>Light theme</h4>
<section class="grid">
<div>
<input type="text" name="login" placeholder="Login" aria-label="Login" required>
</div>
<div>
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
</div>
<div>
<button type="submit" aria-label="Example button">Login</button>
</div>
</section>
<form class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="login" required>
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="password" required>
<button type="submit" aria-label="Example button">Login</button>
</form>
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"light"</u>&gt;
...
@ -156,17 +157,11 @@
</article>
<article data-theme="dark">
<h4>Dark theme</h4>
<section class="grid">
<div>
<input type="text" name="login" placeholder="Login" aria-label="Login" required>
</div>
<div>
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
</div>
<div>
<button type="submit" aria-label="Example button">Login</button>
</div>
</section>
<form class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="login" required>
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="password" required>
<button type="submit" aria-label="Example button">Login</button>
</form>
<pre><code>&lt;<b>article</b> <i>data-theme</i>=<u>"dark"</u>&gt;
...
@ -184,23 +179,19 @@
<h5>Pick a color!</h5>
<article data-theme="generated">
<h4><span class="name">Custom theme</span></h4>
<section class="grid">
<div>
<input type="text" name="login" placeholder="Login" aria-label="Login" required>
</div>
<div>
<input type="password" name="password" placeholder="Password" aria-label="Password" required>
</div>
<div>
<form>
<section class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="login" required>
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="password" required>
<button type="submit" aria-label="Example button">Login</button>
</div>
</section>
<fieldset>
<label for="remember">
<input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
Remember me
</label>
</fieldset>
</section>
<fieldset>
<label for="remember">
<input type="checkbox" role="switch" id="remember" name="remember" checked aria-checked="true">
Remember me
</label>
</fieldset>
</form>
</article>
<p>SCSS:</p>
@ -262,13 +253,9 @@
<p>In this version, <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> act as <a href="#containers">containers</a> to define a centered or a fluid viewport.</p>
<p><strong>Usage:</strong></p>
<p>Use the default <code>.classless</code> version if you need centered viewports:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.classless.min.css"</u>&gt;</code></pre>
<p>Or use the <code>.fluid.classless</code> version if you need a fluid container:</p>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
<pre><code>&lt;<b>link</b> <i>rel</i>=<u>"stylesheet</u>" <i>href</i>=<u>"css/pico.fluid.classless.min.css"</u>&gt;</code></pre>
</section><!-- ./ Docs: Classless -->
<!-- Docs: Container -->
@ -301,25 +288,25 @@
<tbody>
<tr>
<th>Breakpoint</th>
<td>&lt;576px</td>
<td>≥576px</td>
<td>≥768px</td>
<td>≥992px</td>
<td>≥1200px</td>
<td>&lt;576<small>px</small></td>
<td>≥576<small>px</small></td>
<td>≥768<small>px</small></td>
<td>≥992<small>px</small></td>
<td>≥1200<small>px</small></td>
</tr>
<tr>
<th>Viewport</th>
<td>None&nbsp;(auto)</td>
<td>540px</td>
<td>720px</td>
<td>960px</td>
<td>1140px</td>
<td>None&nbsp;<small>(auto)</small></td>
<td>540<small>px</small></td>
<td>720<small>px</small></td>
<td>960<small>px</small></td>
<td>1140<small>px</small></td>
</tr>
</tbody>
</table>
</figure>
<p><code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code> and <code>&lt;<b>footer</b>&gt;</code> as direct childs of <code>&lt;<b>body</b>&gt;</code> provide a responsive vertical <code><i>padding</i></code>.</p>
<p><code>&lt;<b>section</b>&gt;</code> as direct child of <code>&lt;<b>main</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
<p><code>&lt;<b>section</b>&gt;</code> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
</section><!-- ./ Docs: Container -->
<!-- Docs: Grid -->
@ -448,59 +435,59 @@
<tbody>
<tr>
<th>Base&nbsp;font</th>
<td>16px</td>
<td>17px</td>
<td>18px</td>
<td>19px</td>
<td>20px</td>
<td>16<small>px</small></td>
<td>17<small>px</small></td>
<td>18<small>px</small></td>
<td>19<small>px</small></td>
<td>20<small>px</small></td>
</tr>
<tr>
<th>h1</th>
<td>32px</td>
<td>34px</td>
<td>36px</td>
<td>38px</td>
<td>40px</td>
<td>32<small>px</small></td>
<td>34<small>px</small></td>
<td>36<small>px</small></td>
<td>38<small>px</small></td>
<td>40<small>px</small></td>
</tr>
<tr>
<th>h2</th>
<td>28px</td>
<td>29.75px</td>
<td>31.5px</td>
<td>33.25px</td>
<td>35px</td>
<td>28<small>px</small></td>
<td>29<small>px</small></td>
<td>31.5<small>px</small></td>
<td>33.25<small>px</small></td>
<td>35<small>px</small></td>
</tr>
<tr>
<th>h3</th>
<td>24px</td>
<td>25.5px</td>
<td>27px</td>
<td>28.5px</td>
<td>30px</td>
<td>24<small>px</small></td>
<td>25.5<small>px</small></td>
<td>27<small>px</small></td>
<td>28.5<small>px</small></td>
<td>30<small>px</small></td>
</tr>
<tr>
<th>h4</th>
<td>20px</td>
<td>21.25px</td>
<td>22.5px</td>
<td>23.75px</td>
<td>35px</td>
<td>20<small>px</small></td>
<td>21.25<small>px</small></td>
<td>22.5<small>px</small></td>
<td>23.75<small>px</small></td>
<td>25<small>px</small></td>
</tr>
<tr>
<th>h5</th>
<td>18px</td>
<td>19.125px</td>
<td>20.25px</td>
<td>21.375px</td>
<td>22.5px</td>
<td>18<small>px</small></td>
<td>19.125<small>px</small></td>
<td>20.25<small>px</small></td>
<td>21.375<small>px</small></td>
<td>22.5<small>px</small></td>
</tr>
<tr>
<th>h6</th>
<td>16px</td>
<td>17px</td>
<td>18px</td>
<td>19px</td>
<td>20px</td>
<td>16<small>px</small></td>
<td>17<small>px</small></td>
<td>18<small>px</small></td>
<td>19<small>px</small></td>
<td>20<small>px</small></td>
</tr>
</tbody>
</table>
@ -627,18 +614,14 @@
<article>
<form>
<section class="grid">
<div>
<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>
<label for="firstname">
First name
<input type="text" id="firstname" name="firstname" placeholder="First name" required>
</label>
<label for="lastname">
Last name
<input type="text" id="lastname" name="lastname" placeholder="Last name" required>
</label>
</section>
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="Email address" required>
@ -652,20 +635,16 @@
<em>&lt;!-- Grid --&gt;</em>
&lt;<b>section</b> <i>class</i>=<u>"grid"</u>&gt;
&lt;<b>div</b>&gt;
<em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
First name
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt;
&lt;/<b>label</b>&gt;
&lt;/<b>div</b>&gt;
<em>&lt;!-- Markup example 1: input is inside label --&gt;</em>
&lt;<b>label</b> <i>for</i>=<u>"firstname"</u>&gt;
First name
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>&gt;
&lt;/<b>label</b>&gt;
&lt;<b>div</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"lastname"</u>&gt;
Last name
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>&gt;
&lt;/<b>label</b>&gt;
&lt;/<b>div</b>&gt;
&lt;<b>label</b> <i>for</i>=<u>"lastname"</u>&gt;
Last name
&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>&gt;
&lt;/<b>label</b>&gt;
&lt;/<b>section</b>&gt;
@ -682,21 +661,11 @@
</article>
<p>Disabled and validation states:</p>
<article>
<form>
<section class="grid">
<div>
<input type="text" placeholder="Valid" aria-label="Valid" valid>
</div>
<div>
<input type="text" placeholder="Invalid" aria-label="Invalid" invalid>
</div>
<div>
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
</div>
<div>
<input type="text" value="Readonly" aria-label="Readonly" readonly>
</div>
</section>
<form class="grid">
<input type="text" placeholder="Valid" aria-label="Valid" valid>
<input type="text" placeholder="Invalid" aria-label="Invalid" invalid>
<input type="text" placeholder="Disabled" aria-label="Disabled" disabled>
<input type="text" value="Readonly" aria-label="Readonly" readonly>
</form>
<pre><code>&lt;<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>valid</i>&gt;
@ -968,21 +937,23 @@
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
<p>Feel free to use <em>modifiers</em>.</p>
<section data-theme="valid">
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"warning"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
</section>
<p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p>
<section data-theme="invalid">
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
<pre><code>&lt;<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>&gt;Action&lt;/<b>button</b>&gt;<br></code></pre>
</section>
</section><!-- ./ Love -->
<!-- Footer -->
<footer>
<p><small>Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a>.</small></p>
<hr>
<p>
<small>
Openly inspired by <a href="https://getbootstrap.com/" class="secondary">Bootstrap</a>, <a href="https://picturepan2.github.io/spectre/" class="secondary">Spectre</a>, <a href=" https://kbrsh.github.io/wing/" class="secondary">Wing</a>, <a href="https://www.cssbed.com/" class="secondary">CSS Bed</a> & <a href="https://necolas.github.io/normalize.css/" class="secondary">Normalize</a><br>
Licensed under the <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT License</a><br>
</small>
</p>
</footer><!-- ./ Footer -->
</div><!-- ./ Document -->

1
docs/js/pico.docs.js
View file

@ -1,5 +1,4 @@
// @prepros-append src/aside.js
// @prepros-append src/theme-switcher.js
// @prepros-append src/internal-scroll.js
// @prepros-append src/grid.js
// @prepros-append src/color-picker.js

2
docs/js/pico.docs.min.js vendored
View file

File diff suppressed because one or more lines are too long

11
docs/js/src/aside.js
View file

@ -8,11 +8,12 @@
(function() {
// Close details if aside > nav have a scrollbar
var navWidth = document.querySelector('aside nav').clientWidth;
if (navWidth < 200) {
var asideDetails = document.querySelectorAll("aside details");
for (var i = 1; i < asideDetails.length; i++) {
asideDetails[i].removeAttribute("open");
var nav = document.querySelector("aside nav");
var navDetails = document.querySelectorAll("aside details");
if (nav.clientHeight < nav.scrollHeight) {
for (var i = 1; i < navDetails.length; i++) {
navDetails[i].removeAttribute("open");
}
}

1
docs/js/src/color-picker.js
View file

@ -12,7 +12,6 @@
*/
var colors = {
list: 'json/material-colors.json',
target: '#customization h5', // Buttons inserted after target
selectorButton: '#customization button[data-color]', // Button selector in Dom
selectorTheme: '#customization', // Theme selector in Dom

97
docs/js/src/internal-scroll.js
View file

@ -1,97 +0,0 @@
/*!
* 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; i<links.length; i++) {
if (links[i].href.indexOf('#') != -1) {
links[i].addEventListener('click', function(event) {
internalClick(event.target);
}, false);
}
}
}
/**
* Internal Click
*
* @param {element} link
*/
function internalClick(link) {
event.preventDefault();
var anchor = link.href.split("#");
if (anchor[1] != '') {
anchor = setAnchor(anchor[1]);
anchor = document.getElementById(anchor);
scrollToAnchor(anchor);
}
}
/**
* Set anchor
* Change anchor if needed
* @param {string} anchor
*/
function setAnchor(anchor) {
mobile = window.matchMedia("(max-width: 991.99px)");
if (!mobile.matches) {
if (anchor == "docs") {
anchor = "start";
}
}
return anchor;
}
/**
* Scroll to anchor
*
* @param {element} anchor
*/
function scrollToAnchor(anchor) {
var top = distanceToTop(anchor);
window.scrollBy({ top: top, left: 0, behavior: 'smooth' });
}
/**
* Get distance to top
*
* @param {element} target
*/
function distanceToTop(target) {
return Math.floor(target.getBoundingClientRect().top);
}
})();

7
docs/scss/layout/_document.scss Normal file
View file

@ -0,0 +1,7 @@
/**
* Docs: Document
*/
html{
scroll-behavior:smooth;
}

10
docs/scss/layout/_documentation.scss
View file

@ -5,6 +5,16 @@
// Docs: Themes
// ––––––––––––––––––––
#start {
a[role="button"] svg {
padding-left: .66rem;
vertical-align: baseline;
}
}
// Docs: Themes
// ––––––––––––––––––––
#themes {
button i {
font-style: normal;

10
docs/scss/layout/_main.scss
View file

@ -79,3 +79,13 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
background-size: .66rem auto;
content: '';
}
// Form grid
// ––––––––––––––––––––
form.grid {
> input:not([type=checkbox]):not([type=radio]),
> button {
margin-bottom: 0;
}
}

1
docs/scss/pico.docs.scss
View file

@ -9,6 +9,7 @@
@import "themes/docs";
// Layout
@import "layout/document";
@import "layout/main";
@import "layout/aside";
@import "layout/documentation";