From bd5a00c61b355c857b5c99323592ca432dea5d0a Mon Sep 17 00:00:00 2001 From: Mitchell Riedstra Date: Fri, 5 Jan 2024 23:18:49 -0500 Subject: wip --- htmx/static/pico-1.5.11/docs/src/classless.html | 84 +++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 htmx/static/pico-1.5.11/docs/src/classless.html (limited to 'htmx/static/pico-1.5.11/docs/src/classless.html') diff --git a/htmx/static/pico-1.5.11/docs/src/classless.html b/htmx/static/pico-1.5.11/docs/src/classless.html new file mode 100644 index 0000000..6321a1a --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/classless.html @@ -0,0 +1,84 @@ + + + + ${require('./_head.html') + title=`Class-less version` + description=`For wild HTML purists, Pico provides a .classless version.` + canonical=`classless.html` + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active=`classless-link`} + +
+
+
+

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 jsDelivr CDN:

+ +
// Centered viewport
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">
+
+ +
// Fluid viewport
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/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')} + +
+
+ + + -- cgit v1.2.3