mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-26 03:06:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finally stopped all the sass compile warnings, changed the tab-size to 2, and added responsive .row, .col-*, and .offset-* classes, using display:gid, the same way bootsrap-5 is set up for the .row, .com-* and .offset* classes.

Browse source
This commit is contained in:
Yohn 2024-11-10 16:43:55 -05:00
parent 84ed38efc9
commit fe78285302
249 changed files with 59188 additions and 594 deletions
Download patch file Download diff file Expand all files Collapse all files

2
scss/layout/_document.scss
View file

@ -47,6 +47,6 @@
text-underline-offset: var(#{$css-var-prefix}text-underline-offset);
text-rendering: optimizeLegibility;
overflow-wrap: break-word; // 2
tab-size: 4; // 3
tab-size: 2; // 3
}
}

86
scss/layout/_row.scss Normal file
View file

@ -0,0 +1,86 @@
@use "sass:string";
@use "sass:map";
@use "../settings" as *; // for spacing, breakpoints, and if columns are defined.
/* Source inspired by https://github.com/sophie-thomas/CSS-Grid/blob/main/assets/scss/grid.scss */
@if map.get($modules, "layout/row") {
$helper-cols: "";
$helper-offset: "";
/*--- CSS Grid ---*/
.row-fluid,
.row {
display: grid;
grid-template-columns: repeat($row-columns, 1fr);
gap: var(#{$css-var-prefix}grid-row-gap) var(#{$css-var-prefix}grid-column-gap);
}
.row {
max-width: map.get(map.get($breakpoints, "xl"), "viewport");
margin: 0 auto;
}
/* Defining columns spans and offsets */
// Loop through all column spans and define the .grid-column-end number
@for $col from 1 through $row-columns {
.col-#{$col} {
grid-column-end: span $col;
}
@if $col == 1 {
$helper-cols: ".col-1";
} @else {
$helper-cols: #{$helper-cols} + ", .col-" + #{$col};
}
}
// Loop through all column offsets and define the .grid-column-start number
@for $offset from 0 through $row-columns - 1 {
.offset-#{$offset} {
grid-column-start: $offset + 1;
}
@if $offset == 0 {
$helper-offset: ".offset-0";
} @else {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$offset};
}
}
// Defines media queries for each breakpoint and loops through both spans
// and offsets to set grid-column-end and grid-column-start
// Loop through breakpoints and generate media queries
@each $breakpoint, $values in $breakpoints {
@if $values {
@media (max-width: map.get($values, "viewport")) {
@for $col from 1 through $row-columns {
.col-#{$breakpoint}-#{$col} {
grid-column-end: span $col;
}
@if ($breakpoint != "sm") {
$helper-cols: #{$helper-cols} + ", .col-" + #{$breakpoint} + "-" + #{$col};
}
}
@for $offset from 0 through $row-columns - 1 {
.offset-#{$breakpoint}-#{$offset} {
grid-column-start: $offset + 1;
}
@if ($breakpoint != "sm") {
$helper-offset: #{$helper-offset} + ", .offset-" + #{$breakpoint} + "-" + #{$offset};
}
}
}
}
}
/* CSS Grid Media Queries */
// Sets the columns to be col-12 with a starting column of 1
$sm-size: map.get(map.get($breakpoints, "sm"), "viewport");
@media (max-width: $sm-size) {
//[class*="col-"] {
#{$helper-cols} {
grid-column-end: span $row-columns;
}
//[class*="offset-"] {
#{$helper-offset} {
grid-column-start: 1;
}
}
}