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

This commit is contained in:
Justin Bishop 2021-12-19 09:10:49 -08:00
parent f81a2e4af4
commit 6b0fa1d42a
22 changed files with 2548 additions and 20 deletions

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

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

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

View file

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