From 20869b20a211ef791b0e8fd33442e4905b72639f Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sun, 2 Oct 2022 16:45:28 +0700 Subject: [PATCH 1/2] docs: add documentation for $semantic-root-element --- docs/classless.html | 28 ++++++++++++++++++++++++-- docs/src/classless.html | 36 ++++++++++++++++++++++++++++++++++ scss/_variables.scss | 10 +++++----- scss/pico.classless.scss | 2 +- scss/pico.fluid.classless.scss | 4 ++-- 5 files changed, 70 insertions(+), 10 deletions(-) diff --git a/docs/classless.html b/docs/classless.html index 41d3143f..459c7192 100644 --- a/docs/classless.html +++ b/docs/classless.html @@ -1,5 +1,29 @@ -Class-less version • Pico.css

Class-less version

For wild HTML purists!

Pico provides a .classless version (example).

In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.

Usage:

Use the default .classless version if you need centered viewports:

<link rel="stylesheet" href="css/pico.classless.min.css">

Or use the .fluid.classless version if you need a fluid container:

<link rel="stylesheet" href="css/pico.fluid.classless.min.css">

These .classless versions are also available on unpkg CDN:

// Centered viewport
+Class-less version • Pico.css
Class-less version
For wild HTML purists!
Pico provides a .classless version (example).
In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.
// Containers
+body > header,
+body > main,
+body > footer {
+  …
+}
+
Usage:
Use the default .classless version if you need centered viewports:
<link rel="stylesheet" href="css/pico.classless.min.css">
Or use the .fluid.classless version if you need a fluid container:
<link rel="stylesheet" href="css/pico.fluid.classless.min.css">
These .classless versions are also available on unpkg CDN:
// Centered viewport
 <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
 
// Fluid viewport
 <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
-
Code licensed MIT

\ No newline at end of file
+

If you need to customize the default parent (<body>) for <header>, <main>, and <footer>, you can recompile Pico by defining another CSS selector.

Useful for React, Gatsby or Next.js.

/* Custom Class-less version for React */
+
+// Set the root element
+$semantic-root-element: "#root";
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: true;
+
+// Enable .classes
+$enable-classes: false;
+
+// Import Pico
+@import "@picocss/pico/scss/pico";

The code above will compile Pico with the containers defined like this:

// Containers
+#root > header,
+#root > main,
+#root > footer {
+  …
+}
+

Code licensed MIT

\ No newline at end of file diff --git a/docs/src/classless.html b/docs/src/classless.html index f9e494e1..6b854041 100644 --- a/docs/src/classless.html +++ b/docs/src/classless.html @@ -22,6 +22,15 @@

Pico provides a .classless version (example).

In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.

+ +
// Containers
+body > header,
+body > main,
+body > footer {
+  …
+}
+
+

Usage:

Use the default .classless version if you need centered viewports:

<link rel="stylesheet" href="css/pico.classless.min.css">
@@ -37,8 +46,35 @@ <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css"> +

If you need to customize the default parent (<body>) for <header>, <main>, and <footer>, you can recompile Pico by defining another CSS selector.

+

Useful for React, Gatsby or Next.js.

+ +
/* Custom Class-less version for React */
+
+// Set the root element
+$semantic-root-element: "#root";
+
+// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
+$enable-semantic-container: true;
+
+// Enable .classes
+$enable-classes: false;
+
+// Import Pico
+@import "@picocss/pico/scss/pico";
+ +

The code above will compile Pico with the containers defined like this:

+ +
// Containers
+#root > header,
+#root > main,
+#root > footer {
+  …
+}
+
+ ${require('./_footer.html')} diff --git a/scss/_variables.scss b/scss/_variables.scss index 1a3c9015..e2f653e1 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,13 +1,16 @@ // Config // –––––––––––––––––––– -// Enable
,
,