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

Move styles in SCSS vars to CSS vars

Browse source
This commit is contained in:
Lucas 2020-09-29 08:38:35 +07:00
parent f67044ecae
commit 9b1ef33577
49 changed files with 2921 additions and 1841 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/index.html
View file

@ -133,11 +133,11 @@
<h2>Themes</h2>
<h3>Pico is shipped with 2 consistents themes: Light & Dark.</h3>
</hgroup>
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code>.</p>
<p>The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled <code><i>prefers-color-scheme</i>: <u>dark</u></code></p>
<article aria-label="Theme switcher">
<button class="contrast theme-switcher">...</button>
</article>
<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>
<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>
<form class="grid">
@ -301,7 +301,7 @@
</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>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> provide a responsive <code><i>margin-bottom</i></code> to separate your sections.</p>
</section><!-- ./ Docs: Container -->
@ -327,7 +327,7 @@
&lt;/<b>div</b>&gt;</code></pre>
</article>
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code>.</p>
<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
<p>To go further, discover how to <a href="https://picocss.com/examples/bootstrap-grid/">merge Pico with the Bootstrap grid system</a>.</p>
<details>
<summary>
@ -353,7 +353,7 @@
<h2>Horizontal scroller</h2>
<h3><code>&lt;<b>figure</b>&gt;</code> act as a container to make any content scrollable horizontally.</h3>
</hgroup>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code>.</p>
<p>Useful to have responsives <code>&lt;<b>table</b>&gt;</code></p>
<figure>
<table>
<thead>
@ -938,7 +938,7 @@
<!-- Love -->
<section id="love">
<h2>We love <code>.classes</code></h2>
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code>.</p>
<p>As a starting point, Pico chose to be as neutral and semantic as possible using very few <code>.classes</code></p>
<p>But off course, <code>.classes</code> are not a bad practice at all.</p>
<p>Feel free to use <em>modifiers</em>.</p>
<div data-theme="valid">