provide option to get all classes except .grid

I wanted a way to have the classless container, with no .grid class, but still get .secondary, .contrast, and .outline
This commit is contained in:
Justin Bishop 2021-12-18 20:41:11 -08:00
parent 73d75856f6
commit 5e20dbdc48
12 changed files with 2405 additions and 18 deletions

View file

@ -19,8 +19,6 @@
--typography-spacing-vertical: 1.5rem; --typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2); --block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing); --block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;

File diff suppressed because one or more lines are too long

View file

@ -545,9 +545,9 @@ section {
} }
/** /**
* Grid * Grid
* Minimal grid system with auto-layout columns * Minimal grid system with auto-layout columns
*/ */
.grid { .grid {
grid-column-gap: var(--grid-spacing-horizontal); grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical); grid-row-gap: var(--grid-spacing-vertical);

View file

@ -19,8 +19,6 @@
--typography-spacing-vertical: 1.5rem; --typography-spacing-vertical: 1.5rem;
--block-spacing-vertical: calc(var(--spacing) * 2); --block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing); --block-spacing-horizontal: var(--spacing);
--grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;
--form-element-spacing-horizontal: 1rem; --form-element-spacing-horizontal: 1rem;
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;

File diff suppressed because one or more lines are too long

2366
css/pico.gridless.css Normal file

File diff suppressed because it is too large Load diff

4
css/pico.gridless.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -494,9 +494,9 @@ section {
} }
/** /**
* Grid * Grid
* Minimal grid system with auto-layout columns * Minimal grid system with auto-layout columns
*/ */
.grid { .grid {
grid-column-gap: var(--grid-spacing-horizontal); grid-column-gap: var(--grid-spacing-horizontal);
grid-row-gap: var(--grid-spacing-vertical); grid-row-gap: var(--grid-spacing-vertical);

View file

@ -23,6 +23,9 @@ $enable-responsive-typography: true !default;
// .classless version if disabled // .classless version if disabled
$enable-classes: true !default; $enable-classes: true !default;
// Removes .grid class if disabled
$enable-grid: true !default;
// Enable transitions // Enable transitions
$enable-transitions: true !default; $enable-transitions: true !default;

View file

@ -1,8 +1,8 @@
@if $enable-classes { @if $enable-classes and $enable-grid {
/** /**
* Grid * Grid
* Minimal grid system with auto-layout columns * Minimal grid system with auto-layout columns
*/ */
.grid { .grid {
grid-column-gap: var(--grid-spacing-horizontal); grid-column-gap: var(--grid-spacing-horizontal);

16
scss/pico.gridless.scss Normal file
View file

@ -0,0 +1,16 @@
// Config
// --------------------
// Enable <header>, <main>, <footer> inside <body> as a container
$enable-semantic-container: true;
// Enable .classes
$enable-classes: true;
// Disable .grid
$enable-grid: false;
// Pico Lib
// --------------------
@import "pico";

View file

@ -51,8 +51,10 @@
--block-spacing-horizontal: var(--spacing); --block-spacing-horizontal: var(--spacing);
// Spacings .grid // Spacings .grid
--grid-spacing-vertical: 0; @if $enable-classes and $enable-grid {
--grid-spacing-horizontal: var(--spacing); --grid-spacing-vertical: 0;
--grid-spacing-horizontal: var(--spacing);
}
// Spacings for form elements and button // Spacings for form elements and button
--form-element-spacing-vertical: 0.75rem; --form-element-spacing-vertical: 0.75rem;