support a gridless mode, which includes all classes except .grid and .container and then uses the classless method for supporting .container.

2025-11-18 00:12:52 -05:00 · 2021-12-19 09:10:49 -08:00 · 2021-12-19 09:10:49 -08:00 · 6b0fa1d42a
commit 6b0fa1d42a
parent f81a2e4af4
22 changed files with 2548 additions and 20 deletions
--- a/css/pico.classless.css
+++ b/css/pico.classless.css
@ -19,8 +19,6 @@
  --typography-spacing-vertical: 1.5rem;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
-  --grid-spacing-vertical: 0;
-  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 0.75rem;
  --form-element-spacing-horizontal: 1rem;
  --transition: 0.2s ease-in-out;
--- a/css/pico.classless.css.map
+++ b/css/pico.classless.css.map
--- a/css/pico.classless.min.css
+++ b/css/pico.classless.min.css
--- a/css/pico.classless.min.css.map
+++ b/css/pico.classless.min.css.map
--- a/css/pico.css.map
+++ b/css/pico.css.map
--- a/css/pico.fluid.classless.css
+++ b/css/pico.fluid.classless.css
@ -19,8 +19,6 @@
  --typography-spacing-vertical: 1.5rem;
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);
-  --grid-spacing-vertical: 0;
-  --grid-spacing-horizontal: var(--spacing);
  --form-element-spacing-vertical: 0.75rem;
  --form-element-spacing-horizontal: 1rem;
  --transition: 0.2s ease-in-out;
--- a/css/pico.fluid.classless.css.map
+++ b/css/pico.fluid.classless.css.map
--- a/css/pico.fluid.classless.min.css
+++ b/css/pico.fluid.classless.min.css
--- a/css/pico.fluid.classless.min.css.map
+++ b/css/pico.fluid.classless.min.css.map
--- a/css/pico.gridless.css
+++ b/css/pico.gridless.css
--- a/css/pico.gridless.css.map
+++ b/css/pico.gridless.css.map
--- a/css/pico.gridless.min.css
+++ b/css/pico.gridless.min.css
--- a/css/pico.gridless.min.css.map
+++ b/css/pico.gridless.min.css.map
--- a/css/pico.min.css.map
+++ b/css/pico.min.css.map
--- a/css/pico.slim.css.map
+++ b/css/pico.slim.css.map
--- a/css/pico.slim.min.css.map
+++ b/css/pico.slim.min.css.map
--- a/css/themes/default.css.map
+++ b/css/themes/default.css.map
--- a/css/themes/default.min.css.map
+++ b/css/themes/default.min.css.map
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@ -23,6 +23,9 @@ $enable-responsive-typography: true !default;
 // .classless version if disabled
 $enable-classes: true !default;

+// Removes .grid class if disabled
+$enable-grid: true !default;
+
 // Enable transitions
 $enable-transitions: true !default;

--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@ -1,4 +1,4 @@
-@if $enable-classes {
+@if ($enable-classes and $enable-grid) {
  /**
 * Grid
 * Minimal grid system with auto-layout columns
--- a/scss/pico.gridless.scss
+++ b/scss/pico.gridless.scss
@ -0,0 +1,19 @@
+// Config
+ // --------------------
+
+ // Enable <header>, <main>, <footer> inside <body> as a container
+ $enable-semantic-container: true;
+
+ // Enable .classes
+ $enable-classes: true;
+
+ // No .container class
+ $enable-class-container: false;
+
+ // Disable .grid
+ $enable-grid: false;
+
+ // Pico Lib
+ // --------------------
+
+ @import "pico";
--- a/scss/themes/default/_styles.scss
+++ b/scss/themes/default/_styles.scss
@ -50,9 +50,10 @@
  --block-spacing-vertical: calc(var(--spacing) * 2);
  --block-spacing-horizontal: var(--spacing);

-  // Spacings .grid
-  --grid-spacing-vertical: 0;
-  --grid-spacing-horizontal: var(--spacing);
+  @if ($enable-classes and $enable-grid) {
+    --grid-spacing-vertical: 0;
+    --grid-spacing-horizontal: var(--spacing);
+  }

  // Spacings for form elements and button
  --form-element-spacing-vertical: 0.75rem;