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

File diff suppressed because one or more lines are too long

View file

@ -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;

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

@ -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;

View file

@ -1,4 +1,4 @@
@if $enable-classes {
@if $enable-classes and $enable-grid {
/**
* Grid
* Minimal grid system with auto-layout columns

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);
// Spacings .grid
@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;