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 {
+  …
+}
+
\ No newline at end of file diff --git a/docs/customization.html b/docs/customization.html index 6a230774..04ce489c 100644 --- a/docs/customization.html +++ b/docs/customization.html @@ -46,14 +46,14 @@ $primary-600: …; $primary-700: …; -// Import full Pico source code -@import "path/pico";

Alternatively, you can create a custom theme and import it into your project with the components you need.

/* Custom  version */
+// Import Pico
+@import "@picocss/pico/scss/pico";

Alternatively, you can create a custom theme and import it into your project with the components you need.

/* Custom version */
 
 // Custom theme
-@import "path/themes/custom";
+@import "path/themes/custom";;
 
 // Import needed components
-@import "path/layout/document";
-@import "path/layout/sectioning";
+@import "@picocss/pico/scss/pico/layout/document";
+@import "@picocss/pico/scss/pico/layout/sectioning";
 …

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

\ 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/docs/src/customization.html b/docs/src/customization.html index 33b8b7ed..4dd5558f 100644 --- a/docs/src/customization.html +++ b/docs/src/customization.html @@ -102,19 +102,19 @@ $primary-600: …; $primary-700: …; -// Import full Pico source code -@import "path/pico"; +// Import Pico +@import "@picocss/pico/scss/pico";

Alternatively, you can create a custom theme and import it into your project with the components you need.

-
/* Custom  version */
+
/* Custom version */
 
 // Custom theme
-@import "path/themes/custom";
+@import "path/themes/custom";;
 
 // Import needed components
-@import "path/layout/document";
-@import "path/layout/sectioning";
+@import "@picocss/pico/scss/pico/layout/document";
+@import "@picocss/pico/scss/pico/layout/sectioning";
 …
 

 
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 
, 
,