mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 17:36:15 -04:00
Docs: Sidebar styles
This commit is contained in:
Lucas Larroche
parent
7e02e9f959
commit
c71144455b
52 changed files with 247 additions and 159 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -55,7 +55,7 @@ body > main {
|
|||
@media (min-width: 992px) {
|
||||
body > main {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
}
|
||||
|
|
@ -70,37 +70,6 @@ body > main div[role=document] {
|
|||
min-width: 0;
|
||||
}
|
||||
|
||||
div[role=document] > section::before {
|
||||
display: block;
|
||||
height: calc(2rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-2rem - 3.5rem + 0.5rem);
|
||||
content: "";
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(2.5rem + 3.5rem - 0.5rem);
|
||||
height: calc(-2.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(3rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(3.5rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-3.5rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
div[role=document] > section::before {
|
||||
height: calc(4rem + 3.5rem - 0.5rem);
|
||||
margin-top: calc(-4rem - 3.5rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
|
|
@ -121,10 +90,7 @@ svg {
|
|||
*/
|
||||
main > aside nav {
|
||||
width: 100%;
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
main > aside nav h1 {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * 2);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav {
|
||||
|
|
@ -135,10 +101,43 @@ main > aside nav h1 {
|
|||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
main > aside nav h1 {
|
||||
}
|
||||
main > aside nav a#toggle-docs-navigation {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
}
|
||||
main > aside nav a#toggle-docs-navigation svg {
|
||||
vertical-align: -3px;
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav a#toggle-docs-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
main > aside nav.closed-on-mobile {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
}
|
||||
main > aside nav.closed-on-mobile a#toggle-docs-navigation svg.collapse {
|
||||
display: none;
|
||||
}
|
||||
main > aside nav.closed-on-mobile details {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
main > aside nav.closed-on-mobile details {
|
||||
display: block;
|
||||
}
|
||||
main > aside nav.closed-on-mobile > a#toggle-docs-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
main > aside nav.open a#toggle-docs-navigation svg.expand {
|
||||
display: none;
|
||||
}
|
||||
main > aside li,
|
||||
main > aside summary {
|
||||
padding-top: 0;
|
||||
|
|
@ -146,7 +145,7 @@ main > aside summary {
|
|||
font-size: 16px;
|
||||
}
|
||||
main > aside li a {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
}
|
||||
main > aside li a svg {
|
||||
vertical-align: middle;
|
||||
|
|
@ -160,7 +159,6 @@ main > aside a.active:hover {
|
|||
color: var(--primary);
|
||||
}
|
||||
main > aside details {
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
main > aside details summary {
|
||||
|
|
@ -172,6 +170,9 @@ main > aside details summary {
|
|||
main > aside details summary::after {
|
||||
display: none;
|
||||
}
|
||||
main > aside details[open] > summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
main > aside details[open] > summary:not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
|
|
@ -273,6 +274,10 @@ main > aside details[open] > summary:not(:focus) {
|
|||
/**
|
||||
* Docs: Typography
|
||||
*/
|
||||
h1 {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
section > hgroup {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
2
docs/css/pico.docs.min.css
vendored
2
docs/css/pico.docs.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,7 @@
|
|||
|
||||
// Imports
|
||||
import themeSwitcher from './src/theme-switcher.js';
|
||||
import toggleNavigation from './src/toggle-navigation';
|
||||
|
||||
// Theme switcher
|
||||
themeSwitcher.addButton({
|
||||
|
|
@ -14,4 +15,7 @@ themeSwitcher.addButton({
|
|||
class: 'contrast switcher theme-switcher',
|
||||
target: 'body',
|
||||
});
|
||||
themeSwitcher.init();
|
||||
themeSwitcher.init();
|
||||
|
||||
// Toggle navigation
|
||||
toggleNavigation.init();
|
||||
2
docs/js/commons.min.js
vendored
2
docs/js/commons.min.js
vendored
|
|
@ -1 +1 @@
|
|||
"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var t;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){t="dark"==this.scheme?this.change.dark:this.change.light,e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))}.bind(this))}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init()}();
|
||||
"use strict";!function(){var t={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(t){t.addEventListener("click",function(t){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(t){var e=document.createElement(t.tag);e.className=t.class,document.querySelector(t.target).appendChild(e)},set scheme(t){"auto"==t?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=t&&"light"!=t||(this._scheme=t),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(t){e="dark"==this.scheme?this.change.dark:this.change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}},e={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){this.toggleLink.addEventListener("click",function(t){t.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)}.bind(this),!1)},applyState:function(){},get state(){return this._state},set state(t){this._state=t}};t.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.init(),e.init()}();
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
export const colorPicker = {
|
||||
|
||||
// Config
|
||||
colors: null,
|
||||
buttonsTarget: '#customization article[data-theme="generated"]',
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
export const grid = {
|
||||
|
||||
// Config
|
||||
buttons: {
|
||||
text: {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
*/
|
||||
|
||||
export const themeSwitcher = {
|
||||
|
||||
// Config
|
||||
_scheme: 'auto',
|
||||
change: {
|
||||
|
|
|
|||
53
docs/js/src/toggle-navigation.js
Normal file
53
docs/js/src/toggle-navigation.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/*
|
||||
* Toggle navigation
|
||||
*
|
||||
* Pico.css - https://picocss.com
|
||||
* Copyright 2019-2021 - Licensed under MIT
|
||||
*/
|
||||
|
||||
export const toggleNavigation = {
|
||||
|
||||
// Config
|
||||
_state: 'closed-on-mobile',
|
||||
toggleLink: document.getElementById('toggle-docs-navigation'),
|
||||
nav: document.querySelector('main > aside > nav'),
|
||||
|
||||
// Init
|
||||
init() {
|
||||
this.onToggleClick()
|
||||
},
|
||||
|
||||
onToggleClick() {
|
||||
this.toggleLink.addEventListener(
|
||||
'click',
|
||||
function (event) {
|
||||
event.preventDefault();
|
||||
if (this.state == 'closed-on-mobile') {
|
||||
this.state = 'open';
|
||||
} else {
|
||||
this.state = 'closed-on-mobile';
|
||||
}
|
||||
this.nav.removeAttribute('class');
|
||||
this.nav.classList.add(this.state);
|
||||
}.bind(this),
|
||||
false
|
||||
);
|
||||
},
|
||||
|
||||
// Apply navigation state
|
||||
applyState() {
|
||||
|
||||
},
|
||||
|
||||
// Get state
|
||||
get state() {
|
||||
return this._state;
|
||||
},
|
||||
|
||||
// Set state
|
||||
set state(state) {
|
||||
this._state = state;
|
||||
},
|
||||
};
|
||||
|
||||
export default toggleNavigation;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -2,6 +2,10 @@
|
|||
* Docs: Typography
|
||||
*/
|
||||
|
||||
h1 {
|
||||
margin-top: -0.25em;
|
||||
}
|
||||
|
||||
section > hgroup {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) * 2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,11 @@
|
|||
*/
|
||||
|
||||
main > aside {
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
|
||||
h1 {
|
||||
margin-bottom: calc(var(--typography-spacing-vertical) / 2);
|
||||
}
|
||||
|
||||
margin-bottom: calc(var(--block-spacing-vertical) * 2);
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
position: fixed;
|
||||
width: 200px;
|
||||
|
|
@ -18,12 +15,58 @@ main > aside {
|
|||
margin-bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
a#toggle-docs-navigation {
|
||||
margin: 0;
|
||||
margin-bottom: var(--spacing);
|
||||
padding: 0;
|
||||
padding-bottom: var(--spacing);
|
||||
border-bottom: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
svg {
|
||||
vertical-align: -3px;
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.closed-on-mobile {
|
||||
margin-bottom: var(--block-spacing-vertical);
|
||||
|
||||
a#toggle-docs-navigation {
|
||||
svg.collapse {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
> a#toggle-docs-navigation {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
a#toggle-docs-navigation {
|
||||
svg.expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
li,
|
||||
summary {
|
||||
|
|
@ -33,7 +76,7 @@ main > aside {
|
|||
}
|
||||
|
||||
li a {
|
||||
padding: 0.25rem 0.5rem;
|
||||
padding: 0.375rem 0.5rem;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
|
|
@ -51,7 +94,6 @@ main > aside {
|
|||
}
|
||||
|
||||
details {
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: none;
|
||||
|
||||
summary {
|
||||
|
|
@ -66,8 +108,12 @@ main > aside {
|
|||
}
|
||||
|
||||
&[open] {
|
||||
> summary:not(:focus) {
|
||||
color: var(--h1-color);
|
||||
> summary {
|
||||
margin-bottom: calc(var(--spacing) * 0.75);
|
||||
|
||||
&:not(:focus) {
|
||||
color: var(--h1-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ body > main {
|
|||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
--block-spacing-horizontal: calc(var(--spacing) * 1.75);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
|
||||
grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
|
||||
display: grid;
|
||||
grid-template-columns: 200px auto;
|
||||
}
|
||||
|
|
@ -30,42 +30,6 @@ body > main {
|
|||
}
|
||||
}
|
||||
|
||||
// Anchors hacks for internal links
|
||||
div[role="document"] > section::before {
|
||||
display: block;
|
||||
height: calc(2rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-2rem - #{$navHeight} + 0.5rem);
|
||||
content: "";
|
||||
|
||||
@if map-get($breakpoints, "sm") {
|
||||
@media (min-width: map-get($breakpoints, "sm")) {
|
||||
height: calc(2.5rem + #{$navHeight} - 0.5rem);
|
||||
height: calc(-2.5rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "md") {
|
||||
@media (min-width: map-get($breakpoints, "md")) {
|
||||
height: calc(3rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-3rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "lg") {
|
||||
@media (min-width: map-get($breakpoints, "lg")) {
|
||||
height: calc(3.5rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-3.5rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@if map-get($breakpoints, "xl") {
|
||||
@media (min-width: map-get($breakpoints, "xl")) {
|
||||
height: calc(4rem + #{$navHeight} - 0.5rem);
|
||||
margin-top: calc(-4rem - #{$navHeight} + 0.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// External links
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,16 @@
|
|||
<aside>
|
||||
<nav>
|
||||
<h1>Documentation</h1>
|
||||
<nav class="closed-on-mobile">
|
||||
<a href="./" class="secondary" id="toggle-docs-navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Expand</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16">
|
||||
<title>Collapse</title>
|
||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 11.707V15.5a.5.5 0 0 1-1 0v-3.793z"></path>
|
||||
</svg>
|
||||
Table of content
|
||||
</a>
|
||||
<details>
|
||||
<summary>Getting started</summary>
|
||||
<ul>
|
||||
|
|
@ -53,11 +63,10 @@
|
|||
</ul>
|
||||
</details>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<script>
|
||||
const activeLink = document.querySelector(`aside a#${props.active}`);
|
||||
const parentAccordion = activeLink.closest('details');
|
||||
activeLink.classList.add('active');
|
||||
parentAccordion.setAttribute('open', 'true');
|
||||
</script>
|
||||
<script>
|
||||
const activeLink = document.querySelector(`aside a#${props.active}`);
|
||||
const parentAccordion = activeLink.closest('details');
|
||||
activeLink.classList.add('active');
|
||||
parentAccordion.setAttribute('open', 'true');
|
||||
</script>
|
||||
</aside>
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="accordions">
|
||||
<hgroup>
|
||||
<h2>Accordions</h2>
|
||||
<h3>Toggle sections of content in pure HTML, without JavaScript.</h3>
|
||||
<h1>Accordions</h1>
|
||||
<h2>Toggle sections of content in pure HTML, without JavaScript.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Accordions examples">
|
||||
<details>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="buttons">
|
||||
<hgroup>
|
||||
<h2>Buttons</h2>
|
||||
<h3>The essential button in pure HTML, without <code>.classes</code> for the default style.</h3>
|
||||
<h1>Buttons</h1>
|
||||
<h2>The essential button in pure HTML, without <code>.classes</code> for the default style.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Button example">
|
||||
<button aria-label="Button">Button</button>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="cards">
|
||||
<hgroup>
|
||||
<h2>Cards</h2>
|
||||
<h3>A flexible container with graceful spacings across devices and viewports.</h3>
|
||||
<h1>Cards</h1>
|
||||
<h2>A flexible container with graceful spacings across devices and viewports.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Card example">
|
||||
I'm a card!
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="classless">
|
||||
<hgroup>
|
||||
<h2>Class-less version</h2>
|
||||
<h3>For wild HTML purists!</h3>
|
||||
<h1>Class-less version</h1>
|
||||
<h2>For wild HTML purists!</h2>
|
||||
</hgroup>
|
||||
<p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
|
||||
<p>In this version, <code><<b>header</b>></code>, <code><<b>main</b>></code>, and <code><<b>footer</b>></code> act as <a href="./containers.html">containers</a> to define a centered or a fluid viewport.</p>
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
<div role="document">
|
||||
<section id="containers">
|
||||
<hgroup>
|
||||
<h2>Containers</h2>
|
||||
<h3>
|
||||
<h1>Containers</h1>
|
||||
<h2>
|
||||
<code>.container</code> enable a centered viewport.<br>
|
||||
<code>.container-fluid</code> enable a <code><u>100%</u></code> layout.
|
||||
</h3>
|
||||
</h2>
|
||||
</hgroup>
|
||||
|
||||
<pre><code><<b>body</b>>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="customization">
|
||||
<hgroup>
|
||||
<h2>Customization</h2>
|
||||
<h3>You can customize themes with SCSS or, you can edit the CSS variables.</h3>
|
||||
<h1>Customization</h1>
|
||||
<h2>You can customize themes with SCSS or, you can edit the CSS variables.</h2>
|
||||
</hgroup>
|
||||
<p>Example: <strong>pick a color!</strong></p>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="forms">
|
||||
<hgroup>
|
||||
<h2>Forms</h2>
|
||||
<h3>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h3>
|
||||
<h1>Forms</h1>
|
||||
<h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
|
||||
</hgroup>
|
||||
<p>Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You can use <code>.grid</code> inside a form.</p>
|
||||
<p>All natives form elements are fully customizable and themeable with CSS variables.</p>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="grid">
|
||||
<hgroup>
|
||||
<h2>Grid</h2>
|
||||
<h3><code>.grid</code> enable a minimal grid system with auto-layout columns.</h3>
|
||||
<h1>Grid</h1>
|
||||
<h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Grid example">
|
||||
<div class="grid">
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="start">
|
||||
<hgroup>
|
||||
<h2>Usage</h2>
|
||||
<h3>Works without package manager or dependencies 🙂!</h3>
|
||||
<h1>Usage</h1>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="loading">
|
||||
<hgroup>
|
||||
<h2>Loading</h2>
|
||||
<h3><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h3>
|
||||
<h1>Loading</h1>
|
||||
<h2><code><i>aria-busy</i>=<u>"true"</u></code> enable a loading indicator.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Loading buttons example">
|
||||
<button aria-busy="true">Please wait…</button>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="navs">
|
||||
<hgroup>
|
||||
<h2>Navs</h2>
|
||||
<h3>The essential navbar component in pure semantic HTML.</h3>
|
||||
<h1>Navs</h1>
|
||||
<h2>The essential navbar component in pure semantic HTML.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Nav example">
|
||||
<nav>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="progress">
|
||||
<hgroup>
|
||||
<h2>Progress</h2>
|
||||
<h3>Progress bar element in pure HTML, without JavaScript.</h3>
|
||||
<h1>Progress</h1>
|
||||
<h2>Progress bar element in pure HTML, without JavaScript.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Progress bar example">
|
||||
<progress value="25" max="100"></progress>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="rtl">
|
||||
<hgroup>
|
||||
<h2>RTL</h2>
|
||||
<h3>Support for right-to-left text in Pico.</h3>
|
||||
<h1>RTL</h1>
|
||||
<h2>Support for right-to-left text in Pico.</h2>
|
||||
</hgroup>
|
||||
<p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element.</p>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="scroller">
|
||||
<hgroup>
|
||||
<h2>Horizontal scroller</h2>
|
||||
<h3><code><<b>figure</b>></code> acts as a container to make any content scrollable horizontally.</h3>
|
||||
<h1>Horizontal scroller</h1>
|
||||
<h2><code><<b>figure</b>></code> acts as a container to make any content scrollable horizontally.</h2>
|
||||
</hgroup>
|
||||
<p>Useful to have responsive <code><<b>table</b>></code></p>
|
||||
<figure>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="tables">
|
||||
<hgroup>
|
||||
<h2>Tables</h2>
|
||||
<h3>Default styles for tables without <code>.classes</code></h3>
|
||||
<h1>Tables</h1>
|
||||
<h2>Default styles for tables without <code>.classes</code></h2>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="themes">
|
||||
<hgroup>
|
||||
<h2>Themes</h2>
|
||||
<h3>Pico is shipped with 2 consistent themes: Light & Dark.</h3>
|
||||
<h1>Themes</h1>
|
||||
<h2>Pico is shipped with 2 consistent themes: Light & Dark.</h2>
|
||||
</hgroup>
|
||||
<p>The Light theme is used by default. The Dark theme is automatically enabled if the user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
|
||||
<article aria-label="Theme switcher">
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="tooltips">
|
||||
<hgroup>
|
||||
<h2>Tooltips</h2>
|
||||
<h3>Enable tooltips everywhere in pure HTML, without JavaScript.</h3>
|
||||
<h1>Tooltips</h1>
|
||||
<h2>Enable tooltips everywhere in pure HTML, without JavaScript.</h2>
|
||||
</hgroup>
|
||||
<article aria-label="Tooltips examples">
|
||||
<p>Tooltip on a <a href="#" onclick="event.preventDefault()" data-tooltip="Tooltip">link</a></p>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<div role="document">
|
||||
<section id="typography">
|
||||
<hgroup>
|
||||
<h2>Typography</h2>
|
||||
<h3>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h3>
|
||||
<h1>Typography</h1>
|
||||
<h2>All typographic elements are responsive, allowing text to scale gracefully across devices and viewports.</h2>
|
||||
</hgroup>
|
||||
<figure>
|
||||
<table role="grid">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<div role="document">
|
||||
<section id="we-love-classes">
|
||||
<h2>We love <code>.classes</code></h2>
|
||||
<h1>We love <code>.classes</code></h1>
|
||||
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
|
||||
<p>But of course, <code>.classes</code> are not a bad practice at all.</p>
|
||||
<p>Feel free to use <em>modifiers</em>.</p>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue