sharpetronics/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-02-23 00:01:58 -05:00
Code Issues Projects Releases Wiki Activity

Merge pull request #245 from picocss/ll/docs-classless-and-customization

Browse Source 
Docs: Edit classless and customization
This commit is contained in:
Lucas Larroche 2022-10-02 16:51:06 +07:00 committed by GitHub
commit 022589287e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 81 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/classless.html
View File

File diff suppressed because one or more lines are too long

10
docs/customization.html
View File

@ -46,14 +46,14 @@
<i>$primary-600</i>: <u class="c600">…</u>;
<i>$primary-700</i>: <u class="c700">…</u>;
<em>// Import full Pico source code</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre><p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p><pre><code><em>/* Custom <span class="name"> </span>version */</em>
<em>// Import Pico</em>
<b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre><p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p><pre><code><em>/* Custom version */</em>
<em>// Custom theme</em>
<b>@import</b> <u>"path/themes/custom"</u>;
<b>@import</b> <u>"path/themes/custom"</u>;;
<em>// Import needed components</em>
<b>@import</b> <u>"path/layout/document"</u>;
<b>@import</b> <u>"path/layout/sectioning"</u>;
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/document"</u>;
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/sectioning"</u>;
<em>…</em>
</code></pre><p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/customization.min.js"></script></body></html>

36
docs/src/classless.html
View File

@ -22,6 +22,15 @@
</hgroup>
<p>Pico provides a <code>.classless</code> version (<a href="https://picocss.com/examples/classless/">example</a>).</p>
<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.html">containers</a> to define a centered or a fluid viewport.</p>
<pre><code><em>// Containers</em>
<b>body</b> > <b>header</b>,
<b>body</b> > <b>main</b>,
<b>body</b> > <b>footer</b> {
<em>…</em>
}
</code></pre>
<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>
@ -37,8 +46,35 @@
&lt;<b>link</b> <i>rel</i>=<u>"stylesheet"</u> <i>href</i>=<u>"https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"</u>&gt;
</code></pre>
<p>If you need to customize the default parent (<code>&lt;<b>body</b>&gt;</code>) for <code>&lt;<b>header</b>&gt;</code>, <code>&lt;<b>main</b>&gt;</code>, and <code>&lt;<b>footer</b>&gt;</code>, you can recompile Pico by defining another CSS selector.</p>
<p>Useful for <a href="https://reactjs.org/">React</a>, <a href="https://reactjs.org/">Gatsby</a> or <a href="https://nextjs.org/">Next.js</a>.</p>
<pre><code><em>/* Custom Class-less version for React */</em>
<em>// Set the root element</em>
<i>$semantic-root-element</i>: <u>"#root"</u>;
<em>// Enable &lt;header&gt;, &lt;main&gt;, &lt;footer&gt; inside $semantic-root-element as containers</em>
<i>$enable-semantic-container</i>: <u>true</u>;
<em>// Enable .classes</em>
<i>$enable-classes</i>: <u>false</u>;
<em>// Import Pico</em>
<b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre>
</section>
<p>The code above will compile Pico with the containers defined like this:</p>
<pre><code><em>// Containers</em></em>
<i>#root</i> > <b>header</b>,
<i>#root</i> > <b>main</b>,
<i>#root</i> > <b>footer</b> {
<em>…</em>
}
</code></pre>
${require('./_footer.html')}
</div>

12
docs/src/customization.html
View File

@ -102,19 +102,19 @@
<i>$primary-600</i>: <u class="c600">…</u>;
<i>$primary-700</i>: <u class="c700">…</u>;
<em>// Import full Pico source code</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre>
<em>// Import Pico</em>
<b>@import</b> <u>"@picocss/pico/scss/pico"</u>;</code></pre>
<p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p>
<pre><code><em>/* Custom <span class="name"> </span>version */</em>
<pre><code><em>/* Custom version */</em>
<em>// Custom theme</em>
<b>@import</b> <u>"path/themes/custom"</u>;
<b>@import</b> <u>"path/themes/custom"</u>;;
<em>// Import needed components</em>
<b>@import</b> <u>"path/layout/document"</u>;
<b>@import</b> <u>"path/layout/sectioning"</u>;
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/document"</u>;
<b>@import</b> <u>"@picocss/pico/scss/pico/layout/sectioning"</u>;
<em>…</em>
</code></pre>

10
scss/_variables.scss
View File

@ -1,13 +1,16 @@
// Config
// ––––––––––––––––––––
// Enable <header>, <main>, <footer> inside <body> as a container
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: false !default;
// Enable .container and .container-fluid
$enable-class-container: true !default;
// Enable a centered viewport for <header>, <main>, <footer> inside <body>
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
// Fluid layout if disabled
$enable-viewport: true !default;
@ -32,9 +35,6 @@ $enable-transitions: true !default;
// Enable overriding with !important
$enable-important: true !default;
// Set the root element for $enable-semantic-container and $enable-responsive-spacings
$semantic-root-element: "body" !default;
// Responsive
// ––––––––––––––––––––

2
scss/pico.classless.scss
View File

@ -1,7 +1,7 @@
// Config
// --------------------
// Enable <header>, <main>, <footer> inside <body> as a container
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: true;
// Enable .classes

4
scss/pico.fluid.classless.scss
View File

@ -1,10 +1,10 @@
// Config
// --------------------
// Enable <header>, <main>, <footer> inside <body> as a container
// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: true;
// Enable a centered viewport for <header>, <main>, <footer> inside <body>
// Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
$enable-viewport: false;
// Enable .classes