mirror of
https://github.com/picocss/pico.git
synced 2025-04-21 17:16:14 -04:00
Improved documentation
+ fix card-sectioning (:last-child)
This commit is contained in:
Lucas
parent
434cbe02ac
commit
5f4b78a22c
13 changed files with 56 additions and 52 deletions
|
|
@ -1202,7 +1202,7 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
article > *:not(footer):not(pre):last-child {
|
||||
article > *:not(header):not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
css/pico.classless.min.css
vendored
2
css/pico.classless.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1425,7 +1425,7 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
article > *:not(footer):not(pre):last-child {
|
||||
article > *:not(header):not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1198,7 +1198,7 @@ article {
|
|||
}
|
||||
}
|
||||
|
||||
article > *:not(footer):not(pre):last-child {
|
||||
article > *:not(header):not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
css/pico.min.css
vendored
2
css/pico.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -95,7 +95,7 @@ div[role="document"] > section::before {
|
|||
}
|
||||
}
|
||||
|
||||
div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
|
|
|||
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
|
|
@ -38,10 +38,10 @@
|
|||
</nav><!-- ./ Nav -->
|
||||
|
||||
<!-- Main -->
|
||||
<main class="container">
|
||||
<main class="container" id="docs">
|
||||
|
||||
<!-- Aside -->
|
||||
<aside id="docs">
|
||||
<aside>
|
||||
<nav>
|
||||
<h1>Documentation</h1>
|
||||
<details open>
|
||||
|
|
@ -82,13 +82,7 @@
|
|||
<summary>Extend</summary>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#love" class="secondary">
|
||||
We
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
||||
</svg>
|
||||
.classes
|
||||
</a>
|
||||
<a href="#love" class="secondary">We love .classes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
|
@ -254,6 +248,7 @@
|
|||
|
||||
<p>Colors can be modified in <a href="https://github.com/picocss/pico/tree/master/scss/themes">scss/themes/</a>.</p>
|
||||
<p>Spacings, Typography, Rounded, Transitions, Breakpoints, etc. can be modified in <a href="https://github.com/picocss/pico/blob/master/scss/_variables.scss">scss/_variables.scss</a>.</p>
|
||||
<p>You can also compile pico with only the modules you need to generate a slimer version. Example in <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p>
|
||||
</section><!-- ./ Docs: Customization -->
|
||||
|
||||
|
||||
|
|
@ -360,9 +355,9 @@
|
|||
More about grids
|
||||
</summary>
|
||||
<p>As Pico focus on native HTML elements, we kept this grid system very minimalist.</p>
|
||||
<p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be +140% of the whole Pico library size. Not really in the <em>Pico spirit</em>.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="https://grid.layoutit.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="https://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>A full grid system in flexbox, with all the ordering, offsetting and breakpoints utilities can be +140% of the whole Pico library size. Not really in the Pico spirit.</p>
|
||||
<p>If you need a quick way to prototyping or build a complex layouts, you can look about <strong>Flexbox grid layouts</strong>. For example: <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
|
||||
<p>If you need a light and custom grid, you can look about <strong>CSS Grid Generators</strong>. For example: <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
|
||||
<p>Alternatively you can <a href="https://learncssgrid.com/">Learn about CSS Grid</a>.</p>
|
||||
</details>
|
||||
|
||||
|
|
@ -816,10 +811,11 @@
|
|||
<<b>p</b>>...</<b>p</b>>
|
||||
</<b>details</b>>
|
||||
|
||||
<<b>details</b>>
|
||||
<<b>details</b> <i>open</i>>
|
||||
<<b>summary</b>>Collapsible elements 2</<b>summary</b>>
|
||||
<<b>ul</b>>
|
||||
<<b>li</b>>...</<b>li</b>>
|
||||
<<b>li</b>>...</<b>li</b>>
|
||||
</<b>ul</b>>
|
||||
</<b>details</b>></code></pre>
|
||||
|
||||
|
|
@ -836,30 +832,16 @@
|
|||
<article>
|
||||
I'm a card!
|
||||
</article>
|
||||
|
||||
<pre><code><<b>article</b>>
|
||||
I'm a card!
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
<pre><code><<b>article</b>>I'm a card!</<b>article</b>></code></pre>
|
||||
<p>You can use <code><<b>header</b>></code> and footer <code><<b>footer</b>></code> inside <code><<b>article</b>></code></p>
|
||||
<article>
|
||||
<header>
|
||||
Header
|
||||
</header>
|
||||
Body
|
||||
<footer>
|
||||
Footer
|
||||
</footer>
|
||||
<footer>Footer</footer>
|
||||
</article>
|
||||
|
||||
<pre><code><<b>article</b>>
|
||||
<<b>header</b>>
|
||||
Header
|
||||
</<b>header</b>>
|
||||
Body
|
||||
<<b>footer</b>>
|
||||
Footer
|
||||
</<b>footer</b>>
|
||||
<<b>footer</b>>Footer</<b>footer</b>>
|
||||
</<b>article</b>></code></pre>
|
||||
|
||||
</section><!-- ./ Docs: Card -->
|
||||
|
|
@ -982,16 +964,7 @@
|
|||
|
||||
<!-- Love -->
|
||||
<section id="love">
|
||||
<hgroup>
|
||||
<h2>
|
||||
We
|
||||
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1.75rem" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
||||
</svg>
|
||||
<code>.classes</code>
|
||||
</h2>
|
||||
</hgroup>
|
||||
|
||||
<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>But off course, <code>.classes</code> are not a bad practice at all.</p>
|
||||
<p>Feel free to use <em>modifiers</em>.</p>
|
||||
|
|
@ -1000,7 +973,7 @@
|
|||
<pre><code><<b>button</b> <i>class</i>=<u>"warning"</u>>Action</<b>button</b>><br></code></pre>
|
||||
|
||||
</section>
|
||||
<p>Just try to keep your HTML clean and semantic to keep the <em>Pico spirit</em>.</p>
|
||||
<p>Just try to keep your HTML clean and semantic to keep the Pico spirit.</p>
|
||||
<section data-theme="invalid">
|
||||
|
||||
<pre><code><<b>button</b> <i>class</i>=<u>"button-red margin-large padding-medium"</u>>Action</<b>button</b>><br></code></pre>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ div[role="document"] > section::before {
|
|||
// External links
|
||||
// ––––––––––––––––––––
|
||||
|
||||
div[role="document"] section a[href^="https://"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ article {
|
|||
}
|
||||
|
||||
// Remove last-child margin bottom
|
||||
> *:not(footer):not(pre):last-child {
|
||||
> *:not(header):not(footer):not(pre):last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,14 @@
|
|||
// Classless version
|
||||
// Config
|
||||
// --------------------
|
||||
|
||||
// Enable <header>, <main>, <footer> inside <body> as a container
|
||||
$enable-semantic-container: true;
|
||||
|
||||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
@import "pico";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
// Fluid version
|
||||
// Config
|
||||
// --------------------
|
||||
|
||||
// Enable <header>, <main>, <footer> inside <body> as a container
|
||||
$enable-semantic-container: true;
|
||||
|
||||
// Enable a centered viewport
|
||||
$enable-viewport: false;
|
||||
|
||||
// Enable .classes
|
||||
$enable-classes: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
@import "pico";
|
||||
|
|
|
|||
|
|
@ -6,9 +6,20 @@
|
|||
* You can export only the modules you need
|
||||
*/
|
||||
|
||||
|
||||
// Config
|
||||
// --------------------
|
||||
|
||||
// Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
||||
$enable-responsive-spacings: false;
|
||||
|
||||
// Enable validation states for inputs
|
||||
$enable-input-states: false;
|
||||
|
||||
|
||||
// Pico Lib
|
||||
// --------------------
|
||||
|
||||
// Config
|
||||
@import "variables";
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue